How to pass data from radio buttons using jquery/AJAX

Question

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.

You don't need jQuery for such a simple task. You could use XMLHttpRequest with FormData (pure Javascript). — AbsoluteBeginner
– AbsoluteBeginner, Commented Oct 11, 2020 at 14:19

Musa · Accepted Answer · 2020-10-11 15:45:32Z

2

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");
        }
    });
});

answered Oct 11, 2020 at 15:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SJacks · Accepted Answer · 2020-10-11 17:59:11Z

2

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/

edited Oct 11, 2020 at 17:59

answered Oct 11, 2020 at 13:42

SJacks

4384 silver badges20 bronze badges

1 Comment

Swati Over a year ago

Hi , why not simply write var myval = $("input[name=myradio]:checked").val() instead of checking each radio is checked ..?

Collectives™ on Stack Overflow

How to pass data from radio buttons using jquery/AJAX

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related