javascript - 使用ajax提交获取检查值

Question

首先，我是 ajax 和 Java 脚本的新手。我花了几天时间解决这个问题，但我仍然没有弄清楚。我已经阅读了具有类似问题的线程，但我仍然无法正确理解。所以就这样；

非常简单，我想发布三个单选按钮之一的选中值。我得到的只是第一个单选按钮的值..

我已经尝试了几件事，但我精简了代码，这样可能更容易看出问题出在哪里:-)

ajax

<script type"text="" javascript"="">
$(document).ready(function(){
    $("form#submit").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var svar     = $('#svar').attr('value');
    var date     = $('#date').attr('value');
    var email     = $('#email').attr('value');

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: "svar="+ svar + "&email=" + email + "&date=" + date,
            success: function(){
                $('form#submit').hide();
                //$('form#submit :input').val("");
                $('div.success').fadeIn();
            }
        });
    return false;
    });
});
</script>

表格

<form id="submit" method="post" name="submit" action="">
            <fieldset>
            <legend>Dagens spørgsmål: <? echo $row['question'];?></legend>
                <br>
                <input type="radio" name="svar" id="svar" value="1"><? echo $row['opt1'];?>
                <br>
                <input type="radio" name="svar" id="svar" value="2"><? echo $row['opt2'];?>
                <br>
                <input type="radio" name="svar" id="svar" value="3"><? echo $row['opt3'];?>
                <br>
                    <input name="email" id="email" type="hidden" value="<? echo $email  ?>" />
                    <input name="date" id="date" type="hidden" value="<? echo $date  ?>" />

                <br><br>
                <button type="submit" class="button positive"> <img src="img/tick.png" alt=""> Svar på dagens spørgsmål </button>
            </fieldset>
        </form>

Ajax.php

<?php

    include ("dbc.php");

// CLIENT INFORMATION
    $email        = htmlspecialchars(trim($_POST['email']));
    $date        = htmlspecialchars(trim($_POST['date']));
    $svar        = htmlspecialchars(trim($_POST['svar']));



//stuff from answers

        mysql_query("INSERT INTO answers
        (`email`,`day`,`answer`)
        VALUES
        ('$email','$date','$svar')") or die(mysql_error());

?>

希望你们中的聪明人能找到解决方案..因为这件事让我发疯

Answer 1

您有几个问题。

首先，您的 HTML 是 invalid 。 ID 必须唯一，因此每个单选按钮都必须有自己的 ID。您可以通过为一组单选按钮指定相同的名称来将它们关联起来。 (拥有唯一的 ID 后，您可以使用 FOR 属性将标签与每个标签关联起来，从而使屏幕阅读器更容易阅读并提供更大的点击目标，从而提高可访问性)。

其次，单选按钮的值是固定的。问题是“成功与否？”这是通过查看是否被检查来确定的。如果您手动执行此操作，则必须循环组中的每个单选按钮，直到找到一个已选中的单选按钮(或使用仅与选中的比率按钮匹配的选择器(:检查))。

第三，您通过将字符串混合在一起来构建表单数据，而不确保数据是 URL 安全的(使用 encodeURIComponent )。

解决方案是忘记手动执行所有这些操作，只需使用 jQuery serialize表单上的方法。