简体   繁体   中英

Multiple radio buttons ajax post

I'm new in web programming and I really need your help. I have a form with several radio buttons and I want to insert them into mysql through an ajax post. I can do it for a single button but for more than one I don't have idea how to do it.

This is a part of my html and jquery:

<html>
    <script>
        $(document).ready(function () {
            $("#submit").click(function () {
                var q1 = $('input[type="radio"]:checked').val();
                if ($('input[type="radio"]:checked').length == "0") {
                    alert("Select any value");
                } else {
                    $.ajax({
                        type: "POST",
                        url: "ajax-check.php",
                        data: "q1=" + q1,
                        success: function () {
                            $("#msg").addClass('bg');
                            $("#msg").html("value Entered");
                        }
                    });
                }
                return false;
            });
        });
    </script>
    </head>
    <body>
        <div id="msg"></div>
        <form method="post" action="">
            <div class="Clear">
                question1:bla bla bla
                <input class="star required" type="radio" name="q1" value="1" />
                <input class="star" type="radio" name="q1" value="2" />
                <input class="star" type="radio" name="q1" value="3" />
                <input class="star" type="radio" name="q1" value="4" />
                <input class="star" type="radio" name="q1" value="5" />
            </div>
            <br />
            <div class="Clear">
                question2:bla bla bla
                <input class="star required" type="radio" name="q2" value="1" />
                <input class="star" type="radio" name="q2" value="2" />
                <input class="star" type="radio" name="q2" value="3" />
                <input class="star" type="radio" name="q2" value="4" />
                <input class="star" type="radio" name="q2" value="5" />
            </div>
            <input type="submit" name="submit" id="submit" />
        </form>
    </body>
</html>

And here is how I insert the button in mysql:

<?php
$query = mysql_connect("localhost", "root", "");
mysql_select_db('db', $query);

if (isset($_POST['q1'])) {
    $choice1 = $_POST['q1'];
    $choice2 = $_POST['q2'];
    mysql_query("INSERT INTO tb VALUES('','$choice1')");
}
?>

I've tried to make a var for each button but dosen't worked. How could I post all values in php and what should I change into my ajax and php? Thanks!

This is how I did the .php

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db('cosmote',$query);
$q = array();
for ($i = 1; $i <= 2; $i++) {
  $q[$i] = isset($_POST['q'+$i]) ? mysql_real_escape_string($_POST['q'+$i]) : 0;
}
mysql_query("INSERT INTO tabel (q1,q2) VALUES ('$q[1]','$q[2]')");
?>

OK, here is how to do it. First, add an id to the form:

<form id="myform" method="post" action="">

This will make it easier to access via jQuery. Then, pass the serialized form as the POST data to your PHP script:

$(document).ready(function () {
    $("#submit").click(function () {                
        if ($('input[type="radio"]:checked').length == "0") {
            alert("Select any value");
        } else {
            $.ajax({
                type: "POST",
                url: "ajax-check.php",
                data: $("#myform").serialize(),
                success: function () {
                    $("#msg").addClass('bg');
                    $("#msg").html("value Entered");
                }
            });
        }
        return false;
    });
});

After that, you can get the radio button values from the $_POST array in your PHP script:

$_POST['q1'] // value of q1, can be 1-5
$_POST['q2'] // value of q1, can be 1-5

EDIT: The problem with your PHP code is that you used + instead of . for concatenating strings. Write this instead:

$q[$i] = isset($_POST['q'.$i]) ? mysql_real_escape_string($_POST['q'.$i]) : 0;

After this, I'm pretty sure it will work.

您可以在表单上使用.serialize() ,它会为您提供表单的值,就像您定期提交data: $('form').serialize(),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM