2

ページをリロードせずにフォームを送信しようとしています。最初は機能しますが、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>

これが私の2番目のページ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 スクリプトはそのフォームを別のフォームに置き換えているため、検証がバインドされているフォームは存在しません。イベントをバインドしているときは、ライブ バインドのようなものを使用してこれを回避できます。ただし、おそらく検証プラグインでは使用できません。あなたが本当にすべきことは、別の要素への応答を書くことです。

したがって、次のようなものです。

<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 に答える