I'm trying to dynamically set a an input value("choice" in my case) inside a form based on user inputs. After setting the desired value, I want to disable the field so that user cannot change it. Here is the code i'm using.
// HTML
<select name="0-choices" id="id_0-choices">
<option value="Phone">Phone</option>
<option value="Fax">Fax</option>
<option value="Voicemail">Voicemail</option>
</select>
//Javascript
$(cfield).children().first().removeAttr('selected');
$(cfield).children('option[value="Voicemail"]').attr('selected','selected');
//$(cfield).val('Voicemail');
$(cfield).attr('disabled','disabled');
The problem is, if I disable the field, the field is not available in the posted data. So my validation function complains of data not available. How can I "freeze" the input field and yet be able to post it.
I got to this problem too, and guess you try to disable the fields while sending Ajax request, the best solution i found was using readonly instead:
$(cfield).attr('readonly', true);
Users can't modify the field's value but they are still read
You can disable the field, and then copy its value into a hidden form field.
HTML
<input type="hidden" name="cfield_hidden"/>
JavaScript
// snip...
$(cfield).attr('disabled','disabled');
$('#cfield_hidden').val($(cfield.val());
Or, you could enable the options immediately before submitting the form:
$('some-form-selector').submit(function ()
{
$(this).find('option').attr('disabled', false);
});
make a hidden input field like
$('.your-form').append("<input type='hidden' name='0-choices' value='"+$('cfield option:selected).val()+"' />")
as disabled inputs won't be submitted ..
You can use a hidden field to store the value you whant to send once you disable the input field.
Something like this:
$(cfield).append('<input type="hidden" id="hiddenField" value="'+$(cfield).val()+'"/>');
$(cfield).attr('disabled','disabled');
as you say disabled inputs are not included in the post data, your best option is to either fix your server side logic or to store a input hidden field with name 0-choices and the value you want posted.
i would clone the field on submit and set remove the disabled attr. And append it to your form as display none.
Or simply remove the disabled onsubmit.
PS: your username would be cooler with a M instead of the N ;)
Related
I have a form which dynamically adds or removes input fields depending on certain selections which have been made by the user.
The basic form looks like this, simplified:
<form action="...some/path..." id="MyForm" method="post">
<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->
<select name="selectList">
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>...</option>
</select>
<div id="UpdateThisSection"></div>
<input type="submit" value="Submit">
</form>
Depending on which option the user picks from the select list, the user will be presented with different input fields, which are rendered in the #UpdateThisSection div.
The input fields for option #1 would be:
Date Field (required), so the required attribute is set to the input field, as well as the custom data-type="Date" attribute
Text (optional), no required attribute is set
The input fields for option #2 would be:
Text (optional), no required attribute set
Text (optional), no required attribute set
The input fields for option #3 would be:
Text (optional), no required attribute set
Numeric (optional), required attribute set, as well as the custom data-type="Numeric" attribute
The jquery validation is implemented like this:
$("#MyForm").validate();
$.validator.addMethod("usDate",
function (value, element) {
return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
},
"Please enter a valid date."
);
$("input[data-type='Date']").each(function () {
if ($(this).prop("required")) {
$(this).rules("add",
{
usDate: true
});
}
});
$("input[data-type='Numeric']").each(function () {
$(this).rules("add",
{
number: true
});
});
Validation works perfectly fine if I open the form and select any option. The form is being validated the way it should. However, if I change my mind and select a different option from the dropdown, the form is not validating correctly anymore. On submit, I see that the form is being validated with the previous form's requirements.
Looking at the $("#MyForm").validate() object on the console the invalid as well as the submitted property are still holding information of the previous form. What is the easiest way to reset the validator whenever a new ajax call load a new form element?
I tried to reset the form using $("#MyForm").validate().resetForm(); but it didn't clear the properties mentioned above.
Trying to clear the validation as suggested in this stackoverflow-post didn't resolve the issue for me either.
What is the easiest way to reset the validator whenever a new ajax call load a new form element?
In the Ajax success callback, remove all static rules from an element
$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...
Sorry... can't easilly recreate that for a demo.
I've got a multiple select like this configured to auto-populate:
<select id="multiple-select-box" class="selectivity-input" data-placeholder="Type to search condos" multiple>
<option id="Alabama Grove Terrace" value="Alabama Grove" >Alabama Grove Terrace</option>
<option id="Alden Pines" value="Alden Pines" >Alden</option>
</select>
Upon select I realized the script is submitting the visible Text for each option instead of the value="" for each option chosen.
I tried to change var t=$(this).text(); to var t=$(this).value(); thinking that would grab the value instead of the option text but had the same results. What am I missing?
<script>
$(document).ready(function() {
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).text();
//if()
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
})
$('#multiple-select-box').selectivity();
});
</script>
Ok, so I went to check this selectivity plugin you're using and it converts your select into a series of divs as
<div class="selectivity-results-container">
<div class="selectivity-result-item highlight" data-item-id="Alabama Grove">Alabama Grove Terrace</div>
<div class="selectivity-result-item" data-item-id="Alden Pines">Alden</div>
</div>
you have to change your submit function to get the data-item-id property which corresponds to your original select value like
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).data("item-id");
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
edit
fiddle example
In this line, you are appending options to the select, but you have set no value attribute:
$(".ml").append("<option selected='selected'>"+t+"</option>");
As stated in the comments, the "fetch value" method of a form element in jQuery is:
$(this).val()
You might be confusing it with the JavaScript property:
this.value
...which also works. Both return an array of strings if something is selected and set to "multiple"
To follow up on your comment, I don't see your markup for the selected element with class="ml" thus it's almost impossible to debug why your form isn't submitting the values without seeing the bigger picture (i.e. it may be outside the form element). You could try adding the value property to the select element however jQuery should be able to pick up selected options missing the value property by using the text value instead.
I am looking to see if it's possible to submit a form automatically when a field is not empty. I have a 1 input fielded form which is a date picker. I am hoping that when the user selects a date it submits this value automatically.
Is this possible?
Cheers
I found a solution to it:
<script>
function myFunction() {
var el = document.getElementById('input-datepick').value;
if (el!=""){
document.getElementById('datepick').submit();
}
}
</script>
then on my HTML
<input onchange="myFunction()" name ="input-datepick" id="input-datepick"
type="text" class="form-control datepicker">
You can simply add an EventListener to your input field and submit the associated form when the input field changes:
document.getElementById('id of your input field').addEventListener('change',function(){
document.getElementById('id of your form').submit()
}
hood a function on date picker enter button.
use jquery .submit function if your input is warped in a form.
Another way could be use .ajax call pass your input value as ajax data. is not needed in this approch
I am using jq-idealforms to create form. Currently I am not using dynamic method to create any field. on certian event, I would like to set value in all the fields in the given form.
In other words, I want to preload the form with specific values on certain event. I am not able to find any such kind of documentation. So need help
Demo form : http://bit.ly/1ahZalu
I do not know if I understood well, but maybe this can help
http://jsfiddle.net/ymfvqyob/2/
var set=[]; //array name:field value, ...
set.push({'username':'test username 1','email':'test email 1'});
set.push({'username':'test username 2','email':'test email 2'});
//here is a click event used to call functions setVal
$('#set1').click(function(){
setVal(0)
})
$('#set2').click(function(){
setVal(1)
})
function setVal(ind)
{
$.each(set[ind],function(name,val){
$('form input[name="'+name+'"]').val(val);
})
}
In the HTML, just use the "value" attribute for text, and the "checked" attribute for radios and checkboxes:
<input type="text" value="John"/><br/>
<input type="checkbox" checked/>
As you can see, these automatically have specified values.
I hope this helps!
I used the script on one of my scripting it was great i thought i solved the problem but whenever i change my option every button on my page chages to the same value of the option.Can i restrict my values to a single input type?
this is the script in question
<select>
<option text="ok">1</option>
<option text="hello">2</option>
<option text="test">3</option>
</select>
<input type="text" />
$(function(){
$('select').on('change', function(){
$('input').val($('option:selected', this).attr('text'));
});
});
of course, just apply an id to the specific input and change
$('input').val(...)
into
$('#your-input-id').val(...)
This is why:
$('input')
Every change of your select, you are targetting all inputs in the page. You can restrict by making the selector specific, for example:
$('input[type=text]') //all inputs of type "text"
$('input[type=submit]') //all inputs of type "submit"
$('input.customButton') //all inputs of class "customButton"
If every SELECT menu has an INPUT below it that you want to update, you can do:
$("select").change(function() {
$(this).next("input[type='text']").val($('option:selected', this).attr('text'));
});