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

前へ 次へ
このQ&Aのポイント
  • JavascriptとJavaでショッピング画面を作っています。
  • フォームの内容をシリアライズしようとしているがうまくできない。
  • シリアライズされない状況が続いている。
回答を見る
  • ベストアンサー

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

新米プログラマーです。 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; } }

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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)
回答No.2

ANo1です。 ＞３）console.log(document.getElementById("fmShoppingDetail")[1]); [0]ではなく[1]って… 同じidのフォームが2箇所以上存在するってことでしょうか？ まずは、同じidの要素が存在するってことが文法違反では？ あと、なんだか気になってきたのは、fmShoppingDetailって本当にform要素のidなんでしょうか？ element.serialize()のelementはformのjQueryオブジェクトを指定するはずなんですけれど。

panasobi
質問者

お礼

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>

panasobi
質問者

補足

それと、ことによるとシリアライズできないのかと思い、通常のForm の送信（method="pose" action="/snoppingadd" 等を指定して）してみたのですが、 ウンともスンとも言ってくれず、動作しませんでした。 Javascriptで出力したFormは通常のHTML内のフォームと異なるのでしょうか？ また、それが原因でシリアライズできないのでしょうか？ よろしくおねがいします。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

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

panasobi
質問者

お礼

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上には値が存在するが、シリアライズされていない」 ことを表しているのでしょうか。 何かヒントになることを教えて頂けないでしょうか。 よろしくおねがいします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • form id、nameの番号振りなおし

    jqueryとphpにてフォームを作成しています。 フォームの追加、削除できるシステムを作っており、 フォームの追加はできたので、削除した際のinputのnameやidの番号を振り直しができず困っています。 商品1<br> <a href="javascript:void(0);" class="del" id="del_1">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][1][sir]" value="<?php echo $item[data][1][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][1][name]" value="<?php echo $item[data][1][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][1][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> <a href="javascript:void(0);" id="add">フォームの追加</a> としており、 「フォームの追加」をクリックすると 商品2<br> <a href="javascript:void(0);" class="del" id="del_2">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][2][sir]" value="<?php echo $item[data][2][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][2][name]" value="<?php echo $item[data][2][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][2][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> 商品3<br> <a href="javascript:void(0);" class="del" id="del_3">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][3][sir]" value="<?php echo $item[data][3][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][3][name]" value="<?php echo $item[data][3][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][2][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> ができるようにPHPにてSESSION管理をおこなっています。 追加はできたのですが、 上記のフォーム4つほど出した後に商品2を削除した場合の商品1、商品3、商品4の各nameの番号（item[data][＊][sir]、item[data][＊][name]、item[data][＊][num]の＊部分） 振りなおしができず困っています。 いくらやってもできないため、どなたかソースを教えていただけないでしょうか。 宜しくお願いいたします。

  • 「INSERT INTO」文はどこに書かれている構

    私のパソコンにはXAMPPを構築して、MySQLが出来る環境か 定かではございません！？ 　ある教本でPHPを勉強中です。 　教本の項目で 　「クリスマスパーティ予約登録」あります。 　それを実行するための、教本に書かれていたプログラム、２件のファイル名 　１）addxmas.html 　２）addxmas.php 　ですが、プログラムを以下に示しました。 　２）addxmas.phpファイルの教本に書かれていた説明に 　　◎ データベースへのアクセス：登録処理 　　データベースへの接続処理が成功して、始めてデータベースにアクセスできるようになります。 　ここでのデータベースアクセスはレコードの登録処理で、(3)の「INSERT INTO」文によって行われます。 　「INSERT INTO」文は次のような構文になります。 　INSERT INTO　tbl_name (col_namel,　col_name2, ...）VALUES (value1, value2, ...)； 　以上ですが、 　　 　そこで質問ですが、 　「INSERT INTO」文の構文がどこの書かれているのか、知りたくて、 　　たぶん 　xamppのフォルダ中のどこかにあると思って、１００以上ファイルがあると思われる"xampp"を”INSERT INTO　tbl_name”で文字列検索したところ ヒットしませんでした！？ 　 　「INSERT INTO」文はどこに書かれている構文なのでしょうか！？ 　 　よろしくお願いします。 　 　 ---------------------------------------------------- １）addxmas.html ----------------------------------------------------- 　 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Xmasパーティ予約</title> <script type="text/javascript" src="../jquery-1.8.3"></script> <script type="text/javascript"> var query = {}; $(function(){ $("#exe").clck(booking); $("#clr").click(clearui); }); function booking(){ query["name"] = $("#name").val(); query["org"] = $("#org").val(); query["addr"] = $("#addr").val(); query["tel"] = $("#tel").val(); query["mail"] = $("#mail").val(); query["course"] = $("input[name="course"]:checked").val(); query["nume"] = $("#nums").val(); $.post("addxmas.php",query, function(ress){$("#status").text(res);}); } function clearui(){ $.each(["name","org",addr","tel","mail"],function(){ $("#" + this).val(""); }); $("#number").val(0); $("#status").text(""); $("#name").focus(); } </script> </head> <body bgcolor="#cadbdb"> <h3 style="color: #aa0022">Xamasパーティ予約情報登録<h/3> <table border="4" width ="480" bgcolor="#d8d8ff"> <tr> <th colspan="2"> Xmasパーティ予約情報登録画面&nbsp;&nbsp; <input type="button" id="exe" value=" 登録　 "/> <input type="button" id="clr" value=" クリア　"/> </th> </tr> <tr><th>代表者名:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク &nbsp;&nbsp;<input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク &nbsp;&nbsp;<input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン </td> </tr> <tr><th>参加人数:</th> <td> <select id="nums"> <option value="NA">選択</option> <option value="01">01人</option> <option value="02">02人</option> <option value="03">03人</option> <option value="04">04人</option> <option value="05">05人</option> <option value="06">06人</option> <option value="07">07人</option> <option value="08">08人</option> <option value="09">09人</option> <option value="10">10人</option> </select> <tr><th>処理結果:</th><td id="status">&nbsp;</td></tr> </table> </body> </html> ----------------------------------------------------- ２）addxmas.php ---------------------------------------------------- <?php //(A)開始 postメソッドでの送信データ送信 $name = $_POST["name"]; $org = $_POST["prg"]; $addr = $_POST["addr"]; $tel = $_POST["tel"]; $mail = $_POST["mail"]; $course = $_POST["course"]; $number = $_POST["number"]; //(A)終了　postメソッドでの送信データ受信 //(B) 開始　データベースの受信データ登録 $server = "localhost"; $dbname = "xmas"; $user = "root"; $passwd = "dPZ3Y8vXrP9NNb6"; $sv = mysq1_connect($server, $user, $passwd) or die("Connection err1"); $db = mysq1_select_db($dbname) or die("Connection error2"); $sq1 = "insert into xmastran valuse('$book_id','$name','$org','$addr','$tel', '$mall','$course','$number')";------------（3） if( mysql_query($spl,$sv)){ echo"登録成功:代表者 = ".$name; }else{ echo"登録不成功:代表者 =".$name; } mysql_close($sv); //(B)終了　データベースの受信データ ?> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    • ベストアンサー
    • PHP
  • 最後あたりに「/>」はなん役割がありのですか！？

    http://okwave.jp/qa/q8312880.html 以上のURLをクリックすると、全プログラムがみれます。以下のプログラムは 　以上プログラムを抜粋しました。 　 その、個々の構文の最後あたりに「/>」は、なんの役割があるのですか！？ 　たぶんHTMLだと思うのですが、教本が現在手元にないのでよく分かりません！？ よろしくお願いします。 <input type="button" id="exe" value=" 登録　 "/> <input type="button" id="clr" value=" クリア　"/> </th> </tr> <tr><th>代表者名:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク &nbsp;&nbsp;<input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク &nbsp;&nbsp;<input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン

    • ベストアンサー
    • HTML
  • htmlのformの表示について【Jquery】

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function formChanged(ev){ var sel = $('.chk:checked').map(function () { return this.checked ? this.value : null; }).get().join(); $("#output").text(sel); } formChanged(null); $(document).on("change",'.chk:checked',formChanged); </script> <form method="post" action="mail.php"> <table> <tr> <th>カテゴリー</th> <td> ・ABC： <input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" /> ・DEF： <input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" /> ・GHI： <input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" /> </tr> <tr> <th>選択した製品シリーズ</th> <td><span id="output"></span></td> </tr> <tr> </table> </form> これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。

  • jQueryで合計を出したい

    <table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。

  • フォントをまとめて<h5>にできないでしょうか！？

    　JabaScriptプログラム抜粋です。 　表の中の文字が大きすぎてはみ出してしまいます。 　そこで、<h5>にすればちょうど枠内に収まりました。 個々の構文に<h5>タグを入れてもいいのですが、まとめて、できる方法は、 　ございませんか！？以下よろしくお願いします。 <tr> <tr><th><h5>代表者名</5>:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク &nbsp;&nbsp;<input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク &nbsp;&nbsp;<input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン </td> </tr> <tr><th>参加人数:</th> <td> <select id="nums"> <option value="NA">選択</option> <option value="01">01人</option> <option value="02">02人</option> <option value="03">03人</option> <option value="04">04人</option> <option value="05">05人</option> <option value="06">06人</option> <option value="07">07人</option> <option value="08">08人</option> <option value="09">09人</option> <option value="10">10人</option> </select> <tr><th>処理結果:</th><td id="status">&nbsp;</td></tr> </table> </body> </html>

  • チェックボックスの中味を送信できません

    昨日、Ajax通信で受け取ったデータをチェックボックスに反映する方法を教わった者です。 今度は送信で悩んでいます。 表のデータをPOSTで送るんですが、テキストのところ（「td」に書かれたものや input type="text" の部分） は問題なく渡せました。 でもまたまたチェックボックスでつまずいています。 ★☆★☆★☆★☆の部分ですが、プログラムは通るのですが、チェックボックスの内容（チェックか否か）を 拾ってくれません。 また、rows[i].getElementByTagName("sendF[]") などとやってみたんですが、エラー（not a function）が出てしまいます。 どなたかご指導下さい。 よろしくお願いします。 $.ajax({ type: "POST", url: "../SendList.php", data: {"condition":condition}, // Webサーバに送信するデータ dataType: 'text', // Webサーバか受信するデータの形式 success: function(request){ // ajax通信が成功したときの処理 var json = JSON.parse(request); var res = ''; for (var i = 0; i < json.length; i++){ res += '<tr>' + '<td style="text-align: center;">' + json[i].personId + '</td>' + '<td style="text-align: center;">' + json[i].personName + '</td>' + '<td style="text-align: center;">'; // 値を checkbox のチェックに差し込む if(json[i].sendF == 1){ res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" checked />'; } else { res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" />'; } res += '</td >' + '<td style="text-align: left;">' + '<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />' + '</td >' + '</tr>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<table id="tbl_correspondUpdate" class="customerlist"><tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>' + res + '</table>' + '<br />' +'<p class="condition_submit">' + '<input id="btnUpdate" type="button" onclick="doActionUpdate();" value="更新" />' + '</p>'; }, error: function(msg){ // ajax通信が失敗したときの処理 alert( "Data Saved: " + msg ); } }); } // 「更新」ボタンクリック function doActionUpdate(){ var tbl = document.getElementById("tbl_correspondUpdate"); var cols = tbl.rows[0].cells.length;// 列数 //var rows = tbl.rows.length; // 行数 var rows = tbl.rows; // 行に対するループ for (var i=1; i<rows.length; i++) { var sendF; if(rows[i].cells[6].checked){ ★☆★☆★☆★☆// →　通るものの拾わない //var elm = rows[i].getElementByTagName("sendF[]"); // →　not a function //if(elm.checked){ sendF = 1; }else{ sendF = 0; } // dataセット var data = "personId=" + rows[i].cells[0].innerHTML + "&sendF=" + sendF + "&memo=" + rows[i].cells[3].firstChild.value updateRecord(data); } } // 更新処理 function updateRecord(data){ // 更新Ajax処理 // 更新したIDを返す $.ajax({ type: "POST",

  • JavaScriptの質問です。

    JavaScriptの質問です。 下記フォームで、 １番が入力されると、 ２、３番目のエリアがグレーになって入力不可になる方法を教えてください。 <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> <tr> よろしくお願いします。

  • 表の中のセルの位置を把握したいです

    伝票入力の画面を作っているところです。 表内の１番左の「goodsId」 のセルでダブルクリックすると商品一覧ダイアログボックスが 開いて、１件を選択すると、表の中に商品名や単価等を表示する流れになっています。 下のコードはその表（伝票形式）と商品一覧ダイアログ呼び出すところです。 ダイアログを開く　→　商品一覧から１件を指定　→　表に商品名等を表示 はうまくいくのですが、表内の表示位置がうまくいきません。 どの行の「goodsId」でダブルクリックしても先頭行に表示されてしまいます。 これは、カレント行の把握が必要なんだと思いますが、やり方がわかりません。 いろいろググってみると、一旦表内のすべてのセルを読み込んでクリックした 場所のrowsインデックスとcellsインデックスを取得するやり方ま見つけたんですが、 私が作ったこのコードにどのように組み込んだらいいのかがわからないのです。 どなたか教えて下さい。 よろしくお願いします。 // 売上明細表示 function indicateSalesDetail(lines){ var res = ''; for (var i = 0; i < lines; i++){ res += '<tr>' + '<td align="center" style="width: 10%;">' + '<input type="text" id="goodsId" name="goodsId" ondblclick="doActionGoodsList();" />' + '</td>' + '<td align="left" style="width: 60%;">' + '<input type="text" id="goodsName" name="goodsName" />' + '</td>' + '<td align="center" style="width: 10%;">' + '<input type="text" id="price" name="price" />' + '</td>' + '<td align="center" style="width: 5%;">' + '<input type="text" id="quantity" name="quantity" />' + '</td>' + '<td align="left" style="width: 15%;">' + '<input type="text" id="amount" name="amount" />' + '</td>' + '</tr>'; } res += '</table>'; var obj = document.getElementById("datatable"); obj.innerHTML ='<table><tr><th>商品ID</th><th>商品名</th><th>単価</th><th>数量</th><th>金額</th></tr>' + res; } // 商品一覧表示処理 function doActionGoodsList(){ var url = "goodslistdialog.php"; var winWidth = "750px"; var winHeight = "500px"; var options = "dialogWidth=" + winWidth + ";dialogHeight=" + winHeight + ";center=1;status=1;scroll=1;resizable=1;\minimize=0;maximize=0;"; var returnValue = window.showModalDialog(url, window, options); var goodsId = returnValue; if(goodsId != null){ $.get('../code/goods/GoodsDetail.php', {"goodsId":goodsId}, callbackGoods); } }

  • PHP POSTでデータ登録について

    PHP初心者です。PHP簡単な管理システムを作っていますが、データベースにデータ登録がうまくできないので、教えてください。 データ登録が出来ますが、登録ページの中に　＜a href ="xxx.php">に追加して、リンクをクリックしたら、空データがそのまま登録されてしまった。 フォーム中のボタンを押さないとデータ登録ができない設定するのを作りたいですが、ソースコードのどこで修正したら、ページリンクしても自動的に空データ登録できないのか？ <form id="frmIpunt" name="frmIput" method="post" action=""> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <th colspan="2">新規店舗登録</th> </tr> <tr> <td>店舗名</td> <td> <span id="sprytextfield1"> <label for="shops_name"></label> <input name="shops_name" type="text" id="shops_name" size="10"> <span class="textfieldRequiredMsg">未入力</span></span> </td> </tr> <tr> <td>住所</td> <td><input name="shops_address" type="text" id="shops_address"></td> </tr> <tr> <td>電話番号</td> <td><input name="shops_tel" type="text" id="shops_tel"></td> </tr> </table> <input type="submit" class="order-button" value="登録する"> </form>

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する