CODEWITHSUNDEEP
javascriptphpjqueryajax
user3501407
user3501407

Reputation: 457

How to send mulitple radio groups value from javascript

this is a add to cart system. now i can send quantity with id. but i want to send radio groups values also.. how do this here is my codes

product.php

<script>
jQuery(function ($) {

$('.popbutton').on('click', function () {
    var id = $(this).data('id');
    var qtyValue = $("input[type='text'][name='qty']").val();
    var radio = $("input[type='radio'][name='answer[]']").val();
    $.ajax({
        url: 'ajax.php',
        data: {
            id: id,
            quantityValue : qtyValue, 
            radioValue : radio
        },
        method: 'POST',
        success: function (html) {
            $('body').append(html);
            $(html).bPopup();
        },
        error: function (returnValue) {}
    });
});


});
</script>

my radio groups in product.php

Capacity:
<label><input type="radio" name="answer[1]" value="8"> 8 GB </label><br />
<label><input type="radio" name="answer[1]" value="4"> 4 GB </label><br />
Type:
<label><input type="radio" name="answer[2]" value="sony"> Sony </label><br />
<label><input type="radio" name="answer[2]" value="samsung"> Samsung </label>

<input id="qty" type="text" class="w30" name="qty" size="2" value="1" /><br />

<button id="button-cart" class="popbutton" data-id="40">Add to Cart</button>

ajax.php

$answers = $_POST['radioValue'];

foreach ($answers as $answer) {
    echo $answer;
//not work
}

Upvotes: 2

Views: 38

Answers (2)

roullie
roullie

Reputation: 2820

Enclose all your needed inputs inside a form

    <form id="yourForm" onsubmit="return false;">
        Capacity:
        <label><input type="radio" name="answer[1]" value="8"> 8 GB </label><br />
        <label><input type="radio" name="answer[1]" value="4"> 4 GB </label><br />
        Type:
        <label><input type="radio" name="answer[2]" value="sony"> Sony </label><br />
        <label><input type="radio" name="answer[2]" value="samsung"> Samsung </label>

        <input id="qty" type="text" class="w30" name="qty" size="2" value="1" /><br />

        <button id="button-cart" class="popbutton" data-id="40">Add to Cart</button>
    </form>

Then your javascript

    $('.popbutton').on('click', function () {
        var data = $('#yourForm').serialize();
        $.ajax({
            url: 'ajax.php',
            data: data,
            method: 'POST',
            success: function (html) {
                $('body').append(html);
                $(html).bPopup();
            },
            error: function (returnValue) {}
        });
    });

You can access your radio values on ajax.php by

    print_r($_POST['answer']);

Upvotes: 1

Kayis Rahman
Kayis Rahman

Reputation: 352

*var datastring = $("#contactForm").serialize();
        $.ajax({
            type: "POST",
            url: "your url.php",
            data: datastring,
            dataType: "json",
            success: function (data) {
                // do what ever you want with the server response
            },
            error: function () {
                alert('error handing here');
            }
        });*

Upvotes: 3

Related Questions