CODEWITHSUNDEEP
phpjqueryajax
Marco Vanzetto
Marco Vanzetto

Reputation: 33

How to pass data from radio buttons using jquery/AJAX

I have this form with two radio buttons that select '1' or '0'.

<form id="f13form">
    <p class="info"><?php echo $row["fortress_13"]; ?></p>
    <span class="is-size-7 tag is-link"> 13:00 UTC</span>
    <label class="radio"><input type="radio" name="for13" value="1"/> Yes</label>
    <label class="radio"><input type="radio" name="for13" value="0"/> No</label>
</form>

and then the AJAX function to pass data to php file and then update a MySQL table

$('#f13form input').on('change', function(e) {
    e.preventDefault();
    $.ajax({
    type: "POST",
    url: "update_events_week.php",
    data: $('#f13form input').serialize(),
    cache: false,
    contentType: false,
    processData: false,
    success:  function(){
        alert("Updated");
        }
    });
});

I found how to select the right form I want to handle (there are more in the page) but I'm confused about how to get the '1' or '0' from the form and send to php file.

Upvotes: 3

Views: 2332

Answers (2)

SJacks
SJacks

Reputation: 438

HTML

 <input type='radio' name='myradio' class='myradio' value='Yes'>
 <input type='radio' name='myradio' class='myradio' value='No'>

JQUERY

 $(document).on('change','.myradio',function() { // Listen for change on radio CSS class

 var myval = $("input[name=myradio]:checked").val();
 console.log(myval); // Checking we have the radio data, let's submit via AJAX

 $.ajax({
 url:"myserverfile.php", // Your PHP file name
 method:"POST",
 data:{myval:myval}, // The JS variable with the radio button data
 dataType:"text",
 success:function() {
 // Do something else here?
 }
 });

 });

https://jsfiddle.net/vp1r9xug/

Upvotes: 2

Musa
Musa

Reputation: 97717

Your ajax request has no content-type set, so your PHP script will not know how to interpret the data. Remove contentType: false, so that the content type will be set, also remove processData: false,.
Preventing the default action of the radio button change event may not be desirable either.

$('#f13form input').on('change', function(e) {
    //e.preventDefault();
    $.ajax({
    type: "POST",
    url: "update_events_week.php",
    data: $('#f13form input').serialize(),
    cache: false,
    //contentType: false,
    //processData: false,
    success:  function(){
        alert("Updated");
        }
    });
});

Upvotes: 2

Related Questions