jQuery选择器有效，但不能通过$ post

Question

我有一个jquery脚本，它将所选单选按钮的值发送到另一个php脚本进行处理。 我怀疑选择器有问题，但是我使用了

$("input[name='act']:checked").val()

在Firebug控制台中，它返回了正确的值。

此外，我还使用了警报来显示所选值的弹出窗口，并使用以下命令返回了正确的值：

alert($("input[name='act']:checked").val());

当我创建要发布的“测试”字段时，代码看起来也很可靠，并且显示了正确的值。

谢谢你的帮助！

jQuery代码：

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      $("#driver").click(function(event){
        alert($("input[name='act']:checked").val());

                 $('#mainarea').hide('fast');
                 $('#mainarea').empty();

          $.post(
           "facultyoptions.php",
           {
                act: $("input[name='act']:checked").val(),
                test: 'test'
           },
            function(data) {
                $('#mainarea').empty();
                $('#mainarea').append(data);
                $('#mainarea').show('slow');
             }

          );
      });
   });



   </script>

HTML

<form id="facultyportal" name="facultyportal" method="post" action="facultyoptions.php">

<input type="radio" id="blank" name="act" value="blank"/>
</br>
<input type="radio" id="copy" name="act" value="copy" />
</br>
<input type="radio" id="temp" name="act" value="temp"/>
</br>

<input type="button" id="driver" class="btn btn-danger" value="Submit" />

</form>

facultyoptions.php

<?php

echo 'HI</br>';

echo $_POST['act'];

echo $_POST['test'];

?>

结果：

你好
测试

Answer 1

您需要在click处理程序的末尾return false ，或者在处理程序的开头使用event.preventDefault() 。

否则，您将进行常规提交以刷新页面。

所以

  $(document).ready(function() {
      $("#driver").click(function(event){
            //alert($("input[name='act']:checked").val());

            $('#mainarea').hide('fast');
            $('#mainarea').empty();

            $.post("facultyoptions.php",{
                  act: $("input[name='act']:checked").val(),
                  test: 'test'
                },function(data) {
                   $('#mainarea').empty();
                   $('#mainarea').append(data);
                   $('#mainarea').show('slow');
                });

            return false;
      });
   });

哦，并删除警报，因为这可能会干扰您停止正常提交的尝试。

---

更新完整性

在评论中进行讨论之后，我们通过.empty()调用确定了问题。

相关的input元素位于#mainarea元素内，因此在访问它之前已将其删除。

Answer 2

您不需要提交表格

因此，附加到Submit事件并使用preventDefault-空后无需附加

$(function() {
  $("#facultyportal").on("submit",function(event){
    event.preventDefault(); // stop submission
    var act = $("input[name='act']:checked").val();// save before emptying
    $('#mainarea').empty().hide('fast');
    $.post("facultyoptions.php",{act: act,test: 'test'},
      function(data) {
        $('#mainarea').html(data).show('slow');
    });
  });
});