画面上のコントロールの値の取得方法について
- JavaScriptを使用して画面上のコントロールの値を取得する方法について知りたいです。
- テキストボックスの値は取得できるが、チェックボックスの値がうまく取れない問題に直面しています。
- どのように書けばチェックボックスの値を正しく取得できるでしょうか。
- ベストアンサー
画面上のコントロールの値が取れない。
JavaScriptで画面上のコントロールの値をすべて取得して、 HTTPハンドラ（C♯で作成）をリクエストし、計算結果を持ってきたいと思っています。 以下のように作りました。 $(function(){ $("[type='button']").click(function(){ var postData = {}; $("[name='specForm']").find(':input').each(function(){ postData[$(this).attr('name')] = $(this).val(); }); $.ajax({ type: "POST", url: "test.ashx", data: postData, dataType: "json", success: function(data, dataType){ $("span.testspan").text(data.value); } }); }); }); しかし、テキストボックスの値は取れるのですが、チェックボックスが どうやっても「on」という値でPOSTされて来てしまうので、困っています。 きちんと値を取るにはどのように書けば良いか、ご教授いただけないでしょうか。
- ginfix
- お礼率34% (330/962)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<input>にvalue属性をセットしてください。
関連するQ&A
- phpに値が送られない
PHP側に値が送られなくて困ってます！！ どなたか助けて頂けないでしょうか $(function() { $('a') .click(function() { var id = this.id; alert(id); $.ajax({ type: 'POST', dataType:'json', url:'editor_text.php', data:{ item:id }, success:function(data) { alert(data); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); }); });
- ベストアンサー
- AJAX
- HTTPハンドラでPOSTした値を受け取りたい。
C♯でASP.NET環境にて開発をしています。 htmlにボタン（submit）を置いて、postが来たら、ashx（HTTPハンドラ） のほうでリクエスト値を見てDBから値を取り、結果を返したいと思っています。 結果については、JavaScriptのほうでinnerHTMLを使って反映させる予定です。 オンロードでJavaScriptのメソッドを呼んでるんですが (body onload = "test();"） （input type hiddenでいくつかの値がpostされるように なっています） function test() { var ret = new Ajax.Request('GetValue.ashx'),{ method:'post' … } こんな感じでashxを呼んでるものの、htmlでpostした値が 受け取れません。 context.Request.Querystringで取ろうとしてるんですが… htmlでリクエストした際に、JavaScriptを呼んで、そこでajaxリクエストをしている という作りがまずいのでしょうか？ HTTPハンドラを使うのが始めてなので、頓珍漢なことをしているかも しれませんが、ご教授いただけると助かります。 宜しくお願いします。
- ベストアンサー
- Microsoft ASP
- テキストフィールドの値に変更があったら
テキストフィールド（start_date）では、 $("#start_date").datepicker({dateFormat:'yy-mm-dd'}); として日付入力をします。 その日付フィールドに変更があったら、ajaxaで処理をしたいのです。 そこで、jsに $(document).ready(function() { $(".start_date").change(function(){ var d=$(this).val(); var dataString = 'start_date'+ d; $.ajax({ type: "POST", url: "ajax_org.php", data: dataString, cache: false, success: function(html){ $(".org_id").html(html); } }); }); }); と記述し、変更があったらajax_org.phpを読んで、セレクトボックスの内容を変更させようと しているのですが、このajax_org.phpにテキストボックスの内容がPOSTされないのです。 セレクトボックスに変更があった場合には、valの値が、上記の記述でＰＯＳＴで読めるのですが、 なにがいけないのでしょうか？ ご教授お願いします！！
- 締切済み
- PHP
- AJAX+PHPでセレクトボックスの連動
AJAX+PHPでセレクトボックスの連動をしようとしています。 function SelAjax(){ var x = $('#category1').val(); $.ajax({ type: "POST", url: "category.php", data: {"prm":x}, dataType: "json", success: function(data, status){ $.each(data,function(i) { $('#category2').append($('<option>').attr({ value: i }).text(data[i])); }); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました！"); } }); } としています。 PHP側で $CATEGORY2 = array( 1 => array( 1 => "a", 2 => "b", 3 => "c", 4 => "d", ), 2 => array( 1 => "e", 2 => "f", 3 => "g", 4 => "h", ), 3 => array( 1 => "i", 2 => "j", 3 => "k", 4 => "l", ), 4 => array( 1 => "m", 2 => "n", 3 => "o", 4 => "p", ), 5 => array( 1 => "q", 2 => "r", ), 6 => array( 1 => "s", 2 => "t", 3 => "u", ), ); $ary = array(); if($_POST["prm"]){ for($i=1;$i<=6;$i++){ if($i ==$_POST["prm"] ) $ary = $CATEGORY2[$i]; } } echo json_encode($ary); としています。 一回目に1番目のセレクトボックスを選択してAjaxでPOSTし2つ目のセレクトボックスを生成できました。 しかし、2回目として1番目のセレクトボックスを選択した際に、1回目にPHPから受け取った配列に積みあがってしまいます。 どのように対処すればいいかわかりません。 教えてください。
- ベストアンサー
- AJAX
- jQueryでXMLを操作
jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>
- ベストアンサー
- JavaScript
- Ajaxで画像の削除
Ajaxで画像を削除しようといろいろ試行錯誤しているのですが、 最終的なところで詰まっています。 $(function(){ $("input:button").click(function(){ //クリックされた画像のidを取得 var id = $(this).attr("id"); alert(id); //削除ボタンの無効化 $(this).attr("disabled",true); //idをサーバに送信（PHP側で削除処理）して結果を受け取る $.ajax({ url : "/test/delete_image", dataType : "json", data : {id:id}, type : "post", success : function(data){ if(data.id){ alert(data.id); $("#tblh img#image"+data.id).attr("src","/images/noimage.gif"); } }, error : function(){ alert("通信に失敗しました。"); } }); }); }); codeigniterというフレームワークを利用しPHP側では画像をディレクトリから削除しています。(こちらの動作は問題なし) <?php class Delete_image extends CI_Controller { function __construct(){ // Model クラスのコンストラクタを呼び出す parent::__construct(); $this->load->model('array_constant'); $this->load->helper(array('form', 'url')); $this->load->library('form_validation'); $this->load->library('form_ex'); } function index(){ if(!$this->input->post("id")){ return false; }else{ //画像の削除とDBの画像名称を更新 $arr = array('id' => $this->input->post("id")); } echo json_encode($arr); } } としています。 画像の削除とDBの画像名称は更新されてるのでPHP側は問題ないようです。 jsonの値を受け取って画像を置き換えようとしているのですが、エラー側のほうに 判断されてしまいます。「alert("通信に失敗しました。");」となります。 なぜか分からず困っています。 教えてください。
- ベストアンサー
- AJAX
- jquery PHP 値 ajax
失礼します。現在jqueryで作成した２次元配列をPHP側に渡したいのですが上手くいきません。 jquery側のコンソールで確認した際にはsuccessの処理が行われ配列の中身がjson形式で表示されるのですが、その内容をPHP側で確認しようとするとNULLが返ってきてしまいます。 何卒ご教授よろしくお願いいたします。 html側 $(function(){ // 送るデータ形式はJSONでなければ、PHP側でエラーが出る.のでJSON.stringify()でJSON形式に変換 send_data= JSON.stringify(data); // 送信処理 $.ajax({ url: "ajax.php", // 送信先のPHP type: "POST", // POSTで送る contentType: "Content-Type: application/json; charset=UTF-8", //必須ではなさそうだが、サーバ側との整合のために明示しておいた方がよい。 // dataType: 'json', //受信形式 必須ではなさそうだがサーバ側との整合のために明示しておいた方がよい。 data:send_data //JSON形式の送信データ }).success(function(data, status, xhr) { // 通信成功時の処理 console.log("success"); console.log("data ="+data); console.log("status ="+status); console.log("xhr ="+xhr); }).error(function(xhr, status, error) { // 通信失敗時の処理 console.log("error"); }).complete(function(xhr, status) { // 通信完了時の処理 console.log("fin"); }); }) }) PHP側 二通り試してみました。 <?php //php://inputはPOSTの生データを取得できる $json = file_get_contents("php://input"); //JSON形式データをPHPの配列型に変換 $data = json_decode($json); var_dump($data) ; //POSTできたデータを格納 $hoge = $_POST['data']; var_dump($hoge);
- ベストアンサー
- AJAX
- 変数に値を引き渡すについて
Win2000、JavaScript です。 入力フォームでチェックボックスがあります。 現在は... －－－－－－－－－－－－－－－－－－－－－－－－－ <script language="javascript"> <!--// var strSelectValue; function SetValueC2(objCheck) { strSelectValue = objCheck.value; } //--> </script> <BODY> <FORM METHOD="POST" NAME="MainForm"> <input type="checkbox" name="C2" value="1" onclick="SetValueC2(this)"> －－－－－－－－－－－－－－－－－－－－－－－－－ のように、同じフォーム上で チェックがされたら SetValueC2() へ 値 "1" を引き渡して、 変数 strSelectValue に値を入れています。 それを、 同じフォーム上ではなく function SetValueC2(objCheck) { strSelectValue = objCheck.value; } の部分を別ファイル(.js)へ引き渡ししたいのですが、 引き渡し方がわかりません。 多分 onclick="SetValueC2(this) の部分が違うと思うのですが... どなたか教えてください 宜しくお願いします。
- 締切済み
- JavaScript
- javascriptについて
現在会社のHPのお問い合わせフォームを作っています。 フォーム画面で確認ボタンを押すと、確認画面を表示させたく、 http://blog.material-being.com/portfolio/auto_confirm/ こちらのページのjavascriptをつかって、作ってみたのですが、 書かれているソースで分からないところがあります。 switch ($(this).attr('type')) { //--------------------------------- // hidden, button, submit：何もしない //--------------------------------- case 'hidden': case 'button': case 'submit': break; //--------------------------------- // checkbox, radio：選択されたラベルの値を取得 //--------------------------------- case 'checkbox': case 'radio': var checkOrRadioName = $(this).attr('name'); //同じName属性の要素を既に処理していなければ if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) { checkOrRadioNames += checkOrRadioName + ','; // x+= y → x = x + y var checks = ''; $(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() { //チェックボックスのチェック要素の選択。 if(getLabelCR) { //ラベルの値を取得する場合 var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html(); }else{ //Valueの値を取得する場合 var checkOrRadioVal = $(this).val(); } if(checks == '') { checks += checkOrRadioVal; }else{ checks += ',' + checkOrRadioVal; } }); $(formClass + ' [name="'+checkOrRadioName+'"]:last').after('<span class="autoConfirmVal">'+ checks +'</span>'); } $('label[for="'+$(this).attr('id')+'"]').css('display', 'none'); break; //--------------------------------- // password：入力文字を"*"記号に置き換える //--------------------------------- case 'password': $(this).after('<span class="autoConfirmVal">'+ $(this).val().replace(/./g, '*') +'</span>'); break; default : $(this).after('<span class="autoConfirmVal">'+ $(this).val() +'</span>'); } このradio部分がよくわかりません。 (1) var checkOrRadioName = $(this).attr('name'); if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) { これは、同じものを検索しているのように見えるのですが、、-1になるのでしょうか？ (2) $(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() { var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html(); 上記の大括弧は何を意味するのでしょうか？ forとはなんでしょうか。 (3) .eachは繰り返しなのでしょうか？ 以上、よろしくお願いいたします。
- 締切済み
- JavaScript
- チェックボックスとテキストボックスを連動させたい
JavaScriptでチェックボックスにチェックが入るとテキストボックス自動で数字の1が入る仕組みを作っています。 以下のソースまではかけたのですが 列はそれほどないのですがと行数が多数存在します。 ファンクションが一つで済む方法はありませんでしょうか。 またデータを配列で送信したいのですが配列ですと動きません。 是非教えて頂けると幸いです。 <SCRIPT LANGUAGE="JavaScript"> function check1(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.data1[1].value = radio.value; form.data1[2].value = radio.value; form.data1[3].value = radio.value; form.data1[4].value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.data1[1].value = ""; form.data1[2].value = ""; form.data1[3].value = ""; form.data1[4].value = ""; } } function check2(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.val5.value = radio.value; form.val6.value = radio.value; form.val7.value = radio.value; form.val8.value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.val5.value = ""; form.val6.value = ""; form.val7.value = ""; form.val8.value = ""; } } </SCRIPT> <FORM METHOD="POST"> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check1(this)">チェック1<BR> <INPUT NAME="data1[1]" SIZE="1"> <INPUT NAME="data1[2]" SIZE="1"> <INPUT NAME="data1[3]" SIZE="1"> <INPUT NAME="data1[4]" SIZE="1"><br> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check2(this)">チェック2<BR> <INPUT NAME="val5" SIZE="1"> <INPUT NAME="val6" SIZE="1"> <INPUT NAME="val7" SIZE="1"> <INPUT NAME="val8" SIZE="1"> </FORM>
- ベストアンサー
- JavaScript
