Send checked radio inputs to PHP using Ajax

Question

I have some radio inputs these are not required to be checked. So I want to send only the checked ones.

Here is HTML:

<form>
    <h4>Q1:</h4>
    <label>answer1</label>
    <input type="radio" name="q1" value="answer1" data-id="1" class="answer">
    <label>answer2</label>
    <input type="radio" name="q1" value="answer2" data-id="2" class="answer">
    <label>answer3</label>
    <input type="radio" name="q1" value="answer3" data-id="3" class="answer">

    <h4>Q2:</h4>
    <label>answer1</label>
    <input type="radio" name="q2" value="answer1" data-id="4" class="answer">
    <label>answer2</label>
    <input type="radio" name="q2" value="answer2" data-id="5" class="answer">
    <label>answer3</label>
    <input type="radio" name="q2" value="answer3" data-id="6" class="answer">
  
    <!-- Submit -->  
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

jQuery:

//On form submit
$("form").submit(function(event){

    //Prevent page submit
    event.preventDefault();

    //Loop through checked inputs
    $('.answer:checked').each(function() {
        console.log($(this).val());
        console.log($(this).data('id'));
    });//Each

    //Ajax
    $.ajax({});

});//Submit

Here is a fiddle for the code: https://jsfiddle.net/tgp7rfhm/2/

So I want to send the checked inputs values with the data-id attribute.

I know about $('form').serialize();, But it won't include the data attributes.

So how to send the inputs values with data-id for checked inputs only?

What exactly do you want to send? Value or attribute or both perhaps? All the radios shown seem to have that attribute so it's not really clear what the issue is — charlietfl
– charlietfl, Commented Jul 18, 2021 at 21:56
I want to send both, So for example if user checks answer1, I get answer1 + 1 — user_m
– user_m, Commented Jul 18, 2021 at 21:58

Triet Doan · Accepted Answer · 2021-07-18 22:00:13Z

2

You're almost there. Just build a data object in the structure you like and send it to the server using $.post. Your code might look like below:

//On form submit
$("form").submit(function(event) {

  //Prevent page submit
  event.preventDefault();

  // Radio button submission data
  let data = []

  //Loop through checked inputs
  $('.answer:checked').each(function() {
    data.push({
      'name': $(this).val(),
      'value': $(this).data('id')
    })
  }); //Each

  //Ajax
  $.post(url, data).done(response => {
    console.log(response);
  });

}); //Submit

The data submitted to the server will have this format:

[
  {
    'name': 'answer1',
    'value': 1
  },
  {
    'name': 'answer2',
    'value': 2
  }
]

edited Jul 18, 2021 at 22:00

answered Jul 18, 2021 at 21:58

Triet Doan

12.2k9 gold badges42 silver badges76 bronze badges

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

2 Comments

user_m Over a year ago

So the post data would be json object?

Triet Doan Over a year ago

Yes, basically, $.post is just a shorthand way of using $.ajax (see here).

charlietfl · Accepted Answer · 2021-07-18 22:10:28Z

1

You can use map() to create array of objects with whatever properties you want then send that array

In php you would access the array from $_POST('answers')

//On form submit
$("form").submit(function(event){

    //Prevent page submit
    event.preventDefault();
    
    const answers = $('.answer:checked').map(function(){
        return {id: $(this).data('id'), value: this.value}
    }).get()

    console.log(answers)

    const postData = {answers};
    
   // $.post(url, postData , callback)

});//S

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <h4>Q1:</h4>
  <label>answer1</label>
  <input type="radio" name="q1" value="answer1" data-id="1" class="answer">
  <label>answer2</label>
  <input type="radio" name="q1" value="answer2" data-id="2" class="answer">
  <label>answer3</label>
  <input type="radio" name="q1" value="answer3" data-id="3" class="answer">

  <h4>Q2:</h4>
  <label>answer1</label>
  <input type="radio" name="q2" value="answer1" data-id="4" class="answer">
  <label>answer2</label>
  <input type="radio" name="q2" value="answer2" data-id="5" class="answer">
  <label>answer3</label>
  <input type="radio" name="q2" value="answer3" data-id="6" class="answer" checked>
  
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

edited Jul 18, 2021 at 22:10

answered Jul 18, 2021 at 22:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

4 Comments

user_m Over a year ago

How to access the posted data from PHP? Or what type of data would it be? As I'm getting errors trying to parse the post data

charlietfl Over a year ago

"getting errors" is fairly meaningless without identifying the specific error and the code that generates the error

user_m Over a year ago

I had dataType: "json" in ajax request which cause errors. Both answers working fine. Thanks!

charlietfl Over a year ago

That tells $.ajax to expect json response from the php

Collectives™ on Stack Overflow

Send checked radio inputs to PHP using Ajax

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related