Question

首先，我是ajax和Java Script的新手。我花了几天时间来解决这个问题，但我还是没想到它。我已经阅读了类似问题的线程，但我仍然无法做到正确。所以这里;

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

我尝试了几件事，但我删除了代码，以便更容易看出问题所在： - ）

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属性将LABEL与每个标识相关联，从而通过使屏幕阅读器更容易并提供更大的点击目标来增加可访问性。）

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

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

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

Answer 2

首先：您对多个元素使用相同的ID。 ID-s应该是唯一的，您应该使用类名或其他方法来处理您的元素。而不是

$('#svar')

你应该使用

$('input[name=svar]')

引用该组复选框。

第二：这里有一个小错误：

$('#svar').attr('value');

是第一个单选按钮的value属性的值，而

$('input[name=svar]:checked').val();

会显示您使用input[name=svar]选择的群组中已选中的单选按钮的值。

编辑： thx @Quentin指出我的错误。

Answer 3

首先要知道的是id在html文档中应该是唯一的。

使ID类型属性特殊的原因是没有两个这样的属性属性可以具有相同的值;

[引自css2选择器docs]

你有三个单选按钮的相同ID。

现在，当您使用var svar = $('#svar').attr('value');时，只会选择第一个单选按钮。因此，无论选择单选按钮，只会获得第一个单选按钮值。

现在，如果要选择单选按钮，则必须使用jQuerys :checked selector。

使用ajax提交获取选中的值

3 个答案: