フォームデータの受け取り方とhiddenデータの取得方法

前へ 次へ
このQ&Aのポイント
  • フォームデータの受け取り方やhiddenデータの取得方法について質問させてください。
  • PHPで作成したファイルで、フォームデータの受け取り先となるsend.phpについて気になる点があります。
  • 特に、hiddenデータのcomment_noの値をどのように取得すればいいかについて知りたいです。
回答を見る
  • ベストアンサー

フォームデータの受取り方

お世話になっております。フォームデータの受取り方が判らず質問させて下さい。 少々長いのですが、以下はPHPで作ったファイルです。 （IDは重なってはならないと考え、変数で番号を与えて回避しています） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="EUC-JP" /> <title></title> <script type="text/javascript" src="/jquery/js/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(){ $('#send1').click(function(){ var data = {comment : $('#comment1').val()}; $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); } }); return false; }); }); </script> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no" value="1"><p><textarea name="comment1" id="comment1" style="width:400px; height:20px; padding:6px 5px; font-size:13px; overflow:hidden; vertical-align:text-bottom;" onkeyup="resize(this)"></textarea></p> <p><input id="send1" value="送信1" type="submit" /></p> </form> <hr> <script> $(document).ready(function(){ $('#send2').click(function(){ var data = {comment : $('#comment2').val()}; $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); } }); return false; }); }); </script> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no2" value="2"><p><textarea name="comment2" id="comment2" style="width:400px; height:20px; padding:6px 5px; font-size:13px; overflow:hidden; vertical-align:text-bottom;" onkeyup="resize(this)"></textarea></p> <p><input id="send2" value="送信2" type="submit" /></p> </form> </body> </html> ここで質問させて下さい。 上記フォームデータの受取り先である、send.phpは $comment = $_POST['comment']; としてテキストフォームの値を拾っているのですが、 hidden データの comment_no は、どのように値を拾ったらよろしいのでしょうか？ 前回の質問同様、AJAXを触り初めて間もなく、ｇoogleで調べようにも適切なキーワードが判らずにいる次第です。 お忙しいなか恐縮ですが、アドバイスのほど頂戴出来たら幸いです。 宜しくお願い致します。

  • AJAX
  • 回答数1
  • ありがとう数15

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

  • ベストアンサー
  • anmochi
  • ベストアンサー率65% (1332/2045)
回答No.1

普通に ・・・ var data = { comment : $('#comment1').val(), comment_no : $('#comment_no').val() }; ・・・ var data = { comment : $('#comment2').val(), comment_no : $('#comment_no2').val() }; ・・・ でいいと思う。これで、send1やsend2が押された時にsend.phpは$_POST["comment"]と$_POST["comment_no"]で受け取れるはず。 この「data」なるデータはJSON形式と呼ばれる記法で、この書き方によりJavaScript中では連想配列に似た動作を行う。こいつを$.ajaxに食わせると適切なリクエストでPOSTしてくれるわけだ。大雑把かつ不正確に言えば、 var data = { hoge : "hogehoge", fuga : "fugafuga", miyo : "miyomiyo", tako : "takotako" }; が$.ajaxのdata引数として使われると、左側がリクエストパラメーター名として右側に指定された値をWebサーバーにPOSTする。最後の行の最後にはカンマが無い事に注目。そして$.ajaxメソッドの引数もJSON形式だ。 余談だが仮にこの画面がAJAXオンリーなのであればあえてFORMは作らない方が良いかもしれない。 comment_noを盛り込んで、かつ大幅にはソースを変えずにちょっと汎用的にしてみたのが以下だ。jQueryの「セレクター」という機能をフルに活用している。submitにcommentsubmitというCSSのクラスを付け、$('.commentsubmit')というクラスセレクターでクリック時の動作を制御する。さらにクリック時に実行されるfunction中でthisは押されたsubmitを表すので、$(this)は押されたsubmitを表すjQueryオブジェクトになる。 次に$(this).closest('form')は押されたsubmitから最も近いformのjQueryオブジェクトをさすため、今度はformの中にあるinput[type=hidden]とtextareaをname属性で引っ張って来るのだ。 ちょろっと書いただけで全然試してないので動くかどうかは分からん。 ～～～～ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="EUC-JP" /> <title></title> <script type="text/javascript" src="/jquery/js/jquery.min.js"></script> </head> <body> <script> $(document).ready(function() { $('.commentsubmit').click(function() { $form = $(this).closest('form'); var data = {comment_no : $('input[type=hidden][name=comment_no]', $form).val(), comment : $('textarea[name=comment]', $form).val() }; $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); } }); return false; }); }); </script> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no1" value="1"> <p> <textarea name="comment" id="comment1" style="width: 400px; height: 20px; padding: 6px 5px; font-size: 13px; overflow: hidden; vertical-align: text-bottom;" onkeyup="resize(this)"></textarea> </p> <p> <input id="send1" value="送信1" type="submit" class="commentsubmit" /> </p> </form> <hr> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no2" value="2"> <p> <textarea name="comment" id="comment2" style="width: 400px; height: 20px; padding: 6px 5px; font-size: 13px; overflow: hidden; vertical-align: text-bottom;" onkeyup="resize(this)"></textarea> </p> <p> <input id="send2" value="送信2" type="submit" class="commentsubmit" /> </p> </form> </body> </html>

