フィールドを有効にする方法は？

前へ 次へ
このQ&Aのポイント
  • JavaScriptのsubmitボタンを使用してフィールドをdisabledにする方法は簡単ですが、その逆でデフォルトでdisabledにしておいて、入力状況によってenabledにする方法はあるのでしょうか？
  • onsubmitイベントを使用してすべてのフィールドの入力値を調べ、入力が不十分であればfalseを返す方法もありますが、他にはどのような方法が考えられるでしょうか？
  • フィールドを有効にする方法についての他のアプローチについても考えてみましたが、現時点ではこれらの方法が一般的です。
回答を見る
  • ベストアンサー

フィールドを有効(enabled?)にする方法？

こんにちは，よろしくお願いします。 JavaScriptで（submitボタン）フィールドをdisabledにするには， document.getElementById("Submit").disabled ="disabled"; とすればできますが， 逆に，デフォルトでdisabledにしておいて，入力状況によってenabled?（またはnot disabled?）にする方法ってあるのでしょうか？ もちろん，フォームにonsubmitイベントなどを設定しておいて，その際にすべてのフィールドの入力値を調べて，入力が不十分であれば，falseを返すという方法はあると思うのですが…。 思い付きみたいな質問で申し訳ありませんが，よろしくお願いします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

document.getElementById("Submit").disabled ="disabled"; じゃなくて document.getElementById("Submit").disabled =true; だと考えればよいですね。 有効にするには document.getElementById("Submit").disabled =false;

emikouji
質問者

お礼

