jQuery AJAXが複数回PHPスクリプトに投稿投稿

私はページの再読み込みをせずにフォームの提出をしようとしています。これは初めてのことですが、2回目の提出を試みるとページが更新されます。jQuery AJAXが複数回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>

とform.php私の最初のページは私の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にデータを格納することができます。

出典

2011-09-12 simian

任意のアイデアはこれを試してみてください：

<!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-12 03:31:46

しかし、フォームが各回答に変更されます。私のライブ版では、赤を選択すると、formPost.phpページに新しい書式が表示されます。これは約10の書式の質問が続きます。何か案は？ – simian

ええと...私は新しいフォームの重要性を認識していませんでした。新しいフォームがHTMLに組み込まれた後にAJAXフォームを再初期化する必要があるため、JavaScript関数の一部を再利用可能にするためにJavaScript関数の一部を分離しました。 –

これで、jQueryの投稿を行い、新しい情報をメインのdivに伝播し続けることができますか？私のformPost.phpページでは、前のフォームからの選択に基づいてフォームの変更を行います。 – simian

アクションの検証は、ドキュメントの準備ができているときに存在するフォームにバインドされています（document.ready内にあるため）。しかし、あなたのPHPスクリプトはそのフォームを別のフォームに置き換えているので、検証するフォームはもはや存在しなくなります。イベントを束縛しているときは、live bindingのようなものを使ってこの問題を回避することができます。あなたはおそらくそれを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-12 05:15:29

私は結果を次のフォームを伝播する必要があります。私は約10の質問に行きたいと答えて、それぞれのformPost.phpはコメントと新しいフォームを返します。何か案は？ – simian

jQuery AJAXが複数回PHPスクリプトに投稿投稿

答えて

関連する問題