- ベストアンサー
Formのシリアライズができない
- JavascriptとJavaでショッピング画面を作っています。
- フォームの内容をシリアライズしようとしているがうまくできない。
- シリアライズされない状況が続いている。
- panasobi
- お礼率56% (41/73)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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"> <!-- // 登録画面表示 function doActionShoppingEntry(){ var space = ""; space += '<form id="fmShoppingDetail" name="fmShoppingDetail">' + '<input type="hidden" id="customerId" name="customerId" value="test" />' // + $('#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; } // 登録 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(); alert(data); // ← ********* 追加 ********** /* $('#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; } } doActionShoppingEntry(); //--> </script> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ＞３）console.log(document.getElementById("fmShoppingDetail")[1]); [0]ではなく[1]って… 同じidのフォームが2箇所以上存在するってことでしょうか？ まずは、同じidの要素が存在するってことが文法違反では？ あと、なんだか気になってきたのは、fmShoppingDetailって本当にform要素のidなんでしょうか？ element.serialize()のelementはformのjQueryオブジェクトを指定するはずなんですけれど。
- fujillin
- ベストアンサー率61% (1594/2576)
インプット要素にname属性を設定すればよいのでは？
お礼
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上には値が存在するが、シリアライズされていない」 ことを表しているのでしょうか。 何かヒントになることを教えて頂けないでしょうか。 よろしくおねがいします。
お礼
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>
補足
それと、ことによるとシリアライズできないのかと思い、通常のForm の送信（method="pose" action="/snoppingadd" 等を指定して）してみたのですが、 ウンともスンとも言ってくれず、動作しませんでした。 Javascriptで出力したFormは通常のHTML内のフォームと異なるのでしょうか？ また、それが原因でシリアライズできないのでしょうか？ よろしくおねがいします。