3

フォーム送信時に、mysql テーブルの更新されたリストを含む div をロードしたいと考えています。フォーム変数を php に送信し、それらを mysql テーブルに投稿しています。同じページに完全なテーブル データが表示されます。フォームと同じ div タグにデータをロードしたい。そのため、フォームの上に情報が読み込まれているようです。

私のJavascript

$("#formSubmit").submit(function(){

    var name = $("input#name").val();
    var comment = $("input#comment").val();
    var filmnumber = $("input#hidden").val();

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber;

    $.ajax({
        type: "POST",
        url: "comment.php",
        data: dataString,
        success: function() {
            $('#2').load('comment.php');
        }
    });

私のフォーム -

<div id="2">                                    
    <p>Add a Comment</p>
    <form id="formSubmit" method="POST">
        <div>
            <input type="hidden" name="hidden" id="hidden" value="2">
            <label for="name">Your Name</label>
            <input type="text" name="name" id="name" />

            <label for="body">Comment Body</label>
            <textarea name="comment" id="comment" cols="20" rows="5"></textarea>

            <input type="submit" id="comment" class="button" value="Submit" />
    </form>
    </div>

それがしているのは、ページを更新することだけであり、情報をdiv 2にロードすることはありません:S

ご協力いただきありがとうございます

4

2 に答える 2

3

preventDefaultイベント オブジェクトのメソッドを使用して、フォームがページをリダイレクトしないようにする必要があります。

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function
    e.preventDefault(); // right here

    var name = $("input#name").val();
    var comment = $("input#comment").val();
    var filmnumber = $("input#hidden").val();

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber;

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: dataString,
      success: function() {
       $('#2').load('comment.php');
      }
    });
});
于 2012-05-02T17:54:07.417 に答える
1

最後に return false を追加して、フォームの送信を停止します。または、よりエレガントにしたい場合は、 preventDefault(); を使用してください。方法。個人的にはこれと同じくらい単純なものですが、私は return false; に固執します。

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function


var name = $("input#name").val();
var comment = $("input#comment").val();
var filmnumber = $("input#hidden").val();

var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber;

$.ajax({
  type: "POST",
  url: "comment.php",
  data: dataString,
  success: function() {
   $('#2').load('comment.php');
  }
});
return false;//right here

});

于 2012-05-02T17:54:22.593 に答える