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?

Answer 1

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
  }
]

Answer 2

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>