yambejpさん，ありがとうございます。 うまくいきました。助かりました。また何かありましたらよろしくお願いします。 本当に，ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストボックスを無効にすると値が取得できない

    javascriptでこのようにテキストボックスを無効に してフォームを送信するとphp側でvalueの値が取得できないのですが、入力無効にすると valueは送られないんでしょうか？ <form> <input type="text" id="sample" name="sample" value="値" /> </form> スクリプト .document.getElementById('sample').disabled = true; valueにはphpで値をセットし、それをテキストボックスで編集できないようにして 値を飛ばそうとしたのですがテキストボックスのvalueの値が来てないようです。 自分なりに考えたんですが、送信する瞬間だけ（submitボタンが押された時） テキストボックスを有効に戻すようにコードを書いているのですが これ以外で何かありますか？ ---このように対処--- <form onsubmit="return disb()"> <input type="text" name="sample" value="値" /> </form> スクリプト document.getElementById('sample').disabled = true; function disb(f){ f.sample.disabled = false; }

  • Javascriptによるフォームの選択表示について教えてください。

    Javascriptによるフォームの選択表示について教えてください。 概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。 別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。 問題は、(1)→１箇所、(2)→３箇所、(3)→５箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。 ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。 実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。 以下はソースです。 ■Javascript <script type="text/javascript"> function func1() { document.getElementById("sele1").style.display="inline"; document.getElementById("sele1").disabled=false; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func2() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="inline"; document.getElementById("sele2").disabled=false; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func3() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="inline"; document.getElementById("sele3").disabled=false; } </script> ■CGI(HTML)側 <form action="xxx"> <table border=0 cellpadding=5 cellspacing=2 width=500> <p>発送先が２箇所以上の場合はこちらから選択ください。 <input type="radio" value="1" onclick="func1('block')" />１箇所</label> <input type="radio" value="2" onclick="func2('none')" />２箇所</label> <input type="radio" value="3" onclick="func3('none')" />５箇所</label> </p> </table> <table id="sele1"> </table> <table id="sele2"> </table> <table id="sele3"> </table> </form> table内容は省略しています。 説明が下手ですがどうかご教授ください。宜しくお願いします。

  • 結果がfalseでもsubmitしている？

    チェックボックスにチェックが入ったら テキストエリアに入力ができて、その入力チェックをする というスクリプトを書いていたのですが、 一番目のチェックボックスにチェックが入ったら 入力可能というところは出来るのですが 入力チェックで結果がfalseになっているのに submitされてしまいます。 どこか間違っているのでしょうか。 <html> <SCRIPT language="javascript"> <!-- function Yuukou(){ if(document.DOWN.A_CK.checked == true) { document.DOWN.A_SEL.disabled = false; } else{ document.DOWN.A_SEL.disabled = true; } } function check(){ if(document.DOWN.A_CK.checked == true) { if(document.DOWN.A_SEL.value =="") { alert("シリアル番号を入力してください") return false; } （略） } } //--> </SCRIPT> <FORM name="DOWN" action="A.cgi" onSubmit="check()" method="POST"> <INPUT type="checkbox" name="A_CK" id="A_CK" onClick="Yuukou()"> <INPUT size="20" type="text" disabled="disabled" name="A_SEL"> <input type="submit"> </form> </html>

  • disabledのフィールドパラメータについて

    以下のようなフォームでdisabledになったテキストフィールドは、 値として渡されるのでしょうか？ <form> <input type="text" name="test1" value="a" disabled> <input type="submit"> </form>

    • ベストアンサー
    • HTML
  • radioボタンの値の取得の仕方？

    こんにちは，よろしくお願いします。 ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。 そこで <input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢Ａ <input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢Ｂ とし，javascriptのxxx　functionの中では， if(document.getElementById("AAA").value == 0){ document.getElementById("BBB").disabled = true; }else if(document.getElementById("AAA").value == 1){ document.getElementById("BBB").disabled = false; } } としてみたところ，いつも　document.getElementById("AAA").value　の値が０のままでいくら選択肢Ｂをクリックしても切り替わりません。 一体何が悪いのでしょうか。教えてください。よろしくお願い申し上げます。

  • フォームの値をjavascriptでsubmitする時に

    <form name="myForm" action="" id="myID" onsubmit="return false;"> <input type="hidden" name="v1" value="" /> </form> というようなフォームがあり、 <script language="javascript"> function submitTest(v) { document.myForm.v1.value = v; document.myForm.submit(); } </script> のような形でsubmitする際に、<form>の属性で指定したid="myID"って javascript関数内でどのようにすれば渡せるのでしょうか?? 何か質問がおかしかったらご指摘願います。

  • checkboxクリック時、SQLを実行し、ボタンの有効・無効を判定する方法について

    checkboxクリックをクリックすると、その時点でSQLを実行し、その結果によりボタンの有効・無効を決めたいと思っております (あるチェックボックスが選択されている状態では、特定のボタンを無効化し、選択できないようにしたいと思います)。 しかし数点詰まってしまった所がございましたのでアドバイスいただける方がいらっしゃいましたら、よろしくお願いします。 私が試した所、下記の条件付きであればデータベースの中身を見て、その内容をボタンに反映させる事が出来ました。 【現状】 1. 予めSQLを実行して結果を変数に格納しておき、checkboxクリック時にその変数を呼び出す。 2. checkboxは1つのみ(現在はデータベースの最終行の値でボタンの有効・無効が決定されております)。 それを下記のように修正したいと思ったのですが、方法が分かりませんでした。 【やりたいこと】 1. SQLは予め実行するのではなく、checkboxクリック時に実行したい。 2. checkboxが3つあった場合、1つめのcheckboxクリック時はテーブルの1行目、2つめのcheckboxクリック時はテーブルの2行目の値を見に行きたい。 【テーブル構造(mysql使用)】 －－－－－－－－－－－－－－－－－ ｜　　　｜field1｜field2｜field3｜ －－－－－－－－－－－－－－－－－ ｜１行目｜　1　 ｜　0　｜　1　 ｜ －－－－－－－－－－－－－－－－－ ｜２行目｜　0　 ｜　1　｜　1　 ｜ －－－－－－－－－－－－－－－－－ ｜３行目｜　1　 ｜　0　｜　0　 ｜ －－－－－－－－－－－－－－－－－ 【ソースコード】 <?php $connect = mysql_connect('localhost', 'データベースユーザー名', 'データベースユーザーパスワード名'); mysql_select_db('データベース名', $connect); $query = mysql_query("SELECT * FROM テーブル名", $connect); while ($row = mysql_fetch_array($query)) { $ans1 = $row["field1"]; $ans2 = $row["field2"]; $ans3 = $row["field3"]; } mysql_close($connect); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <script type="text/javascript"> function checkbox_func() { var ans1 = "<?php echo $ans1 ?>"; var ans2 = "<?php echo $ans2 ?>"; var ans3 = "<?php echo $ans3 ?>"; if (document.getElementById("checkbox_form").check1.checked) { // 0なら有効, 1なら無効 if (ans1 != 0) { document.getElementById("button1").disabled = true; } else { document.getElementById("button1").disabled = false; } if (ans2 != 0) { document.getElementById("button2").disabled = true; } else { document.getElementById("button2").disabled = false; } if (ans3 != 0) { document.getElementById("button3").disabled = true; } else { document.getElementById("button3").disabled = false; } } else { document.getElementById("button1").disabled = false; document.getElementById("button2").disabled = false; document.getElementById("button3").disabled = false; } } </script> </head> <body> <form id="checkbox_form" name="checkbox_form" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> <p>チェックボックス1<input type="checkbox" name="check1" value="check1" onclick="checkbox_func()" onkeypress="checkbox_func()" /></p> </form> <input id="button1" type="button" value="ボタン１" /> <input id="button2" type="button" value="ボタン２" /> <input id="button3" type="button" value="ボタン３" /> </body> </html> 以上、よろしくお願いします。

    • ベストアンサー
    • PHP
  • javascriptで二重送信防止

    javascriptでの二重送信防止（submitボタンの無効化）ができません。 【HTML】 <form name="fm" method="post" onsubmit="return dclk()"> <input type="submit" name="smt" value="送信" /><br /> </form> 【javascript】 function dclk(){ document.fm.smt.disabled = true; return false; } これだと、サブミットボタンを押すとボタンが無効化され、その後、送信自体が キャンセルさるのですが、これだと送信自体ができないので意味がありません。 これはなんとか意味はわかります。 そこでreturn falseを省くと送信されると同時にサブミットボタンが無効化されるのかな？と思ったら、 今度は送信されるようですが送信されたと同時にボタンが無効化されません。 どうすべきでしょうか？ ネットで調べたらいろいろな方法があるようで、上記のHTMLとjavascriptのコードで なんとかならないでしょうか？

  • 画面制御

    PHPEXCELを使っての出力をしています。 この際に、DBからの読み込みに時間がかかっており、ユーザーより 出力完了までの間、画面上のボタンをすべて押せないようにしてほしい との要求があったのですが、実現できずに困っています。 良い方法は無いでしょうか？ ・show.html …中略… <script type="text/javascript"> function doDownloadExcelFile { document.form1.action = 'downloadExcelFile.php'; document.form1.submit(); } </script> …中略… <input type="button" value="Excel出力" onClick="doDownloadExcelFile()"> …中略… ・downloadExcelFile.php 　　→画面で設定された条件通りにDBを読み込んで、 　　　　EXCELファイルを出力する。 Javascriptでsubmitの前にdisabled=trueとし、後ろでdisabled=falseとすると 一瞬でdisabled=falseが実行されてしまいます。。。 何か良い方法はありますでしょうか。 宜しくお願い致します。

    • 締切済み
    • PHP
  • JavaScriptでコンストラクタについて

    現在、JavaScriptを勉強中なのですが、 コンストラクタについて質問です。 下記のようなコードの場合、document.getElementByIdで取得したID 以外、使いまわしが出来ませんが、 コンストラクタを使って、１ページで複数使用出来るようにするには、 どのように記述すれば良いのでしょうか？ //-----JavaScript----- function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } var c,y,m,d; addEvent(window,"load",function(){ c = document.getElementById("customer_birthday_c"); y = document.getElementById("customer_birthday_y"); m = document.getElementById("customer_birthday_m"); d = document.getElementById("customer_birthday_d"); if(c.options[0].selected == true){ y.disabled = true; m.disabled = true; d.disabled = true; } }); //-----JavaScript----- どなたかご教授ください。 宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する