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 で一括送信できる件