Custom bootstrap form, using SharePoint REST API, has text fields, checkboxes and radio buttons. Posting values from radio buttons work, value gets posted to a single line text column. However, on my edit form the radio buttons do not appear checked, text fields display data correctly (haven't even tried checkboxes yet).
$ajaxjj({
async:true,
url:_spPageContextInfo.webAbsoluteUrl + "/api/web/lists/GetByTitle('abc')/GetItemByID(" + value + ")",
method:"GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type":"application/json;odata=verbose"
},
success: function(data) {
console.log(data.d.Title);
$('#FirstName').val(data.d.firstName);
$('input:radio[name="q1"]').val(data.d.question1).prop('checked');
HTML
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input qOne" id="q1y" name="q1" value="Yes">
<label class="custom-control-label" for="q1y">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input qOne" id="q1n" name="q1" value="No">
<label class="custom-control-label" for="q1n">No</label>
</div>
Figured it out.
$('input[name=q1][value=' + data.d.q1Response + ']').prop('checked',true);
Related
How to add form validation on group of radio button using jquery form validation plugin. I have tried to add data-validation="required" but its not working.
PFB HTML code :
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="required">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="required">
<label for="inlineRadio2"> Inline Two </label>
</div>
Script code is :
$.validate()
I have taken the plugin from this url http://www.formvalidator.net/
You have to make a custom validator called custom radio. and add the attribute "data-validation="custom_radio" on input type
PFB code for your reference:
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio2"> Inline Two </label>
</div>
This is javascript code for custom validator where you return boolean based on value. which should get called before $.validate() function.
$.formUtils.addValidator({
name : 'custom_radio',
validatorFunction : function(value, $el, config, language, $form) {
if(value==='option 1'){
return false;
}else{
return true;
}
},
errorMessage : 'You have to atleast check one radio',
errorMessageKey: 'badradiobutton'
});
$.validate()
I do not understand how I can validate a form with jquery validate to display the Submit button or not.
My javascript is as follows:
ko.bindingHandlers.jqValidate = {
init: function (element, valueAccessor, option) {
var element = element;
var validateOptions = {
ignore: [":hidden:not(required)"],
focusCleanup: true,
onsubmit: true
};
function displaySubmitButton() { // Remove/Add class to submit button
if ($('form').valid()) $('.toSave').show();
else $('.toSave').hide();
}
$('form').bind('onchange keyup onpaste', function (event, element) {
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
}
};
My form :
<ol class="MutColor13 mouseOver" data-bind="jqValidate: {}">
<li class="rightCol">
<strong>
<label for="iEmailReply"><asp:Literal runat="server" ID="lEmailReply" /></label>
</strong>
<input id="iEmailReply" name="EmailReply" type="text" tabindex="2"
class="MutColor13 email"
data-bind="value: communication.Message.ReplyEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<li class="leftCol">
<strong>
<label for="iEmailFrom"><asp:Literal runat="server" ID="lEmailFrom" /></label>
</strong>
<input id="iEmailFrom" name="EmailFrom" type="text" tabindex="1"
class="MutColor13 email"
data-bind="value: communication.Message.SenderEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<!-- and more form input -->
</ol>
My submit button :
<div class="buttonBlock rightButton" data-bind="fadeVisible: validateMessage()">
<a class="MutButton3 toSave" data-bind="click: saveMessage"><span class="MutButton3">submit</span></a>
</div>
when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point
How do I enable the display of the error message from the input short change while allowing the display of the submit button if fields (and any other form fields in the page) if all fields are valid?
I was inspired by this question: jquery validate: IF form valid then show submit button
a working demo : http://jquery.bassistance.de/validate/demo/
but the button is displayed continuously
ok I think this could work:
http://jsfiddle.net/Ay972/10/
what I did :
$('form').bind('change oninput', function (event, element) {
console.log('formLive :: ', $(event));
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
the 'change oninput' seems to work.
I have 3 radio buttons that are rendered in an mvc3 View. I'm using a view model and the following is View.aspx page where the radioButtonFor is rendered:
<%= Html.RadioButtonFor(model => model.Input.YesNoMaybe, item.Value, new { id = String.Format("Input_YesNoMaybe_{0}", item.Value) })%>
Can someone please help me figure out how to simply access and select the 2nd of the 3 radio buttons to checked using jQuery?
So far I've tried multiple variations of the following:
$("input[name='Input.YesNoMaybe_1']").attr('checked', 'checked');
This is HTML being rendered:
<div id="divEscrowFeeSplit">
<input type="radio" value="1" name="Input.YesNoMaybe" id="Input_YesNoMaybe_1" data-val-required="required." data-val-range-min="1" data-val-range-max="2147483647" data-val-range="select a valid option" data-val-number="Must be a number." data-val="true">
<label for="Input_YesNoMaybe_1">Yes</label>
<input type="radio" value="2" name="Input.YesNoMaybe" id="Input_YesNoMaybe_2">
<label for="Input_YesNoMaybe_2">No</label>
<input type="radio" value="3" name="Input.YesNoMaybe" id="Input_YesNoMaybe_3" checked="checked">
<label for="Input_YesNoMaybe_3">Maybe</label>
Try this:
$("#Input_YesNoMaybe_1").attr('checked', 'checked');
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});
need a little help. My jQuery was going smooth today until I hit a wall. I am trying to have multiple forms (individual line items) editable on the fly via AJAX, with a text submission link or some kind of submit button. Problem is, I can get it to submit the form via the AJAX, but without any of the data from the form... i.e. hit submit, it sends the request, but no querystring. Can someone please help me identify what's missing?
Here is my jquery:
$('.submitLineChanges').click(function() {
var formID = $(this).closest('form').attr('ID')
datastring = $(formID).serialize();
$.ajax({
type:'POST',
url: 'update_ajax.asp',
data: datastring,
success: function(response) {
alert("Success " + id)
//$('#ContactForm').find('.form_result').html(response);
}//end ajax options
});//end ajax
return false;
});//end of click function
And my form:
<form id="line-item-<%= intRecID %>-form" class="submitLineForm">
<input type="hidden" name="UpdateLineItem" value="true" />
<span class="edit" id="edit-line-<%= intRecID %>" style="display: none;">
<span class="quantity"><input name="part_qty" id="part_qty_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_qty"),0)%>"></span>
<span class="partno"><input name="part_no" id="part_no_<%= intRecID %>" type="text" value="<%=rs("quote_part_id")%>"></span>
<span class="descrip"><Textarea name="part_descrip" type="text" id="descrip<%= intRecID %>" rows="3"><%=rs("quote_part_descrip")%></Textarea></span>
<span class="sellprice">$<input name="part_sale" id="part_sale_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_sale"),2)%>"></span>
<span class="margin" id="emargin_<%= intRecID %>"><%=margin%></span>
<span class="cost"><strong>Cost: </strong>$<input name="part_cost" id="part_cost_<%= intRecID %>" type="text" value="<%=FormatNumber(cost,2)%>"></span>
<span class="wt"><strong>Weight: </strong><input name="part_wt" id="part_wt_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_wt"),2)%>"></span>
<span class="update"><input type="button" value="Save Changes" class="submitLineChanges" /></span>
</span>
</form>
As you should be able to tell, I'm running this in ASP. The form is for each line item in a cart basically. Because of the nature of the page, I don't want to have a separate page to edit all the info. It seems this should work, but its likely I'm missing something through the tunnel vision I'm in now.
I should note, the form is for each line, I don't need it to submit all the forms, just the one.
Thanks
Change
datastring = $(formID).serialize();
to
var datastring = $('#' + formID).serialize();
You need to use a # prefix using the ID selector. Also - without the var keyword you polluting the global namespace for no reason.
Or even better ... you could replace
var formID = $(this).closest('form').attr('ID');
var datastring = $('#' + formID).serialize();
with
var datastring = $(this).closest('form').serialize();
Which finds the form and serialises it all in one go !!
Thanks to #MikeBrant for that suggestion.