Formのシリアライズができない

解決済

質問者：panasobi
質問日時：2012/11/08 16:15
回答数：3件

新米プログラマーです。
JavascriptとJavaでショッピング画面を作っています。

以下のコードで　function doActionShoppingEntry(){ で登録用のフォームを表示して、
function doActionShoppingAdd(){　Ajax通信で登録処理を行っています。

var data = $('#fmShoppingDetail').serialize();　でフォームの内容をシリアライズしようと
しているのですが、うまくシリアライズされず data は空っぽのままです。

読み込む順番とか、スコープの問題かな、とも思ったんですけど、
var data_shoppingDate = $('#shoppingDate').val();　や
var data_hinme = $('#hinmei').val();
は認識されて、空欄チェックをちゃんとしてくれます。

いろいろやってみたのですが、シリアライズされない状況が続いています。

どなたかヒントを頂くなりお願いできますでしょうか。

よろしくお願いします。

// ■お買物登録
// 登録画面表示
function doActionShoppingEntry(){
var space = "";
space += '<form id="fmShoppingDetail">'
+ '<tr>'
+'<th>購入日</th>'
+'<td><input type="text" id="shoppingDate" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>場所</th>'
+ '<td><input type="text" id="place" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>品名</th>'
+ '<td><input type="text" id="hinmei" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>金額</th>'
+ '<td><input type="text" id="kingaku" /></td>'
+ '</tr>'

+ '<input type="button" onclick="doActionShoppingAdd();" value="登録" />'
+ '<input type="hidden" id="customerId" value="' + $('#customerId') + '" />'
+ '</form>';

var obj = document.getElementById("datatableShoppingAdd");
obj.innerHTML = space;

// お買上日
$(function(){
$('#shoppingDate').datepicker();
$("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd");
} );

}

// 登録
function doActionShoppingAdd(){
// 必須項目の入力チェック
var data_shoppingDate = $('#shoppingDate').val();
if(data_shoppingDate == ""){
window.alert('購入日は空白では登録できません。');
return false;
}else{
var data_hinme = $('#hinmei').val();
if(data_hinme == ""){
window.alert('品名は空白では登録できません。');
return false;
}
}

if(window.confirm("登録していいですか？")){
var data = $('#fmShoppingDetail').serialize();　　　　　　　　　　　　　　　　←ここです。
$('#gon').text("登録内容は" + data); //gon内のテキストに表示
console.log("data[0]==========" + data[0]);

$.post('/shoppingadd',data,function(resp, status, XHR){
if(status == "success"){
$('div#status').text("登録しました。");
}
});
}else{
return false;
}
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2012/11/09 17:46

ANo2です。

ご質問文から、datepickerやajaxの部分を除いて試してみましたが、こちらの環境ではシリアライズできています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

</head>
<body>

<div id="datatableShoppingAdd"></div>

<script type="text/javascript">

</script>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2012/11/09 10:48

ANo1です。

＞３）console.log(document.getElementById("fmShoppingDetail")[1]);
[0]ではなく[1]って…
同じidのフォームが2箇所以上存在するってことでしょうか？
まずは、同じidの要素が存在するってことが文法違反では？

あと、なんだか気になってきたのは、fmShoppingDetailって本当にform要素のidなんでしょうか？
element.serialize()のelementはformのjQueryオブジェクトを指定するはずなんですけれど。

この回答への補足

それと、ことによるとシリアライズできないのかと思い、通常のForm
の送信（method="pose" action="/snoppingadd" 等を指定して）してみたのですが、
ウンともスンとも言ってくれず、動作しませんでした。

Javascriptで出力したFormは通常のHTML内のフォームと異なるのでしょうか？

また、それが原因でシリアライズできないのでしょうか？

よろしくおねがいします。

補足日時：2012/11/09 12:17

通報する

- 0
- 件

通報する

この回答へのお礼

fujillinさん、回答ありがとうございました。

console.log(document.getElementById("fmShoppingDetail")[1]);
については
"fmShoppingDetail"が構成する２つ目のinput要素と理解していました。
ですので、ここには「購入日」に関する情報が入ってくると思っていました。

よくわかっていないようです。

「element.serialize()のelementはformのjQueryオブジェクトを指定するはず」
の意味がよくわかりませんでした。

わかりにくいと思い、script部分をすべてコピペしようと思ったら４千文字
超えてしまったので、今回の「お買物登録」部分のすべてだけを再度下に示します。

すべてのformを載せることができませんが、再度確認しましたが、FormのIDが重複
しているものはありませんでした。

よろしくお願いします。

// ■お買物登録
// 登録画面表示
function doActionShoppingEntry(){
var space = "";
space += '<form id="fmShoppingDetail" name="fmShoppingDetail">'
+ '<input type="hidden" id="customerId" name="customerId" value="' + $('#customerId') + '" />'
+ '<tr>'
+'<th>購入日</th>'
+'<td><input type="text" id="shoppingDate" name="shoppingDate" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>場所</th>'
+ '<td><input type="text" id="place" name="place" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>品名</th>'
+ '<td><input type="text" id="hinmei" name="hinmei"/></td>'
+ '</tr>'
+ '<tr>'
+ '<th>金額</th>'
+ '<td><input type="text" id="kingaku" name="kingaku" /></td>'
+ '</tr>'

+ '<input type="button" onclick="doActionShoppingAdd();" value="登録" />'
+ '</form>';

var obj = document.getElementById("datatableShoppingAdd");
obj.innerHTML = space;

// お買物登録を表示
$('#datatableShoppingList').hide();
$('#datatableShoppingDetail').hide();
$('#datatableShoppingAdd').show();

// お買上日
$(function(){
$('#shoppingDate').datepicker();
$("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd");
} );

}

// 登録
function doActionShoppingAdd(){

// 必須項目の入力チェック
var data_shoppingDate = $('#shoppingDate').val();
if(data_shoppingDate == ""){
window.alert('購入日は空白では登録できません。');
return false;
}else{
var data_hinmei = $('#hinmei').val();
if(data_hinmei == ""){
window.alert('品名は空白では登録できません。');
return false;
}
}

if(window.confirm("登録していいですか？")){

var data = $('#fmShoppingDetail').serialize();
$('#gon').text("登録内容は" + data); //.ser内のテキストに表示
console.log("data=================" + data);

console.log("$('#shoppingDate').val()=====" + $('#shoppingDate').val());
console.log("$('#hinmei').val()=====" + $('#hinmei').val());

console.log("document.getElementById('fmShoppingDetail')[0]=====" + document.getElementById("fmShoppingDetail")[0]);
console.log("data[0]==========" + data[0]);
console.log("data[1]==========" + data[1]);

$.post('/shoppingadd',data,function(resp, status, XHR){
console.log("resp==========" + resp);
console.log("status==========" + status);
console.log("XHR==========" + XHR);

if(status == "success"){
$('div#status').text("登録しました。");
}
});

}else{
return false;
}

}

-->
</script>

通報する

お礼日時：2012/11/09 12:00

No.1

回答者： fujillin
回答日時：2012/11/08 20:09

インプット要素にname属性を設定すればよいのでは？

- 0
- 件

通報する

この回答へのお礼

fujillinさん、回答ありがとうございました。

教えて頂いた通りFormの中のすべてのinput要素にname属性を設定して
みました。値はid属性と同じものを設定しました。

残念なことに、それでもシリアライズされず data は空っぽのままです。

いくつか調べたことをご報告します。

１）console.log( $('#shoppingDate').val());
２）console.log( $('#hinmei').val());
３）console.log(document.getElementById("fmShoppingDetail")[1]);
４）console.log("data[0]==========" + data[0]);

１）と２）はちゃんと値がセットされますが、３）と４）は　undefined　と
なって帰ってきます。
「Form上には値が存在するが、シリアライズされていない」
ことを表しているのでしょうか。

何かヒントになることを教えて頂けないでしょうか。

よろしくおねがいします。