数によってボタンを有効化したい
- アメ玉の販売をするために、A、B、Cという3種類の個数が合計数Dと同じになるようにしたいです。
- ボタンを押すためにはA、B、Cの値の和が100以下である必要があります。
- イベントハンドラは2つ続けて書くことはできません。
- ベストアンサー
数によってボタンを有効化したい
先日もこちらでお世話になりました。 例えばアメ玉の販売をするのにA,B,C,3種類があり、合計数がDと同じにならないと実行ボタンが押せないようにしたいのですが、うまくいきません。 <head> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=parseInt(f.A.value); var valB=parseInt(f.B.value); var valC=parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD || valA+valB > valD || valB+valC > valD || valA+valC > valD){ alert('A,B,Cの和は100以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio(valD){ if (valD.value == valA+valB+valC || valA+valB || valB+valC || valA+valC ) valD.form.submit.disabled = false; else valD.form.submit.disabled = true; } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉 </b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submit" disabled> </form> </body> 詳しくわからないのですが、イベントハンドラは2つ続けて書けないのでしょうか。。。 どなたかお教え頂けたら幸いです。
- josephat
- お礼率57% (22/38)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
>イベントハンドラは2つ続けて書けないのでしょうか。。。 onChangeを２つ書くというのはあまり美しくないですね。 動かないとは断言できませんが、たぶん動かないのでは？ いずれにしろやらないほうがよいでしょう。 ご希望の用件はセミコロンでつなげばよいです。 onChange="funcA();funcB()" ただし、funcA()内でvar宣言した変数はローカル変数になるので funcBで参照できません。 この場合は、onChangeではcheck()のみ呼び出し、その中で調整する方が 効率的ですね。 （グローバル変数が大好きならそちらで管理する手はありますが、 おすすめはできません） その他微調整をするとこんな感じです。 <head> <style type="text/css"> .num{ text-align:right; } </style> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=f.A.value==''?0:parseInt(f.A.value); var valB=f.B.value==''?0:parseInt(f.B.value); var valC=f.C.value==''?0:parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD){ alert('A,B,Cの和は'+valD+'以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); return false; } f.submitbutton.disabled = (valD != valA+valB+valC); } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉 </b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)"> <option value = '' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)"> <option value = '' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)"> <option value = '' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submitbutton" disabled> </form> </body>
関連するQ&A
- セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> ５</option> <option value="9"> ９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> ２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10"> <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします
- ベストアンサー
- JavaScript
- JavaScripで使える文字列
JavaScriptで下記のように0～50までの数字を書き出すスクリプトを使いたいのですが、使っているショッピングカートの関係で<select>文の中のnameタグにo-a、o-Aなど、o（アルファベット小文字のオー）と-（ハイフン）を記述しないといけない状態なのですが、o-を記述するとJavascriptが動かなくなります。。。 恐らくハイフンだと思うのですが、プラグラム上の仕様なのでしょうか。。。 A:<select name="o-A" onChange="check(this)"> <option value = '' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select> どなたかおわかりになる方、ご教授頂ければ幸いです。
- ベストアンサー
- JavaScript
- ラジオボタンとプルダウンを連動させたい
ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語） 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScripsのDOMについてなんですが…
閲覧ありがとうございます。 以前にSelectボックスで選んだ値の分だけテキストボックスの生成を行う方法を伺い、生成することが出来るようになりました。 (1)生成したテキストボックスを改行して表示がしたい。 (2)生成したテキストボックスの右隣にSelectボックスを生成し、Selectボックスで１～８の値を扱い、選んだ数値の分のテキストボックスをSelectボックスの右隣に生成するもの。 以下がSelectボックスで選んだ数値の分だけテキストボックスを生成するプログラムです。 <form name="form" action="index2.php"> <select id="factor" onchange="swicthForm(this)"> <option value="0">選んでください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> </select> </form> <br> <script type="text/javascript"> function swicthForm(obj){ var n=obj.nextSibling; while(n){ var m=n.nextSibling; if(n.nodeName=="INPUT" && n.type=="text") n.form.removeChild(n); n=m; } for(var i=0; i<parseInt(obj.value);i++){ var e=document.createElement("input"); e.setAttribute("type","text"); e.setAttribute("name","test"+(i+1).toString()); obj.form.appendChild(e); } } </script> よろしくお願いします。
- 締切済み
- JavaScript
- 変数にフォーム名を指定したい
下のスクリプトは、プルダウンメニューの項目を選択するとフォームにそのvalueを渡すものです。 フォームに original という name を指定しています。 putselect関数の中の document.reg.original の original を直で打つのではなく、 putselectの引数として、指定したのですがどのようにすると良いでしょうか？ JavaScript function putselect(obj){ document.reg.original.value = obj.options[obj.selectedIndex].value; } HTML <form name="reg"> <input name="original"> <select onchange="putselect(this)"> <option >#作品の選択</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </form> <hr> こうなってほしい。 function putselect(obj,フォーム名の変数){ document.reg.フォーム名の変数.value = obj.options[obj.selectedIndex].value; } HTML <form name="reg"> <input name="original"> <select onchange="putselect(this,original)"> <option >#作品の選択</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </form> <hr> これと同じ動作であれば、nameでなくidなどでも構いません。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 見よう見まねで以下のように作成してみたのですが
見よう見まねで以下のように作成してみたのですが 作動しませんでした。 （当方javascript初心者です） どこに問題があるのか、指摘してくださる方を探しています。 極めて初歩的なところで誤っているのだろうと思いますので 質問するのも恐縮なのですが・・・ どなたかよろしくお願いいたします。 ------------------------------------------ <HTML> <HEAD> <script language="JavaScript"> function calc(){ var a = document.form1.001.value; var b = document.form1.002.value; var c = document.form1.003.value; var d = document.form1.004.value; var total = a + b + c + d; document.form1.field.value = total; } </script> </HEAD> <BODY> <BR><BR> <form name="form1"> <Select name="001"> <Option value="10">case1 <Option value="20">case2 </Select>ケース <BR><BR> <INPUT size="15" type="text" name="002">number <BR><BR> <Select name="003"> <Option value="100">volume1 <Option value="200">volume2 <Option value="300">volume3 </Select>ボリューム <BR><BR> <Select name="004"> <Option value="0">N <Option value="50">size1 <Option value="100">size2 <Option value="150">size3 </Select>サイズ <BR><BR> <INPUT type="button" name="calc" value="計算" onClick="calc()"><BR><BR> <input size="15" readonly="readonly" name="field" type="text">total </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- IDの取得、繰り返しに問題があるようなんですが・・・
複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で１つのフォームからならコピーできたのですが これを複数のフォームに対応させるためにforを使ってみたのですが どうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト <html> <body> <script type="text/javascript"> function answerPut(){ for(var i=1; i<=3; i++){ var answer = document.getElementById(id+i); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } } </script> （1）<select name="" id="s1" onChange="answerPut();"> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="" id="s2" onChange="answerPut();"> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う3">う2</option> </select> （3）<select name="" id="s2" onChange="answerPut();"> <option value="あ1">あ3</option> <option value="い2">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </body> </html>
- ベストアンサー
- JavaScript
- javascriptのアラートの表示方法について
javascript初心者です。 javascriptで、計算機を作っていて、数字を入れずに 「＝」（計算）ボタンを押すと、 「未入力です」とアラ－トで表示させたいのですが、 やり方がわかりません。 お手数ですが、ご教示下さい！ よろしくお願いします！！ ※以下、私が作成したものです。 この中のどの部分に、どのような表記をいれたら良いのか、 教えてください。。 <html> <head> <title>計算機</title> <script type="text/javascript"> function Calc() { var a; var b; var c; var ope; a = parseInt(document.form1.textA.value); b = parseInt(document.form1.textB.value); ope = parseInt(document.form1.selOpe.value); switch (ope) { case 1:c = a + b; break; case 2:c = a - b; break; case 3:c = a * b; break; case 4:c = a / b; break; default: break; } document.form1.textC.value = c; } </script> </head> <body> <form name="form1"> <INPUT TYPE="text" NAME="textA"> <select name="selOpe" size=1> <option value="1">＋</option> <option value="2">－</option> <option value="3">×</option> <option value="4">÷</option> </select> <INPUT TYPE="text" NAME="textB"> <input type="button" name="cmdCalc" value="＝" onclick="Calc()"> <INPUT TYPE="text" NAME="textC"> </form> </body> </html>
- ベストアンサー
- Microsoft ASP
- for文の使い方について
こんばんはpiyottiと申します。 forループを使用してtextの値を取得したいと思っています。 「document.myFORM.namei・・・」の「i」をループカウンターとして 「name1、name2・・・」と増やしていきたいのですがうまくいきません。 どうかよろしくお願いいたします。 <script Language="JavaScript"><!-- function calc(form) { n = 0; for (i=0; i<4; i= i+;) n += eval(document.myFORM.namei.value); } // --></script> <form name="myFORM"> 数値１：<input type="text" onChange="calc(this.form, this)" name="name1"> 数値２：<input type="text" onChange="calc(this.form, this) name="name2"> 数値３：<input type="text" onChange="calc(this.form, this) name="name3"> 数値４：<input type="text" onChange="calc(this.form, this) name="name4"><br> </form>
- ベストアンサー
- JavaScript
- プルダウンから飛んだページを別ウインドウで開く方法
初歩的なJavaScriptで申し訳ないのですが、ご教授願いします。 下記のプルダウンのJavaScriptで、例えばヤフーと言う部分を選択し、飛ぶをクリックするとヤフーに飛びますが、その際ヤフーにとんだページを別ウインドウで表示させたいのですが、お分かりの方いらっしゃいましたらこの素人に教えてください・・ <HTML> <HEAD> <script language="javascript"> <!-- function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } //--> </script> </HEAD> <BODY> <form method=post> <select name="navi" size="10" "abc" onChange="document.b.submit()"> <option value="http://www.yahoo.co.jp/">ヤフー </select> <input type=button value="飛ぶ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
yambejp 様 >有難うございます！ イベントハンドラが2つの場合はまた違った書き方になるのですね。。。 全く勉強不足です(><; ご回答大変有難く思います。凄い知識をおもちですね。 また、何かの機会があれば、宜しくお願いします！m(＿＿)m