formの値は取れてるのにserializeしたら空だ!っていう問題が発生。
解決法が探してもなかなか見つからなかった、というか明記されているところがなかったのでメモ(それ以前の常識か?)
form.html
<form id=regform>
<div><input type="text" placeholder="---ID---" id="id" ></div>
<div><input type="text" placeholder="---Name---" id="name" ></div>
<select id="sex">
<option>Male</option>
<option>Female</option>
</select>
<div><input type="text" placeholder="---Address---" id="address" ></div>
</form>
このformの中身をserializeしてajaxに放り込んでWebサービスを叩きたい
:form.js
var params = $('form').serialize();
$.ajax({
type: "GET",
url: $.APIendpoint + "registerContext",
data: params,
complete: function(status){
console.log("ho");
}
});
この結果はparamsの中身は空の文字列であり、もちろんエラーを吐かれた。
var params = $('form').serialize();
を
var params = $('#regform').serialize();
とかしても駄目。
serializeにはformの各要素にname
を与えてやらなければならない。
つまりこう書き換える
form.html
<form id=regform>
<div><input type="text" placeholder="ID" id="id" name="id" ></div>
<div><input type="text" placeholder="Name" id="name" name="name" ></div>
<select id="sex" name="sex">
<option>Male</option>
<option>Female</option>
</select>
<div><input type="text" placeholder="Address" id="address" name="address" ></div>
</form>
これでserializeすると
id=&name=&sex=Male&address=
の形で繋ぐことが出来る。
serializeのやってくれることをよくよく考えたらまあ当たり前だよねという感じですが、引っかかったので。
serializeにはidではなくnameが必須とは書いてないけどしれっとソースには見たらnameが書いてあるんですね。