- ベストアンサー
フォームデータの受け取り方とhiddenデータの取得方法
- フォームデータの受け取り方やhiddenデータの取得方法について質問させてください。
- PHPで作成したファイルで、フォームデータの受け取り先となるsend.phpについて気になる点があります。
- 特に、hiddenデータのcomment_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>
お礼
anmochiさん はじめまして。 朝方での回答、そして的を得た適切な回答をありがとうございます。 無事、描いていた結果を得ることが出来ました！ また、詳しい説明やその他のサンプルコードなどもご提示いただき、いずれも「なるほど」と思う内容で感謝しています。ありがとうございました！