Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/
You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();
Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.
You should be able to use .val()
See this: http://api.jquery.com/val/
Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.
You can simply call
$("[name=contact2]:checked").val()
Related
Let's say because of database restrictions 2 radiobuttons have the same value ( I know that it's better without using this ). Is it possible accordingly to this picture:
to select the first of two the same values when opening the page? So in this example "Geen" has the same value as "Dagelijks". When the page opens it should be "Dagelijks" that is pre checked (this depends on the value with this client ID, could also be wekelijks or maandelijks prechecked). Does anyone know if this is possible? Thanks in advance!
Assuming you are using javascript, it is certainly possible. Target the first element, something like this should work:
$('input[value="Geen"]').filter(':visible:first').prop('checked', true);
It can be done by making those radio buttons as default or checked true.
My tag is a single-choice pulldown, the default behavior for a tag. I have three values in it, "No", "Yes", "All". I am trying to change the selected programmatically, as I have done a thousand times before, with the following code (I'm using JQuery 1.9.1):
$('#select').children(':selected').removeAttr('selected');
$('#select').children('option[value="yes"]').attr('selected', 'selected');
$('#select').children(':selected');
I don't even know how this is possible, but somehow, in Chrome 26.0.1410.65 running on 10.8.3, there will be two selected options. Only one of them will show in the UI, but the last line of code will return two elements.
This does work correctly in Firefox 16.0.2, so I am mystified. Does anyone know if this is a quirk of Chrome, or if this is correct behavior and it's just changed?
You can do this to select desired value
$('#select').val('yes');
Stop trying to manipulate properties using attribute methods! Older versions of jQuery let you do this, but newer ones won't.
$('#select').children(':selected').prop("selected",false);
$('#select').children('option[value="yes"]').prop("selected",true);
//$('#select').children(':selected');
Though .val() as pointed out by Mohammad Adil is a better way of handling this.
You should not use the selected attribute to change what option is selected. Instead, use the selectedIndex property of your dropdwn.
For instance, in your case you might want this:
document.getElementById('select').selectedIndex = 1;
I my form I have duplicate checkbox like
<input type="checkbox" name="todayDimensionStones[].isIssued" id="isIssued" value="Yes"/>
I am creating another checkbox using above using clone() method using jquery.The checkbox box is created successfully.But when I checked and submit the form containing the newly created checkbox and retrieve the value of newly created checkbox,it seems to be empty ie ''. What I to do solve this problem.If any have an idea ,please share with me
You have to change the attribute name
or you have to add [] at the end of the name.
If you send two inputs with the same name without [] at he end, php gives you the last one only.
If anyone stumbles about this: value attribute is probably missing. Set it manually after cloning:
On the cloned element with some checkboxes do:
$clone.find(':checkbox').each(function() {
$(this).attr('checked','checked')
});
Thats on IE9. See https://bugs.jquery.com/ticket/10550
I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}
I have a javascript that needs to grab the value of a checkbox when its checked and ignore its value when its not checked.
Right now i'm grabbing the value of the checkbox with:
$("input[name='tos']:checked").val()
It works when you check the box and submit the form, but if you uncheck it and resubmit the form the old value of "agree" is given. So i'm wondering how to I grab the value of a checkbox only when its checked?
http://jsfiddle.net/dqy5H/
Here is an example fiddle. Sorry for the bad first response.
Don't forget that unchecked checkboxes don't travel in form submission. Your code is ok, but you may have the old value stored on server side.
A workaround is tht you could have an <input type="hidden"/> that changes its value when you check/uncheck the checkbox, and read this hidden on the server. Or simply, ask if the checkbox arrived to the server, if it didn't it means it was unchecked.
Hope this helps. Cheers
Two things, in order of least to most helpful :)
A checkbox should never return a value of "agree"! I'm hoping you misspoke.
I'm not sure the jQuery selector you used there is actually valid. As the other fellow mentions, it is but it only ever sets the value when it's checked. Oof, my bad. In any case, I'd still recommend giving the checkbox an ID/unique class, and then do:
var checked = $('#toscheckbox').val();
You can add IDs without messing up the form's submission data, and I prefer them - names are so fiddly.
Try giving it an id and calling .is(':checked') like in this article to see if it is checked or not.
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html