javascriptでphpに値渡し

このQ&Aのポイント
  • javascriptとphpで値のやりとりをしたいのですが、やりかたがわかりません。
  • Selected()関数に引数valueを渡し、phpファイルに送って処理をさせたいです。
  • Selected()関数内にどのように書けばいいのかがわかりません。
回答を見る
  • ベストアンサー

javascriptでphpに値渡し

javascriptとphpで値のやりとりをしたいのですが、やりかたがわかりません。 以下のプログラムはセレクトメニューで選択された文字によって'a','ka','sa'....と 自作関数のSelected()に値を渡しています。 "alert(value);"をSelected()関数内に書いて、引数が正しく渡され実行できることは確認しました。 そこで、今度はSelected()関数に渡された引数valueをphpファイルに送って、 php側で引数に応じた処理をさせたいのですが、 Selected()関数内にどのように書けば良いのかがわかりません。 ちなみに渡したいphpのファイル名は"connect_mysql.php"で、 以下のプログラムが書かれたファイルと同階層にあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <meta http-equiv="Content-Script-Type" content="text/javascript"> <head> <title>test page</title> </head> <script type="text/javascript"> function Selected(value){ //ここで引数valueをphp側に渡したい // "alert(value);"を書いてSelected()関数が正しく呼び出され実行されることを確認済み } </script> <body> <form> <div id="name_selectors" class="name_select flo_l"> <select id="aiueo" class="aiueo_list flo_l" size="5" onchange="Selected(this[this.selectedIndex].value)"> <!--↓五十音一覧--> <option id="a" value="a" class="category_aiueo" > あ行 </option> <option id="ka" value="ka" class="category_aiueo" > か行 </option> <option id="sa" value="sa" class="category_aiueo" > さ行 </option>             ・             ・             ・ <option id="ra" value="ra" class="category_aiueo" > ら、わ行 </option> </select> <!--↑五十音 end--> </div> </form>   </body> </html>

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

  • ベストアンサー
回答No.2

簡単なのは、<form>を送信(.submit())して下さい。 または、 簡単ではありませんが、資料が多く一般化(標準化)している方法として、Ajaxを使用して下さい。

kreboa
質問者

補足

ご回答ありがとうございます。 <form>をsubmit()した場合のphpファイル側での受け取り方がわからないので、 もしよろしければ、それについても教えていただけると助かります。

その他の回答 (3)

  • gorusura
  • ベストアンサー率59% (25/42)
回答No.4

フォーム内容を送信した場合には、PHP側では、$_GET,$_POSTで値を受け取ることが出来ます。 例: ///index.html/// <form action='./test.php' method='GET'> <input type='text' name='id'> <input type='password' name='pass'> </form> ///test.php/// <?php if($_SERVER['REQUEST_METHOD']=='GET'){ foreach($_GET as $key => $value){ $in[$key]=$value; } } else{ foreach($_GET as $key => $value){ $in[$key]=$value; } } echo 'id:',$in['id'],' pass:',$in['pass']; ?> 注意点として、私はPHPはあまり詳しくないので、文法などが間違っているかもしれません。 その場合には、修正して下さい。

kreboa
質問者

お礼

ご回答ありがとうございます。 無事解決することができました。

  • yui-magic
  • ベストアンサー率62% (20/32)
回答No.3

もし、jQueryが使用できる環境ならば 簡単に実装できます。 $.post( url, data, callback, type ) という形式です。 hoge.phpに[data1="a" , data2="ka"]というデータを送る場合のサンプルです。 $.post("hoge.php", { "data1":"a", "data2":"ka" },function(data,status){ //コールバック関数 }); GETの場合は$.postを$.getに書き換えてください。 以下のページ等も参考にしてみてください。 http://stacktrace.jp/jquery/api/ajax/jquery.post.html

kreboa
質問者

お礼

回答いただきありがとうございます。 jQueryというのがあるんですね。 調べてみます。

  • gorusura
  • ベストアンサー率59% (25/42)
回答No.1

Ajaxを使います。 function SendRequest(data,method,fileName,callback,async){ var HttpObject=createHttpRequest(); HttpObject.open(method,fileName,async); HttpObject.setRequestHeader('If-Modified-Since','Thu, 01 Jun 1970 00:00:00 GMT'); HttpObject.onreadystatechange=function(){ if(HttpObject.readyState==4){ if(HttpObject.status==200){ if(typeof callback=='function'){ callback.call(HttpObject,HttpObject); } } else{ if(typeof callback=='function'){ callback.call('false','false'); } } } }; HttpObject.send(data); } SendRequest('送るデータ(a=b&c=d の形式)','POST(GET)','phpファイル(?a=b&c=d も可)',function(){ //送信完了時に何かしたい場合 }, 基本的に、省略可。非同期通信にするかどうかのフラグで、省略するとtrue 同期通信なら、false。同期通信の場合には、通信中は何もできない ); です。

kreboa
質問者

お礼

回答いただきありがとうございます。 Ajaxの勉強はしていないので、少し勉強してみます。

関連するQ&A

  • エレメントclass?の値をPHPの変数に入れる

    Aタグをクリック→jsが発動(ajaxでphpにpostでエレメントID?を投げる)→phpでエレメントIDを受け取って処理 phpで処理した結果→jsに返す(ajaxの指定したエレメントclass?に渡すよう設定)→取得 selectの範囲の中なんですが、$stausにclass='edit_status'の結果を入れるにはどうしたらいいでしょうか。 <select>   <option <?php $status=."class='edit_status'".; if($status == 1){ echo "selected"; }?> >下書き</option>   <option <?php $status=."class='edit_status'".; if($status == 2){ echo "selected"; }?> >非公開</option>   <option <?php $status=."class='edit_status'".; if($status == 3){ echo "selected"; }?> >公 開</option> </select> id <input type='text' value='1111' id='eid' class='edit_id'>

    • ベストアンサー
    • PHP
  • phpについての簡単な質問です

    下のようなphpコードを見たのですが、 (http://okwave.jp/qa/q5324570.htmlのベストアンサー) <form method="post" action="{$_SERVER["PHP_SELF"]}"> <select name="category" id="category" onchange="this.form.submit();"> <option value="0"{$selected["category"]["0"]}>A</option> <option value="1"{$selected["category"]["1"]}>B</option> <option value="2"{$selected["category"]["2"]}>C</option> <option value="3"{$selected["category"]["3"]}>D</option> </select> </form> {$selected["category"]["0"]}という部分がよくわかりません。 二次元配列みたいなものなのでしょうか? ぜひとも教えてください。

  • IDをvalueの値でなく、class名から取得したい

    HTML上でvalue値を日本語にしてスマートに値を取得したいため、 value値でなくclass名でidnameに引き渡したいです。 (value)を(className)にしてみる等試行錯誤してみましたが どうやら見当違いのようです。お知恵を拝借したく思います。 <html> <head> <TITLE>Webサイト</TITLE> <STYLE TYPE="text/css"> <!-- .secondpulldown {display: none;} --> </STYLE> </head> <body> <script type="text/javascript"> function waySelect() { document.getElementById('select01').style.display = 'none'; document.getElementById('select02').style.display = 'none'; document.getElementById('select03').style.display = 'none'; } function SetSubMenu( idname ) { waySelect(); if( idname != "" ) { document.getElementById(idname).style.display = 'inline'; } } </script> <select name="oya" id="hiragana" onchange="SetSubMenu(value);"> <!--ここを(className)にするのは見当違いですか?)--> <option value="select01" class="select01">あいう</option> <option value="select02" class="select02">えおか</option> <option value="select03" class="select03">きくけ</option> </select> <!-- *------下に出現------* --> <br> <br> <select id="select01" class="secondpulldown" onchange="text01(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ああああ</option> <option value="2">いいいい</option> <option value="3">うううう</option> </select> <select id="select02" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ええええ</option> <option value="2">おおおお</option> <option value="3">かかかか</option> </select> <select id="select03" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">きききき</option> <option value="2">くくくく</option> <option value="3">けけけけ</option> </select>

  • Javascriptで質問です。

    セレクトボックスを2段階選択後にテキストを出力する以下のコードがあるのですが、現状では1段階のセレクトボックスを選択しないと2段階目のボックスが出て来ません。 これを最初から2段階目のボックスを表示して、出力するテキストもデフォルトのもの(最上段のもの)を最初から出力したいのです。 詳しい方がいらっしゃいましたらご教示いただけると幸いです。よろしくお願いいたします。 <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023</option> <option value="ka">2024</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ka" class="subbox2"> <option value="">月</option> <option value="ka1">1月</option> <option value="ka2">2月</option> <option value="ka3">3月</option> </select> </div> </form> <div id="ha1" class="subbox3">2023-1月</div> <div id="ha2" class="subbox3">2023-2月</div> <div id="ha3" class="subbox3">2023-3月</div> <div id="ka1" class="subbox3">2024-1月</div> <div id="ka2" class="subbox3">2024-2月</div> <div id="ka3" class="subbox3">2024-3月</div> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script>

  • PHP セレクトボックスの値 GET渡し

    PHP初心者です。 大急ぎで対応を要求されていますので皆様のお力添えをよろしくおねがいします。 画面に検索キーとしてのセレクトボックスがあります。 ボタンではなくリンクのonClickで選択された値をGETで渡したいのです。 どのように記述したらよいか教えてください。 検索キーのリストボックス(2012を選択した状態です) <select name="search_orderyear"> <option value="2005" label="2005">2005</option> <option value="2006" label="2006">2006</option> <option value="2007" label="2007">2007</option> <option value="2008" label="2008">2008</option> <option value="2009" label="2009">2009</option> <option value="2010" label="2010">2010</option> <option value="2011" label="2011">2011</option> <option selected="selected" value="2012" label="2012">2012</option> </select> 渡す値をセットしている箇所(xxxは外部function名です) onClick="xxx('pdf.php?orderyear=<!--{$search_ordermonth.value}-->',・・以下省略 としてみましたが、値はわたりませんでした。 上記説明で不足部分があればご指摘ください。 よろしくおねがいいたします。 PHP 5.2.9

    • ベストアンサー
    • PHP
  • PHP

    PHPで無駄なコーディングをしない為、ループでまわしたいのですが関数が入り、ややこしくなっています。どうしたらいいですか? <select name="nminute"> <option value="0" <?php if(strstr($nminute,'0')) echo"selected"; ?>>0</option> <option value="1" <?php if(strstr($nminute,'1')) echo"selected"; ?>>1</option> <option value="2" <?php if(strstr($nminute,'2')) echo"selected"; ?>>2</option> <option value="3" <?php if(strstr($nminute,'3')) echo"selected"; ?>>3</option> <option value="4" <?php if(strstr($nminute,'4')) echo"selected"; ?>>4</option> <option value="5" <?php if(strstr($nminute,'5')) echo"selected"; ?>>5</option> <option value="6" <?php if(strstr($nminute,'6')) echo"selected"; ?>>6</option> <option value="7" <?php if(strstr($nminute,'7')) echo"selected"; ?>>7</option> <option value="8" <?php if(strstr($nminute,'8')) echo"selected"; ?>>8</option> <option value="9" <?php

    • ベストアンサー
    • PHP
  • PHP

    HTML文ですが、これをPHPでループで回して無駄なコーディングを直したい。 どうしたらいいですか? <select name="nhour"> <option value="0" <?php if($nhour == '0') echo"selected"; ?>>0</option> <option value="1" <?php if($nhour == '1') echo"selected"; ?>>1</option> <option value="2" <?php if($nhour == '2') echo"selected"; ?>>2</option> <option value="3" <?php if($nhour == '3') echo"selected"; ?>>3</option> <option value="4" <?php if($nhour == '4') echo"selected"; ?>>4</option> <option value="5" <?php if($nhour == '5') echo"selected"; ?>>5</option> </select>

    • ベストアンサー
    • PHP
  • javascriptでコメントアウトができません

    下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>

  • select値でのフォームのaction値の変更

    以下のようなフォームでselectの値によって PHPでactionのURLを変更させるようなことは出来るでしょうか。 <form name="form" method="GET" action="ここをselect値により変更"> <input type="text" name="word" id="word" value="" /> <select name="select" id="select"><option selected="selected" value="01">値01</option> <select name="select" id="select"><option selected="selected" value="02">値02</option> <select name="select" id="select"><option selected="selected" value="03">値03</option> </select> </form> 以上、どうぞ宜しくお願い申し上げます。

    • ベストアンサー
    • PHP
  • JAVASCRIPTで、ボタンを押したら 入力項目を追加できるようにしたい。

    FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい) どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <select> <option value=" " selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>