JQueryでformの内容を受け取る

テーブル形式で行ごとにsubmit

例えば下記のような形式で行単位でsubmitできるようにしたい場合、

こんな感じになるでしょうか。

html

<!-- 行数分繰り返し -->
<tr>
    <form>
        <td>
            <input type="hidden" name="key" value="001" />
            001
        </td>
        <td style="position: relative;"><!-- textboxをセルいっぱいにするstyle -->
            <input type="text" name="val" value="hoge" style="width: 100%; box-sizing: border-box" />
        </td>
        <td>
            <input type="button" value="更新" class="update" />
        </td>
    </form>
</tr>

行ごとにformをつくって、ボタンを押したらその行のデータを拾いたい、というときは・・・

form.serialize()

script側でform.serialize()でフォームデータを丸ごと受け取れます。

script

$(function(){
    $('.update').click(function(){
        var data = $(this.form).serialize();
        ...
    });
});

中身はkey=001&val=hogeという形になっており、そのままajaxのPOSTパラメータとして渡せます。

script

var d = $(this.form).serialize();
$.ajax({
    type: "post",
    url: "./hogehoge.php",
    data: d,
}).fail(function(){
    //...
}).done(function(data){
    //...
});

参考

ajaxの際に form.serialize で一括送信できる件