a4_chapp
質問者

お礼

anmochiさん はじめまして。 朝方での回答、そして的を得た適切な回答をありがとうございます。 無事、描いていた結果を得ることが出来ました！ また、詳しい説明やその他のサンプルコードなどもご提示いただき、いずれも「なるほど」と思う内容で感謝しています。ありがとうございました！

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

関連するQ&A

  • 複数のフォームを一括で送信することは可能ですか？

    CGIの勉強を始めたばかりの初心者です。 本に簡単なフォームメールがあったのですが、複数のフォームを一括でデータ送信する方法はあるのでしょうか？ http://oshiete1.goo.ne.jp/qa3395953.htmlで教えて頂いた方法を真似て、以下のようにしてみたのですが、これだと１つのフォームしかデータ送信できないです。 CGIの方もいじらないと複数のフォームを一括送信はできないのでしょうか？ <script language="javascript"><!-- function send() { document.nform.submit(); document.nform2.submit(); } //--></script> <form name="nform" method="POST" action="./5-2.cgi"> <p>お名前 ：<input type="text" name="name" size="40"></p> <p> メッセージ： <br> <textarea cols="50" rows="5" name="message"></textarea> </p> </form> <form name="nform2" method="POST" action="./5-2.cgi"> <p>お名前 ：<input type="text" name="name" size="40"></p> <p> メッセージ： <br> <textarea cols="50" rows="5" name="message"></textarea> </p> </form> <input type="button" value="送信" onClick="send()">

    • ベストアンサー
    • CGI
  • フォームからmySQL-DBにデータ登録したいです。

    FedoraCore6 + Apache2.2.4 + MySQL5.0.41 + PHP4.4.7 で学習しています。 TABLE aaa( id MEDIUMINT NOT NULL AUTO_INCREMENT, hiduke DATE, xyz INT, comment VARCHAR(30), PRIMARY KEY (id) );　　という表を作り、 入力フォーム [TEST.html] <html><head><meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"></head> <body><p>データ入力</p> <form action="datatest.php" method="POST"> <p>日付<input type="text" name="hiduke" size="12"></p> <p>データ<input type="text" name="xyz" size="6"></p> <p>コメント<input type="text" name="comment" size="40"></p> <input type="submit" value="登録"> <input type="reset" value="リセット"> </form></body></html> ------------------ 書込スクリプト [datatest.php] <html><body> <php extract($_POST); mysql_connect(localhost,bbbbbb,******); mysql_select_db(cccccc); $sql = "insert into aaa values(0 '$hiduke','$xyz','$comment')"; mysql_query($sql); ?> 下記の内容で登録しました<p> 日付：<? echo $hiduke; ?> <br> データ：<? echo $xyz; ?> <br> コメント：<? echo $comment; ?> <br> <p></body></html> でデータを登録しようとしましたが書き込みができません。何が悪いのでしょうか？ 基本的なところが間違っていると思い、いろいろ調べましたが、私の現在の力では原因を見つけることができないでいまず。よろしくご指導下さい。 なお、コマンドラインから、insert into aaa values(0, 20071008,3840,'qqqqq');　なら書込みできます。

    • ベストアンサー
    • MySQL
  • 確認ダイアログではいといいえの選択を反対に・・・。

    確認ダイアログはフォームボタンをした時に「はい」が選択されていると思います。 それを「いいえ」に選択されているようにはできないのでしょうか？ 色々探してみたものの全くなく、自分の探し方が悪いのかわかりません。 何かしら情報などがありましたら教えていただきたいと思います。 よろしくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script> jQuery(function($){ $('input.send').click(function(){ return confirm('登録しますか？'); }); }); </script> </head> <body> <form method="post"> Name：<input name="name" class="name" value="nama"/><br> Comment：<textarea name="comment"></textarea><br> <input class="send" type="submit" name="send" value="登録"> </form> </div> </body> </html>

  • MT　コメントフォームのテキストエリアの『横幅』を変更したい

    ブログテンプレートをデフォルトを元に編集しています。 エントリーテンプレートを編集しているときに気づいたのですが、コメントフォームのテキストエリアの横幅の値を変えても、ある幅までにしか縮みません。もしかしたら編集する場所が間違っているかもしれませんが、お助け願います。 ついでに編集したあとのコメントフォームの例です。 <label for="comment-author">名前:</label> <input id="comment-author" name="author" size="20" /> <p id="comments-open-text"> <label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label> <textarea id="comment-text" name="text" rows="5" cols="40"></textarea> </p>

  • AJAXの書き方について

    <script type="text/javascript"> $( function() { $( '#ajax-button' ) .click( function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); } ); </script> この部分は何を意味しているのでしょうか？ $( '#ajax-button' ) .click( またここの部分をIDにして二つ別々のIDを書いてblur(fn()にしたい場合はどうすればいいのでしょうか？ $("[id$=NO]").blur(function(){ $("[id$=NM]").blur(function(){ function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); }); }); このようにしても動きません。 正しい書き方を教えていただきたいです。

  • 現在PHPにてsessionを使用したフォームを作成しております。

    現在PHPにてsessionを使用したフォームを作成しております。 現在、PHPは初心者で勉強中ですが悩んでいるため、ご質問させていただきます。 ソースは下記の通りです。 /* contact.php ----------------------*/ <html> <body> <form action="confirm.php" method="POST" > コメント：<br /> <?php echo $_SESSION['error_comment']; ?> <textarea name="comment"><?php echo $_SESSION['comment']; ?></textarea> <input type="hidden" name="contact" value="<?php $contact; ?>" /> <input type="submit" name="submit" value="確認" /> </form> </body> </html> /* confirm.php ----------------------*/ <?php session_start(); $comment = htmlspecialchars($_POST['comment']); if (isset($_POST["contact"])) { if (empty($comment)) { $_SESSION['error_comment'] = "コメントを入力してください！"; } if (!count($contact)) { $_SESSION["comment"] = $comment; header("Location: contact.php"); exit; } } else { $msg = '編集しました。'; } <html> <body> <?php echo $msg; ?> </body> </html> としております。 上記の内容でテストをするとcomment欄に入力されないと「コメントを入力してください！」と表示されますが、入力(テストと入力)をして確認をすると onfirm.phpのページは表示されずcontact.phpのcomment欄にテストと表示されたままです。 入力された場合はconfirm.phpを表示されせるにはどうしたらよろしいのでしょうか? お分かりの方がいらっしゃいましたら、ご教授お願いします。

    • ベストアンサー
    • PHP
  • 複数フォームのデータ渡しについて

    http://okwave.jp/qa2522271.html で質問したのですが、質問内容が若干変更なりましたので、またご教授頂けたらありがたいです。 現在のコード <script language="JavaScript"> function send(v,fname){ var f=document.forms[fname]; f.botan.value=v; f.submit(); } </script> <form name="Form1" action="tesuto1.php" > <input type="hidden" name="botan"> 中略 </form> <form name="Form2" action="tesuto2.php" > <input type="hidden" name="botan"> 中略 </form> <form name="Form2" action="tesuto3.php" > <input type="hidden" name="botan"> 中略 </form> <form> <input type="button" value="送信" onClick="send(this.value,'Form1')"> <input type="button" value="取消" onClick="send(this.value,'Form2')"> <input type="button" value="確認" onClick="send(this.value,'Form1')"> </form> 前回と違うのは送信ボタンをクリックしたときに、どのボタンがクリックされたのかを判別して（ここは同じです）form1とform3のデータを渡したいのですが。 よろしくお願いします。

  • 下記ソースでauからログファイルに書込みしたいのですが、全然反応しませ

    下記ソースでauからログファイルに書込みしたいのですが、全然反応しません。 かなりいろいろ試したのですが、まったくダメでした どこを改善すれば、書込み出来るようになるでしょうか？ <HTML> <?php $data_file = "test.log"; //データファイル名 if(!isset($PHP_SELF)){ $PHP_SELF = $_SERVER["PHP_SELF"]; } if(!isset($action)){ $action = $_POST['action']; } if(!isset($comment)){ $comment = $_POST['comment']; } if(!isset($upfile)){ $upfile = $_POST['upfile']; } ?> <HEAD> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> </HEAD> <BODY ALIGN="LEFT" BGCOLOR="#000000" TEXT="#FFFFFF" > ■TEST<br> <FORM ACTION="<?php echo $PHP_SELF; ?>" METHOD="POST" ENCTYPE="multipart/form-data" style="margin: 0px;"> <P><INPUT TYPE="HIDDEN" NAME="action" VALUE="regist"></P> コメント<br> <TEXTAREA NAME="comment" ROWS="5" COLS="28" style="font-size:10pt; color:#000000"></TEXTAREA><BR> 添付画像:<FONT COLOR="#CC0000"> *GIF/JPG/PNG</color><br> <INPUT TYPE="file" NAME="upfile" SIZE="20"><BR>　<br> <?php print "<INPUT TYPE='SUBMIT' VALUE='　書込み／更新　'> <INPUT TYPE='RESET' VALUE='リセット'>\n"; ?> </FORM> <?php //===============データの書き込み================= if ($action == "regist") { $fp = fopen($data_file, "r+"); // ファイル開く $comment0 = fgets( $fp); //値読み取り $comment=$comment."\\".$action."<br>".$comment0; fputs($fp, $comment); fclose($fp); echo"<font size=1 color='white'>"; echo $comment; echo"<br>"; echo"$comment0"; echo"</font>"; $action="no"; unset($action); unset($comment); unset($comment0); } ?> </body> </html>

    • ベストアンサー
    • PHP
  • 特殊文字を含むフォームデータの受け渡し

    HTML＋PHPでフォームを作っているのですが、 フォーム内のtextareaに特殊文字を含んだ場合に、フォームデータが全て渡って来ない場合があります。 このような現象の原因、対処法等ご存知の方がおりましたら、ぜひともご教授ください。 以下、現象の詳細です。-------------------------------- ・ccccの中に特殊文字(＆trade；が文字参照になってない状態等)が入っている状態でsubmitすると、aaaaがPOST変数に入っていない。 ・valueの値が入ってないのではなく、aaaa自体が存在しません。 ・同様に書いているいくつかのフォームでも発生するものとしないものがある ---フォーム--- <form method="post" enctype="multipart/form-data" action="test.php"> <input type="hidden" name="aaaa" value="aaaa"> <input type="hidden" name="bbbb" value="bbbb"> <textarea name="cccc"> ---test.php--- 先頭で$_POSTをprintしてます。

    • 締切済み
    • PHP
  • 指定した複数のデータを別ページフォームに入れる

    非常に古い回答を参考にしています。2007/11/08 19:08 steel_grayさんが回答されている項目 希望する事は複数　商品一覧のA.htmlのページがあり それをお問合せフオームB.htmlのテキストボックスに投げ入れる スクリプトを希望 A.html <head> </head/> <body> <script type="text/javascript"> function sendQuery(uri,querys){ var query = new Array; for(var x in querys) { query.push(x+'='+encodeURI(querys[x])); } location.href=uri+'?'+query.join('&'); } </script> <input type="button" value="問合せ" onclick="sendQuery('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})"> </body> --------------------------------------- ・問い合わせページ ・・スクリプト(bodyのonloadで呼び出す) B.html <head> </head> <body> <script type="text/javascript"> function setQuery(){ var querys = location.search.replace(/^\?/,'').split(/&/); for(var i=0;querys[i];i++){ var query = querys[i].split('='); document.getElementById(query[0]).value = decodeURI(query[1]); } } </script> <!--値を受取るフォーム部品 --> <input type="hidden" id="CODE"> <input type="hidden" id="NAME"> </body> それぞれCODEとNAMEのテキストボックスにデータが入りません 希望は<input type="hidden" id="CODE">にCODEのデータが入る <input type="hidden" id="NAME">にNAMEのデータが入る スクリプトを希望します。 何卒ご回答よろしくおねがいします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する