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!
Related
I have a MVC3 app using Project Awesome (http://awesome.codeplex.com/), but I am getting a weird behaviour on checkboxes. I have the following simple Html within a Modal popup <input type="checkbox" class="check-box" name="IsDeleted">
When I submit the form containing this element, its post value is 'on' instead of the expected 'true' (when element is checked).
Does anybody know why this is? I am assuming there may be some javascript somewhere messing with the form data, but wanted to check whether there isn't some HTML I am missing.
Thanks
Set the checkboxes value attribute to true and you will get true in your post value.
It's browser specific, I suppose, what to send when value is undefined. You need to defined value attribute on your radios/checkboxes to be sure what will be passed back to you. I would suggest value="1"
set data-val="true" and value="true" by deafult...
if checkbox is checked then returns true
Check Checkbox is checked or not if checked set Hidden field true else set hidden field false.
$('#hiddenFieldId').val($('#CheckBoxId').attr('checked')=='checked')
Surely you should just check if it is set - the value that it sends across is irrelevant, if it's not checked, then nothing at all gets sent when you POST.
Nothing worked!
I ended up on a hacky way after seeing the serialised form object just before posting to controller/action. Its not safe in case if anyone would have any textboxes inside that may contain ampersands. In my case, i had an array of checkboxes, so I did this hack after I am very sure, i won't have problems.
var formData = $("#form").serialize();
formData = formData.replaceAll('=on&','=true&');
if (formData.endsWith('=on'))
{
formData = formData.substring(0, formData.length - 3) + "=true";
}
Hope it helps to those 'someone' with my scenario. Happy hacking.
Use jQuery for cross-browser decision. And it will return true or false anyway.
$('#check-box-id').attr('checked' ) == true
if your checkbox has an id check-box-id. For your current version use the next (select by class name):
$('.check-box').attr('checked' ) == true
Use jQuery
var out=$('.check-box').is('checked')
If checkbox is checked out=true
else out=false
In HTML, add a input type="hidden" above checkbox:
<input name="active" id="activeVal" type="hidden">
<input id="active" type="checkbox">
Then, add a script as below:
$('#activeVal').val($('#active').is(':checked'));
$('#active').change(function() {
$('#activeVal').val($('#active').is(':checked'));
});
When you do eg. $('#your-form').serialize() in jQuery, you will get value of checkbox when checked active: true or uncheck active: false
With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.
You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API
You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status
Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);
With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...
I have two forms.
I want to copy the value of one of the text fields in form 1 into another in form 2.
Text field names and ids are different.
How can I achieve this?
This didn't work:
document.getElementById('name').value = document.getElementById('user').value;
Thanks!
If you're asking for jQuery you could try:
$("#name").val($("#user").val());
http://jsbin.com/exudif/2/
$(document).ready(function()
{
$('#btn1').click(function()
{
$('#field2').val($('#field1').val());
});
});
To get the value using jquery .it has to be done this way .
Also make sure you have given id to the input fields .
like this: <input type='text' name='user' id='user' >
Then only this code will work properly
$(document).ready(function()
{
$('#buttonElement').click(function()
{
$('#name').val($('#user').val());
});
});
I'm working with Google Checkout and am creating a simple Buy Now button. The button will be on many pages and have many values for the form.
What I'm looking to do is to use Javascript, to get a value on a text_field, and replace a hidden field value.
To get the value, I have this code:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
return false;
});
Then, in the form from google, I have this:
<input type="hidden" name="item_quantity_1" value="1"/>
What I need to be able to do, is replace the value on this hidden input, with my quantity variable. I know this is probably really easy, but I'm amazingly confused at how to do this. I should have to select the hidden field, but I don't know how to update the value?
Here ya go:
$('input[name="item_quantity_1"]').val(quantity);
You just have to construct a jQuery selector to get that field and then use the .val(xxx) method to set its value.
jQuery loves to overload the same method for different behaviors based on what you pass as arguments. In the case of .val(), if you pass no arguments, it retrieves the field value. If you pass an argument like .val(quantity), it sets that value into the field like this:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
$("input[name='item_quantity_1']").val(quantity);
return false;
});
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 ;)