CODEWITHSUNDEEP
javascriptphpjqueryajax
maxhill901
maxhill901

Reputation: 33

AJAX sending wrong info

so i have 3 radios buttons with different values, when i select one of them it always giving me the value "3" or the last value of them.I tried submit with no ajax it's work fine !

HERE IS MY .js code 

$(document).ready(function(){

$('form').on('submit', function() {
    var that = $(this),
     url = that.attr('action'),
     type = that.attr('method') ,
     data  = {};

    that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();


        data[name] = value;
    });

        $.ajax({
        url: url,
        type: type,
        data: data, 
        success : function(rdata) {
              $("#st").html(rdata);
        }
    });

    return false;
});
});

AND here is my html : 

<form action="test.php" id="send" method="POST" accept-charset="UTF-8" autocomplete="off">
 <table>
    <tr><td><input type="radio" name="val" value="1">1</td></tr>
    <tr><td><input type="radio" name="val" value="2">2</td></tr>
    <tr><td><input type="radio" name="val" value="3">3</td></tr>
    <tr><td><input type="submit"></td></tr><tr><td><div id='st'></div>/td></tr>         

</table>

test.php : 

if (isset($_POST['val'])) {
   $val = $_POST['val'];
   echo $val;
}

Upvotes: 1

Views: 151

Answers (3)

Rakesh Shetty
Rakesh Shetty

Reputation: 4578

Working Demo : JSFiddle - You can check console network it is sending the data.

You want to get the value of radio button which is checked so you can use $('input[name=val]:checked').val()

try like this :

    $(document).ready(function(){

       $('form').on('submit', function() {
      var that = $(this),
      url = that.attr('action'),
      type = that.attr('method') ,
      data  = {};

      //data[name] = $('input[name=val]:checked').val();

        $.ajax({
           url: url,
           type: type,
           data: 'val = '+$('input[name=val]:checked').val();, 
           success : function(rdata) {
              $("#st").html(rdata);
           }
       });

      return false;
   });
 });

You can then get the value on your test.php file like this :

if (isset($_POST['val'])) {
   $val = $_POST['val'];
   echo $val;
}

Upvotes: 1

RichardBernards
RichardBernards

Reputation: 3097

Try using the following snippet to get the selected radiobutton value Now you are iterating over all radiobuttons and sending the data for the value of the button (so always the last in the each() is send).

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

I have updated the answer with your code filled in:

$(document).ready(function(){

$('form').on('submit', function() {
    var that = $(this),
     url = that.attr('action'),
     type = that.attr('method') ,
     data  = {};

    data[name] = $('input[name=val]:checked').val();

        $.ajax({
        url: url,
        type: type,
        data: data, 
        success : function(rdata) {
              $("#st").html(rdata);
        }
    });

    return false;
});
});

Upvotes: 1

Gabor
Gabor

Reputation: 560

To simply correct the problem, you should change the following line as follows:

..    
that.find('[name]:checked').each(function(index, value){
..

What you were doing there, is iterating through all of the radio buttons, and always assigning the value to your variable, regardless the radio button's checked status. With the :checked modifier, you are telling it to only look at elements that are checked (and actually, the .each isn't quite necessary either in this case). You could modify it like this (as you will normally have only one radio checked), replace the .each iteration with following:

checkedRadio = that.find('[name]:checked');
name = checkedRadio.attr('name');
value = checkedRadio.val();

data[name] = value;

Upvotes: 1

Related Questions