firefoxでvalue取得に失敗する
- 質問文章からはfirefoxでvalue取得に失敗する問題についての質問です。
- IEでは意図通りにpasswordとpassword2の内容を表示できるが、Firefoxではエラーが発生する。
- firefoxへの対応方法についてのアドバイスを求めています。
- ベストアンサー
firefoxでvalue取得に失敗する。
firefoxでvalue取得に失敗する。 ２回パスワードを入れさせるテキストボックスで、 下記のようなhtml，JavaScriptを書いております。 【sample.html】 <html><body> <form action="login.php" name="form1" method="post"> パスワード： <INPUT type="password" name="password" value"> <br> パスワード再入力： <INPUT type="password" name="password2" value=""> <br> <BUTTON type="button" name="btn1" id="btn1" onclick="clickbtn();">更新</button> </form> </body></html> 【sample.js】 function clickbtn() { alert(form1.password.value); alert(form1.password2.value); if(form1.password.value != form1.password2.value){ alert("パスワードが違います"); return 1; } } ボタンを押した時、IEでは意図通りにpasswordとpassword2に書かれた内容を 表示してくれるのですが、FireFoxではエラーがでます。 エラーコンソールの内容は「form1.password undefined」です。 パスワード用テキストボックスタグに id=password を追加、 パスワード再入力用のテキストボックスタグ id=password2 を追加する事で 意図した動作をfirefoxでも得る事が出来ましたが、 これはJavaScriptは、firefoxではタグをnameではなくidで区別すると解釈して良いのでしょうか？ また、id値を追記する事で動きはしたのですが、エラーコンソールに 「グローバルスコープでIDまたはname属性値により要素を参照しています。 変わりにW3C標準のdocument.getElementByID()を使用してください。」 という警告が出まして、「id値追記するだけでよいのか？」と悩んでいます。 alert(document.getElementByID(”form1.password”)); という記述をしても警告が消えないので、警告文の通りにするのが正しいとも思えません。 firefoxへの対応を皆様がどのようにされているのか、教えていただきたく質問いたします。 宜しくお願いします。
- wendy0303
- お礼率89% (81/91)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
function clickbtn() { alert(document.getElementById("password").value); alert(document.getElementById("password2").value); if(document.getElementById("password").value != document.getElementById("password2").value){ alert("パスワードが違います"); return 1; } } のように、引数には、id= の文字列を指定して使います。大文字小文字にも注意。getElementByIDじゃありませんよ。 元の「form1.name属性」でも動きましたけど。Firefox3.6.3
関連するQ&A
- formについてFirefoxで動作させたい
IEとGoogle Chromeでは動作が正常に確認できました。 Firefoxでも正常に動作するようにしたいのですが、何処を直せば良いのでしょうか？ クリックしてもボタンが動いてないようなのですが・・・・。 すみません、どなた様かご存知でしたら、どうぞよろしくお願い致します。 <script type="text/javascript"> function PassChack(){ var passWord = passF.pass.value; if(passWord ==""){ alert("パスワードが未入力です"); return false; }else if(passWord == "aaa"){ location.href = "aaa.html"; }else{ alert("パスワードが間違っています"); } } </script> <form method="post" id="passF"> <input type="text" name="pass" id="pass" size="30" value="" /><input type="button" value=" 実行 " onclick="PassChack();return false;" /> </form>
- ベストアンサー
- JavaScript
- フォームボタンのvalueを渡すにはどうしたらいいのでしょうか？
下記のソースのように「word」というテキストフィールドの 入力チェック後ボタンのvalueをword.phpに渡したいのですがどのようにしたらいいのでしょうか？ 入力チェックをせず input type="button"ではなくinput type="submit" にするとword.phpに渡せるのですが・・・ ようはＡ、Ｂ、Ｃそれぞれのボタンを押した時で word.phpでbtnのvalueをPOSTで受け取り 処理をvalue A、B、Cで分岐させたいんです。 よろしくお願いします。 <html> <head> <SCRIPT language="JavaScript"> <!-- function chk(chkfrm){ var tmp = chkfrm.word.value.length; if(tmp > 50 ){ alert("文字数が多すぎます"); } else{ chkfrm.submit(); } } //--> </SCRIPT> </head> <body> <form name="form" method="post" action="word.php"> <input name="word" type="text" id="word"> <input type="button" name="btn" value="A" onclick="chk(this.form);"> <input type="button" name="btn" value="B" onclick="chk(this.form);"> <input type="button" name="btn" value="C" onclick="chk(this.form);"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 2度押し防止のJavascript
先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様 有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。 それが末尾のスクリプトになります。 質問 買いボタンの2度押し防止は出来ていますが、100購入 200購入 300購入の連続買いができてしまう状況です。 この連続買いの防止のjavascriptをご教示いただければと思います。 当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが 100購入 200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************
- ベストアンサー
- JavaScript
- フォームで条件によってボタンの処理を変える
フォームでパスワードを入力してもらい、確認用にもう一度入力した際、 誤入力があればアラート、正しく同じ値が入力されればsubmitにしたいと思っており、下記のようなコードを書きましたが、同じ値を入力した際にIEでエラーがでてしまいます（FirefoxやSafariでは動きます）。 当方Javascriptの知識に乏しく、どなたか助けていただけませんでしょうか？宜しくお願いいたします。 <html> <script language="JavaScript"> <!-- function passCheck(){ pass1 = document.free.PASSWORD.value; pass2 = document.free.PASSWORD2.value; if(pass1!==pass2) {alert("入力された確認用パスワードが違います");} else if(pass1==pass2) {document.free.submit.type="submit";} } //--> </script> <body> <form method="POST" action="submit.cgi" name="free"> <p> <input type="password" size="20" name="新パスワード" id="PASSWORD"><br> <input type="password" size="20" name="新パスワード（確認）" id="PASSWORD2"> </p> 確認のため、上記と同じパスワードをご記入ください。 <p><input type="button" name="submit" value="確認する" onclick="passCheck()"/></p> </form> </body> </html>
- ベストアンサー
- JavaScript
- AJAXで新規表示されたボタンが稼働しない
下記のようなものを作りました。 1 通常は下記のような <100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>
- ベストアンサー
- JavaScript
- javascriptでinput属性の入力
複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>
- ベストアンサー
- JavaScript
- イベントハンドラメソッドに関して教えてください
お世話になります。イベントハンドラメソッドについて教えてください。 -----JS----- function f() { window.alert("Click"); } ---(1) document.myform.mybtn2 = function(){ ---(2) window.alert("Click"); } -----HTML----- <form id="myform" name="myform"> <input type="button" id="mybtn1" name="mybtn1" value="Click" onclick="f()" /> ---(1) <input type="button" id="mybtn2" name="mybtn2" value="Click" /> ---(2) </form> Q:上記のコードで(1)の場合だと正常にalert画面が出ますが、(2)の場合だと何も起こりません。 FirefoxのJavaScriptコンソールで調べると下記のエラーが表示されます。 documnet.myform has no propaties なぜエラーが発生するのか分からずに困っています。 解決の手がかりでもよいので教えてください。
- ベストアンサー
- JavaScript
- ラジオのチェックでフォーム表示、PHPへPOSTさせたい
見よう見まねで作成したのですが、わからないので教えてください。 ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。 「OK」で表示、「NO」で非表示はなんとかできましたが、問題が２点あります。 １．test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。 「NO」のほうにcheckedをいれてみましたがダメでした。 ２．phpへとばず、test.htmlにとんでしまいます。 宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript"> <!-- function Sel(me){ if(me.value=="1"){ me.form.account.disabled=false; me.form.password.disabled=false; me.form.btn.disabled=false; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.account.disabled=true; me.form.password.disabled=true; me.form.btn.disabled=true; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display='none'; } } //--> </script> <form name="Quick1"> <form name="send" method="POST" action="aaa.php"> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">OK <input type="radio" name="AB" value="2" onclick="Seｌ(this)">NO</td></tr> <tr id="SelA"> <td></td><td> <input type="text" size="30" maxlength="5" name="account" ><br> <input type="password" size="24" maxlength="5" name="password" > <input type="submit" name="btn" value="ログイン"> </form> </td></tr> <tr id="SelB" style="display:none">・・・</form>
- ベストアンサー
- JavaScript
- 同名ボタンのクリック時要素番号の取得方法
<html> <head> <script Language="JavaScript"><!-- function doSentaku(btn) { //クリックされたボタンの要素番号が知りたい alert(btn.name); } // --></script> </head> <body> <form name="mainWin"> <input type="button" value="配列ボタンテスト1" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト2" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト3" name="testbtn" onClick="javaScript:doSentaku(this)"><br> </form> </body> </html> ----------------------------------------------------------------------------------------- このようなFromがあった場合、nameが同じである時、javaScriptではボタンのElemetは配列扱いになるかと思うのですが、doSentaku関数内ではnameは取得できるとして、クリックされた要素番号は取得できるのでしょうか？ なお、訳ありでdoSentaku関数のボタンonClickの関数引数はすべて同じ定義しかできないものとします。 つまり個々ボタンを識別する値は指定できないと言うことです。 まことに申し訳ありませんが、どうかアドバイスのほどよろしくお願いします。
- ベストアンサー
- JavaScript
- FireFoxについて
JavaScriptを勉強中のものです。 単純に、『テキストボックスの文字色を変えるだけ』のスクリプトを組んだのですが、 ＩＥでは動いて、FireFoxでは動かない、という状況に陥っています。 ソースは下記のとおりです。 -------------------------------------------------------------------------------------------------------------------- <html> <head> <Script Language=JavaScript> function js_ClickBtn_Blue() { document.getElementsByName("txt1")(0).style.color = "blue"; } function js_ClickBtn_Red() { document.getElementsByName("txt1")(0).style.color = "red"; } </Script> </head> <body> <input type=text name=txt1 value="あいうえお"> <br> <br> <input type=button name=btn1 value="青" style='color:blue;' onClick='js_ClickBtn_Blue();'> <input type=button name=btn1 value="赤" style='color:red;' onClick='js_ClickBtn_Red();'> </body> </html> -------------------------------------------------------------------------------------------------------------------- なぜ、IEでは動いて、FireFoxでは動かないのでしょうか？ 【知りたいこと】 ・FireFoxで動かない理由 ・FireFoxでテキストボックスの文字色をJavaScriptで変更するには どういった実装をしたらよいか ちなみに環境は、 【パソコンのＯＳ】Windows7 Enterprise 【ブラウザ】 Internet Explorer 8 FireFox 40.0.2 です。 知っている方いましたらご教授お願いします。 以上です。
- 締切済み
- JavaScript
お礼
notnotさん、ありがとうございます。 おかげさまで、警告無しの期待動作と、 これで良いという確信を得る事が出来ました。 >name属性でも動きました 確かに、動きますね。。 さっきは確かにundefエラーだったのですが、 指摘頂いた様な見落としがあったのかもしれません。 しかしそれでも警告は出てしまうので、今回頂けた回答はありがたいです。 どうもありがとうございました。