Jquery .loadとPOSTデータ

Question

これは本当に私はこれにいくつかの助けに感謝したいと思います。私はそのdivの中にコメントとフォームと呼ばれるdivを持っています。私がしたいことは、現在のページにフォームを投稿し、全体をリロードせずにdivの内部にロードすることです。私の現在のコードは次のとおりです：

<div id="comments"> 
<form action="#" method="post" onsubmit="return false;" > 
<input type="hidden" name="txtname" value="test"> 
<textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"></textarea> 
<input type="submit" name="post" id="post" value="Submit"> 
</form> 
<script type="text/javascript"> 
EDIT: Read edit below for current code 
</script>   
</div> 

私が提出すると、警告が発せられますが、ページは読み込まれません。これは、データのポストを好きではないです

$("#comments").load("comments.asp"); 

次のように私はイベントを行う場合は正常に動作します。以前は.loadを使用しましたが、データを投稿することはありません。私はこれらの全く同じフォーラムから上記のコードを入手しました。

私は 'name'と 'tel'の目的について正直にはわかりません - コードを処理する際に、これらの変数またはフォーム変数名を参照していますか？これはASPの古典です。

上記のコードに問題がありますが、POST経由でフォーラムからデータを送信するにはどうすればよいですか？ありがとう！

編集：私は今、次のコードを使用しています ：

$("#post").submit(function(event){ 
    var $form = $(this), 
     $inputs = $form.find("input, select, button, textarea"), 
     serializedData = $form.serialize(); 
    $inputs.attr("disabled", "disabled"); 

    $.ajax({ 
     url: "/comments.asp", 
     type: "post", 
     data: serializedData, 
     success: function(response, textStatus, jqXHR){ 
      console.log("comment posted"); 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      console.log(

       textStatus, errorThrown 
      ); 
     }, 
     complete: function(){ 
      // enable the inputs 
      $inputs.removeAttr("disabled"); 
     } 
    }); 

    event.preventDefault(); 
}); 

そして今、それは適切に処理フォームを取得して使用していますが...しかし、それはcomments.aspに進みます。特定のdivですべてのアクションを実行させるにはどうすればいいですか（コメントdiv？）

Answer 1

あなたが完全にコヒーレントでない方法で、異なる技術の束をブレンドしている私には思えます。

$ .ajax（see here）の短縮版です。

$ .loadはURLをとり、<div>または他のDOM要素（see here）に貼り付けます。

私が正しく理解していれば、実際にはフォームをロードしたくなくても、フォームフィールドに値を入れたいと思っています。 $ .loadはこれを行うには奇妙な方法です。

$（＃...）。submitを使用している場合は、フォームにたくさんのものを残すこともできます。以下はうまくいくはずです。

<form id="form_id"> 
... 
<input type="submit" value="Submit"> 
</form> 

私の方法である：（1）ハードコードされたHTMLフォームを持っている（またはAJAXでそれを構築する）（2）$ .post（または$アヤックス）を使用してDBから値を取得する（あるいはどこ）、 、（3）.val（）（または同等のもの - 入力タイプに適しているもの）とその入力のDOM idを使用してフォームに値をスティックし、（4）あなたのものと同様の方法で）。他の人が示唆しているようにpreventDefaultを追加する必要があります。

また、DOM IDとして#postを使用して水を混乱させています。フォーム自体にIDを与えてから、$（＃form_id）.submit（...私は今テストすることはできませんが、入力フィールドにsubmitがあると、悲しみの原因になることがあります）official exampleは、フォームIDに送信してください

私はまた、 'comments'というIDを持つ<div>が実際には大したことを確認していません。あなたの「コメント」のようなコンテナIDを持っていますが、それはAJAXによってフォームを構築して

Answer 2

フォームが送信してページをリセットするように、ボタンのクリックをキャンセルしていません。

$("#post").click(function(evt) { 
    evt.preventDefault(); 
    ... 

jQuery event.preventDefault()

負荷（）メソッドは、getとないポストを行います。

Answer 3

テキストボックスの要素のIDが値txtnameではありません。しかし、あなたのスクリプトでは、#（これはidコンテキストが想定されています）を使ってアクセスしようとしています。だからあなたの入力ボックスにid要素を追加してください。

<input type="hidden" name="txtname" id="txtname" value="test"> 

expascarelloによると、送信ボタンのデフォルトの動作を停止する必要があります。あなたがアヤックス効果を感じることができないように他の賢明なそれは通常のフォームの投稿を行います。 使用preventDefault

$(function(){ 
    $("#post").click(function(e) { 
    e.preventDefault() 
    alert("clicked"); 
     $("#comments").load("comments.asp", { 
     'name': $("#wysiwyg").val(), 
     'tel': $("#txtname").val() 
     }); 
    }); 
});