Question

我有一个页面使用jQuery post提交表单并在同一页面的div标签内返回数据。然后表格仍然可访问，以便可以向用户询问多个问题，并从数据库中获取信息。

如果用户第一次尝试在不选择单选按钮的情况下提交表单，则会出现一个警告框，提示他们必须进行选择。但是在第一次通过用户之后可以提交表单而不做出选择。

单选按钮保持其设定值。关于如何使用这种格式的任何想法，并确保选择每个连续的表单提交单选按钮？

这是第一页test.php

    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <title>test jQuery post</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict ();

    jQuery(document).ready(function(){
      initializeForm();
      });

    function initializeForm() {
      jQuery("#university").validate({

          debug: false,
          submitHandler: function(form) {


          var validationTypes = jQuery("#validationTypes");
          var valid = false;


                        if (validationTypes.val()== 'radio')
                            {
                               for(i=0; i<university.radio.length; i++) if(university.radio[i].checked) {valid=true;}

                                if (valid == false)
                                      {
                                          alert ( "Please pick an answer before trying to Submit this form." );
                                          return false;
                                      }

                            }


              jQuery.post('post.php',
                  jQuery("#university").serialize(),
                  function(data) {
                      jQuery('#box').html(data);
                      initializeForm();

                  });

          }

      });
      }



    // ]]>
    </script>
    </head>
    <body>
    <div id="box"><? include('post.php') ?></div>
    </body>
    </html>

这是第二页post.php

<?

$radio = (isset($_POST['radio'])? $_POST['radio']: 0);
    switch ($radio)
        {
          default:
          echo 'pick a number<br /><br />';
          break;
          case '1':
          echo 'you pick one<br /><br />Pick Again<br /><br />';
          break;
          case '2':
          echo 'you pick two<br /><br />Pick Again<br /><br />';
          break;
          case '3':
          echo 'you pick three<br /><br />Pick Again<br /><br />';
          break;
        }
?>
<form action="" method="POST" id="university" name="university">
<input type="radio" name="radio" value="1" /> 1&nbsp;&nbsp;
<input type="radio" name="radio" value="2" /> 2&nbsp;&nbsp;
<input type="radio" name="radio" value="3" /> 3&nbsp;&nbsp;
<input type="hidden" name="validationTypes" id="validationTypes" value="radio">
<input type="submit" name="submit" value="submit" /></form>

Answer 1

我认为验证的事件处理程序（jQuery("#university").validate）仍然附加到您提交表单（jQuery('#box').html(data)）后刚刚替换的HTML。

所以在这种情况下，我可以考虑2个选项，我认为这些选项将解决您的问题：

简单的解决方案：将此部分javascript移到 post.php 页面中（因此每次加载表单时都会执行）：
```
jQuery(document).ready(function(){
  initializeForm();
});
```
高性能解决方案：将 post.php 页面中的HTML移至下方，关闭 test.php 页面中的"box" div。然后使用一些东西来清理像：
这样的值
```
$('input[name=radio]').val([]);
```

带有单选按钮检查验证的jQuery Post

1 个答案: