2

我正在尝试在不重新加载页面的情况下提交表单。它第一次工作，但是当我尝试进行第二次提交时，页面会刷新。

我希望能够使用传播到当前元素的新数据进行多次提交。我错过了什么。

这是我的第一页 form.php

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <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 () {
        jQuery("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                });
            }
        });
    });
    // ]]>
</script>

  </head>
  <body>
    <div id="Box">
      <form id="form" name="form" method="POST" action="">
        <select name="color">
          <option>red</option>
          <option>white</option>
          <option>blue</option>
        </select>
        <input type="submit" name="submit" value="submit" /><br />
      </form>
    </div>
  </body>
</html>

这是我的第二页 formPost.php

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>
<form id="form" name="form" method="POST" action="">
  <select name="color">
    <option>red</option>
    <option>white</option>
    <option>blue</option>
  </select>
  <input type="submit" name="submit" value="submit" /><br />
</form>

我希望能够为多个表单提交重用同一个表单，同时保持在同一个页面上并且让数据出现在同一个 div 中而不刷新页面。有任何想法吗

4

2 回答 2

1

试试这个：

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <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("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                    initializeForm();
                });
            }

        });
    }

    // ]]>
</script>

  </head>
  <body>
    <div id="Box">
      <form id="form" name="form" method="POST" action="">
        <select name="color">
          <option>red</option>
          <option>white</option>
          <option>blue</option>
        </select>
        <input type="submit" name="submit" value="submit" /><br />
      </form>
    </div>
  </body>
</html>

我对此进行了测试，它在本地对我有用。我希望这有帮助！

于 2011-09-12T03:31:46.617 回答
0

您验证操作是否绑定到文档准备就绪时存在的表单（因为它在 document.ready 中）。但是，您的 PHP 脚本正在用不同的表单替换该表单，因此验证绑定到的表单不再存在。当您绑定事件时，您可以使用诸如实时绑定之类的东西来解决这个问题。不过，您可能无法将其与 validate 插件一起使用。你真正应该做的是写你对不同元素的回应。

所以，像这样：

<html>
  <head>
    <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(){
      jQuery("#form").validate({
        debug: false,
        submitHandler: function(form) {
        jQuery.post('formPost.php', 
                     jQuery("#form").serialize(), 
                     function(data) {
                       jQuery('#result').html(data); // Note that this modifies #result instead of #Box.
                     });
        }
      });
    });
    // ]]>
  </script>
</head>
<body>
  <div id="Box">
    <form id="form" name="form" method="POST" action="">
      <select name="color">
        <option>red</option>
        <option>white</option>
        <option>blue</option>
      </select>
      <input type="submit" name="submit" value="submit" /><br />
    </form>
  </div>
  <div id="result" /> <!-- Here is where we put out result. -->
</body>
</html>

然后就

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>
于 2011-09-12T05:15:29.347 回答