Question posted in
You can find the official documentation here.

Input type radio data value only shows one when trying to get all selected input – Jquery ajax

I’m trying to make a quiz for myself and I want the data values of the selected radio buttons and the data value of them. So I can send them to a php file as an array or object.

This is my code:

let frm = $('#form');

    $('input[value="finished"]').on('click', function (e) {
        e.preventDefault();

        console.log($('input[type=radio]:checked').data('value'));

        $.ajax({
            type: frm.attr('method'),
            url: "ajax/quiz.php",
            data: frm.serialize(),
            success: function (data) {

            },
        }).done(function (data) {

        });
    });

Does anyone know why it only shows one? Because I have been searching for a while and a lot of people recommend this option.

Can't get input radio selected value

I also tried this:
How to get the selected radio button’s value?

But it still shows me one data value.

Tags:

2

Answers


  1. 0

    You can do this in many ways. I show below two wrong ways and two correct ways:

    $(function() {
    let frm = $('#form');

    $('input[value="finished"]').on('click', function (e) {
        e.preventDefault();

        /*console.log($('input[type=radio]:checked').data('value'));

        $.ajax({
            type: frm.attr('method'),
            url: "ajax/quiz.php",
            data: frm.serialize(),
            success: function (data) {

            },
        }).done(function (data) {

        });*/
        let output = document.getElementById("output");
        let val = $('input[type=radio]:checked').val();
        let data = $('input[type=radio]:checked').data('value');
        let serialized = frm.serialize();
        let accumulated = [...document.querySelectorAll('input[type=radio]:checked')].map((item) => `${item.name}=${item.value}`).join("&");
        output.innerHTML += `<p>val(): ${val}</p>`;
        output.innerHTML += `<p>data('value'): ${data}</p>`;
        output.innerHTML += `<p>serialized: ${serialized}</p>`; //works
        output.innerHTML += `<p>accumulated: ${accumulated}</p>`; //works
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
    <input type="radio" name="question1" value="answer1_1">
    <input type="radio" name="question1" value="answer1_2">
    <input type="radio" name="question2" value="answer2_1">
    <input type="radio" name="question2" value="answer2_2">
    <input type="submit" value="finished">
</form>

<div id="output"></div>
    Login or Signup to reply.
  2. 0

    If you insist on saving the values inside dataset (<input data-value="" />) you can do it this way:

    const values = $('input[type=radio]:checked')
  .map(function() {
    return $(this).data('value')
  })
  .get();

    Now, values is an array of all data-value values in selected radio boxes.

    You can read more about jQuery‘s map here: https://api.jquery.com/map/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search