onClick属性の使用方法とボタンのdisabled属性について

このQ&Aのポイント
  • form要素内のボタンには、onClick属性を使用することができます。この属性を使うことで、ボタンがクリックされた際に指定された処理が実行されます。
  • ボタンにdisabled属性が設定されている場合、そのボタンはクリック不可となります。つまり、disabled属性が付与されたボタンは押しても反応しません。
  • このフォームの場合、disabled属性が設定されているため、ボタンをクリックしても何も起こりません。また、form要素のaction属性が指定されていないため、どこにデータが送信されるかはわかりません。
回答を見る
  • ベストアンサー

onClick="this.form.submit

・下記のようなformがあるのですが、 onClick="this.form.submit();" disabledの意味を教えてください ・クリックしたら、このフォーム内容を送信? ・アクション先も指定していないのに、処理はどこへいくのでしょうか? ・また、disabledは? ずっと押せない? <form name="hoge" method="POST"> <input name="hoge" type="button" class="button" value="piyo" onClick="this.form.submit();" disabled> </form>

  • re97
  • お礼率80% (601/744)

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

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

>・クリックしたら、このフォーム内容を送信? うん、this.form.submit();はこのフォームをsubmitとそのまま解釈すれば良い。 >・アクション先も指定していないのに、処理はどこへいくのでしょうか? これはactionの指定が無ければ自身に送信。パラメータを送信しつつリロードみたいな動き。 >また、disabledは? ずっと押せない? これは二回クリックされることを回避させている。 表示されているページがボタンをクリックするとリロードされるから一瞬押せなくなるけどまたパラメータ送信後、ページが表示されたときはまた押せる状態になっている。

re97
質問者

お礼

回答ありがとうございました。 大変参考になりましたー

その他の回答 (1)

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

>>クリックしたら、このフォーム内容を送信? そう >>アクション先も指定していないのに、処理はどこへいくのでしょうか? このままだとリロード 多分後からJSで指定してあげるつもり >>また、disabledは? ずっと押せない? このままだとそう 多分後からJSで有効化するつもり

re97
質問者

お礼

回答ありがとうございましたー

