Question

Hi I have a form that data post something weird…

HTML:

<form>
   <input type="radio" name="datatype" value="1"/> <label>Datatype 1</label>
   <input type="radio" name="datatype" value="2"/> <label>Datatype 2</label>
   <button type="submit">Submit</button>
</form>

FORM 1:

$('form').submit(function(){
    var dt = $(this).serializeArray();
    $.ajax({
        url: 'post.php',
        data: dt,
        ..................
    })
})

FORM 2:

  $('form').submit(function(){
    var opt = $(['input[name=datatype]').val();
    var dt = [{name:'dtype',value: opt }];

    $.ajax({
        url: 'post.php',
        data: dt,
        ..................
    })
})

In FORM 1 datatype properly post with the correct value either 1 or 2. In this part I am using serialize array. Now the weird thing is on FORM 2 if you choose datatype 2 it always post the value of 1. I need to use FORM 2 for some reason… Am glad if anyone could help. Thanks

Answer 1

You should try this:

$('form').submit(function(){
    var opt = $('input[name=datatype]:checked').val();
    var dt = [{name:'dtype',value: opt }];

    $.ajax({
        url: 'post.php',
        data: dt,
        ..................
    })
})

---

Why your FORM2 code always get 1

By default it get the value according to the order in DOM. As radio with value="1" comes first so it select the value 1, though you select the radio with value="2".

---

Correction to your code

Your $(['input[name=datatype]').val(); statement is wrong. it should

$('input[name=datatype]:checked').val(); which will get the value of checked radio button.

Your selector may also be:

$(':radio:checked[name=datatype]').val()

Working sample