web-dev-qa-db-ja.com

AJAXおよびjQueryを使用してフォームを送信します

これは、数行以上のコードを必要とせずにjQueryに組み込まれるものであるように思えますが、「単純な」ソリューションは見つかりません。たとえば、HTMLフォームがあるとします。

<form method="get" action="page.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

誰かが選択フィールドを変更したら、ajaxを使用してフォームを送信し、データベースを更新したいと思います。私は、値/属性を手動で作成せずに、次のようにすべてを送信する方法があると考えました：

$("select").change(function(){
    $.get("page.html?" + serializeForm());
});

私は何が欠けていますか？

jqueryajaxserialization
58
Chris Bartow

これが最終的に機能したものです。

$("select").change(function(){
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});
14
Chris Bartow

最初にフォームにid属性を指定してから、次のようなコードを使用します。

$(document).ready( function() {
  var form = $('#my_awesome_form');

  form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );

} );

したがって、このコードは.serialize()を使用して、フォームから関連データを引き出します。また、重要な選択がフォームの最初の選択であると想定しています。

将来の参照のために、jQuery docs は非常に優れています。

145
rfunduk

Nice form plugin があり、HTMLフォームを非同期で送信できます。

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

または

$("select").change(function(){
    $('#myForm1').ajaxSubmit();
});

すぐにフォームを送信する

30
Darin Dimitrov