関連するQ&A

  • submitではなくbuttonで送信

    事情があり、submitではなくbuttonでフォームのデータを送信したいのですが、以下のように書くとbuttonでは4567が送信されません。 <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="submit" name="bbb" value="4567"> </form> ↓ <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="button" name="bbb" value="4567" onclick="submit();" > </form> submitと同じように、bbbのデータ4567も送信するにはどのように書けばよいのでしょうか? 宜しくお願いします。

  • 複数ボタンを制御出来る2度押し防止ボタン

    HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。 【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。 ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。

  • <FORM> </FORM> の中に さらに <FORM> </FORM>があるときのSUBMITボタンについて

    今、 <FORM ACTION="aaa.asp" METHOD="POST" Name="form1"> <input type="SUBMIT" value="ボタン1"> <FORM ACTION="bbb.asp" METHOD="POST" Name="form2"> <input type="SUBMIT" value="ボタン2"> </FORM> </FORM> としていて、ボタン2を押すとbbb.aspに 飛んでほしいのでに、aaa.aspに飛んでしまいます。 こういう場合どのようにすればよいのでしょうか? それぞれのボタンは hidden の値をそれぞれの フォームの中の値を渡したいので どうしてもSubmitがいいのです。

    • ベストアンサー
    • HTML
  • formの中で別のactionをもったsubmitボタンの設置。

    formの中で別のactionをもったsubmitボタンの設置。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>sample</title> <script language="JavaScript" type="text/javascript"> <!-- //<クリックした時に実行される関数> //*** 確認画面A function func1(form){ document.form1.check[].value =form.check[].value; document.form1.submit(); } //*** 確認画面B function func2(form){ document.form2.check[].value =form.check[].value; document.form2.submit(); } //--> </script> </head> <body class="index"> <form enctype="multipart/form-data"> <input type="check" name="test[]" value="0">0 <input type="check" name="test[]" value="1">1 <input type="check" name="test[]" value="2">2 <input type="button" onClick="func2(this.form)" value="確認B"> <input type="button" onClick="func1(this.form)" value="確認A"> </form> <!-- sousin.php画面へ --> <form method="post" name="form1" action="sousin.php" enctype="multipart/form-data"> <input type="hidden" name="check[]"> </form> <!--- text.php画面へ ---> <form method="post" name="form2" action="text.php" enctype="multipart/form-data"> <input type="hidden" name="check[]"> </form> </body> </html> 上記のように記述し、フォームの中に別のactionをもったsubmitボタンを設置しました。 チェックボックスで何と何がチェックされたかを渡したいのですが、エラーが発生します。 おそらくjavascript内の構文でcheck[]と記述してるからだと思いますが、 どのようにすれば受け渡すことができるのでしょうか。 checkのみにすると1つの値しか渡せません。

    • ベストアンサー
    • HTML
  • 【FORM】 リンク文字で submit したい

    <FORM METHOD="post" ACTION="tbl_admin.html"> <A HREF="#" onClick="fnc.value='abc'; this.form.submit();">リンク文字</A><BR><BR> <INPUT TYPE="hidden" NAME="fnc" VALUE=""> <INPUT TYPE="submit" VALUE="aaa"> </FORM> と書いてみたのですが エラー:'this.form' は Null またはオブジェクトではありません。 としまいました。 <SELECT>のonChangeで同じような事は出来たのですが、 単なるリンク文字クリックでこのようなことはできないのでしょうか。 可否をご存知の方、また実現方法等ご存知の方 いらっしゃいましたらご教示願います。 よろしくお願い致します。

  • submitボタンを二つ用意したい

    textに入力したものを二つのsubmitボタンで共用できるようにしたいと考えています。 作ってみたのですが、思ったように動かずに困っています。 ↓をどのように修正すれば動くでしょうか。 よろしくおねがいします。 <html> <body> <form name="hoge" action="hoge1.php" method="post"> <div class="ok_left"><input name="kw" value="" /> <script type="text/javascript"> <!-- function pushSubmit (val) { with(document.hoge){ if(val=='2'){ action = 'http://hoge.jp/hoge2.php'; } submit(); } } --> </script> <a href="javascript:pushSubmit('1');"><input name="submit1" type="submit" value="1"/></a> <a href="javascript:pushSubmit('2');"><input name="submit2" type="submit" value="2"/></a> </form> </body> </html>

    • ベストアンサー
    • HTML
  • 複数ボタンのvalueを送れない

    ひとつのフォームで複数のボタンを使う方法を探していたら 次のような方法があるとのことでした。 <form method="post" name="MyForm"> <INPUT TYPE="BUTTON" VALUE="aaa" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> <INPUT TYPE="BUTTON" VALUE="bbb" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> </form> これで、ボタンによってVALUEを渡せるのかと思いきや、 飛んでいきませんでした・・・ 複数ボタンを用意して、ボタンによってその VALUE値を渡す方法がありませんでしょうか?

    • ベストアンサー
    • CGI
  • 二つのform分について

    <form action="./test.cgi" method="POST"> <div>テスト:<input type="text" size="70" name="keyword" value=""></div> <input type="submit" value="OK"> </form> <FORM method="post" action="#"> 外側だけですが、遊んでくださいね16進数で!!!! <INPUT tabindex="10" accesskey="x" value="" name=BGC size=7> <INPUT tabindex="20" accesskey="x" onclick="document.bgColor='#' + document.forms[0].BGC.value" onkeypress="document.bgColor='#' + document.forms[0].BGC.value" type=button value="色変更"> </FORM> どちらも一つずつだと正常に動作します。 何か同じものが二つあるのでしょうか 何かが重複しているので 最初のformは動くけど、 2番目のformが動かないのでしょうね。 どうすれば二つとも動くでしょうか。 よろしくお願いいたします。

  • 一つのformで、複数のaction指定

    レイアウトなどの関係で、formの配置が基本とは異なるものになってしまい、うまく動作させる方法が見つからず困っています。 現在は <form> <input type="checkbox" name="select[]" value="●●"> <input type="checkbox" name="select[]" value="●●"> <input type="checkbox" name="select[]" value="●●"> </form> …… <form method="POST" action="A.php"> <input type="submit" name="aa" value="あああ"> </form> <form method="POST" action="B.php"> <input type="submit" name="bb" value="いいい"> </form> <form method="POST" action="C.php"> <input type="submit" name="cc" value="ううう"> </form> <form method="POST" action="D.php"> <input type="submit" name="dd" value="えええ"> </form> のようになっていて、チェックボックスの値を送信したいのは、Dのボタンを押したときだけPOSTされるようにしたい状態です。 この値を取得する方法か、もしくは <form method="POST" action="(ボタンに応じたもの)"> <input type="checkbox" name="select[]" value="●●"> <input type="checkbox" name="select[]" value="●●"> <input type="checkbox" name="select[]" value="●●"> …… <input type="submit" name="aa" value="あああ"> <input type="submit" name="bb" value="いいい"> <input type="submit" name="cc" value="ううう"> <input type="submit" name="dd" value="えええ"> </form> このように、一つのフォームの中に埋めてしまい、actionに入る値をボタンによって分ける方法はありませんでしょうか? もしくは他の方法でも構いません。 お分かりの方がいましたら、是非ご教授お願いいたします。

    • 締切済み
    • PHP
  • form変数の初期化

    <br /><b>Notice</b>: Undefined index: your_name in <b>C:\xampp\htdocs\test\index.php</b> on line <b >83</b><br /> 入力画面で上記のエラーが解決しません。 どうすればいいでしょうか? 入力画面 <?php $_POST = array(); ?> <form method="post" action="./form_check.php"> <div class="element_wrap"> <label>氏名</label> <input type="text" name="your_name" value="<?php echo $_POST["your_name"]?>"> </div> <div class="element_wrap"> <label>メールアドレス</label> <input type="text" name="email" value=""> </div> <input type="submit" name="btn_confirm" value="入力内容を確認する"> </form> 確認画面 <?php $your_name = $_POST["your_name"]; ?> <form method="post" action="./test.php"> <div class="element_wrap"> <label>氏名</label> <p><?php echo $your_name; ?></p> </div> <div class="element_wrap"> <label>メールアドレス</label> <p><?php echo $_POST['email']; ?></p> </div> <input type="submit" name="btn_submit" value="送信"> </form> <form method="post" action="./index.php"> <!--<input type="button" name="btn_back" onclick="history.back()" value="戻る">--> <input type="submit" name="btn_back" value="戻る"> <input type="hidden" name="your_name" value="<?php echo $_POST['your_name']; ?>"> <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>"> </form>

    • 締切済み
    • PHP

専門家に質問してみよう