Question

I have a small web app I’m testing and previously this worked:

    if ($(this).is(':radio') && $(this).is(':checked'))
    {   
        val       = $(this).val();
        saveThis  = true;
    } else if ($(this).is(':checkbox') && $(this).is(':checked')) {
        val       = true;
        saveThis  = true;
    } else if (($(this).is(':checkbox') || $(this).is(':radio'))) {
        saveThis  = false;
    } else {
        val       = $(this).val();
        saveThis  = true;
    }   

Here is the form:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Capture Type:</legend>
            <input id="capture_type_onsite" name="capture_type" type="radio" value="onsite" />
            <label for="capture_type_onsite" style="width: 200px;">OnSite</label>

            <input id="capture_type_phone" name="capture_type" type="radio" value="phone" />
            <label for="capture_type_phone" style="width: 200px;">Phone</label>
    </fieldset>
</div>

But now, when I do console.log($(this)) ($this being the form element), I get:

<input id=​"contact_type_member" name=​"contact_type" type=​"radio" value>

Here is the code from above with some console.log’s thrown in:

    if ($(this).is(':radio') && $(this).is(':checked'))
    {   
    console.log('Radio checked: '+$(this).attr('name')+' '+$(this).val());
    console.log($(this));
        val       = $(this).val();
        saveThis  = true;
    } else if ($(this).is(':checkbox') && $(this).is(':checked')) {
    console.log('Checkbox checked: '+$(this).attr('name')+' '+$(this).val());
        val       = true;
        saveThis  = true;
    } else if (($(this).is(':checkbox') || $(this).is(':radio'))) {
    console.log('Checkbox or radio NOT checked: '+$(this).attr('name')+' '+$(this).val());
        saveThis  = false;
    } else {
    console.log('OTHER input: '+$(this).attr('name')+' '+$(this).val());
        val       = $(this).val();
        saveThis  = true;
    }   

Here’s what the is(:radio) is(:checked) — first if statement — shows:

Radio checked: capture_type 
[<input id=​"capture_type_onsite" name=​"capture_type" type=​"radio" value>​]

I’m trying to save with localStorage (I create an object of all form elements, then save it using JSON.stringify), then re-populate records based on which one they chose. This all worked before I implemented jQuery Mobile so I guess it must be doing something with the values, but I’m not sure. As you can see from the debugging statement, the value is empty by the time it gets to this.

Thanks in advance,
Hans

Answer 1

try:

var radio_val = $('input[name=capture_type]:checked').val();
alert('Radio Value: '+radio_val);

Live Example: http://jsfiddle.net/WSqTS/9/