• 締切済み

はじめまして、javascriptがよくわからないので助けてください。

はじめまして、javascriptがよくわからないので助けてください。 パスワードを入力し、ボタンを押すと次の画面にいけるのに加えてEnterキーを押しても遷移する様にしたいのですが、いまいちやり方がわかりません。 function enter()というを使うというところまでは理解しましたが使い方がわかりません。 下記、ソースになります。 どなたかアドバイス下さい。 <html> <head> <title>Login Page</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body> <?php if ($error_message) { print '<font color="red">'.$error_message.'</font>'; } ?> <form action="index.php" method="POST"> Login ID: <br> <select name="user_name"> <option value="123">123</option> </select> <br> <br> Password:<br> <input type="password" name="password" value"" /><br /> <br> <input type="submit" name="login" value="Login" /> </form> </body> </html>

  • PHP
  • 回答数1
  • ありがとう数1

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

javascriptでキープレスのイベントを監視して、 エンターキー（改行キー）だったら、フォームを サブミットします。 <form name="frm1" action="/php/recvtest.php" method="POST"> Login ID: <br> <select name="user_name"> <option value="123">123</option> </select> <br> <br> Password:<br> <input type="password" name="password" value"" /><br /> <br> <input type="submit" name="login" value="Login" /> </form> <script type="text/javascript"> function getkeypress(key,func){ 　addEventListener('keypress',this,false); 　this.chkkey=key; 　this.func=func; } getkeypress.prototype.handleEvent = function(e){ 　if(e.keyCode==this.chkkey){ 　 this.func(); 　} } //フォームをサブミットする関数 func=function(){ 　document.forms['frm1'].submit(); } //キープレスイベント監視登録 var chk_return_key = new getkeypress("13",func); var chk_enter_key = new getkeypress("14",func); </script> ※サンプルは全角空白文字でインデントしてあります。 ※昔のIEとか古いブラウザー用対策は、別途してね！

duffy_19
質問者

お礼

ご回答ありがとうございます。 なるほど、挑戦してみます。

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

関連するQ&A

  • javascriptについて

    Javascriptを使用して簡単なツールを作りたいのですが、初心者なので分からず困っています。詳しく教えて頂けると助かります！ 現状このような感じで、機能していない状態です。ここにjavascriptで、プルダウンで選択したものによって表示する内容を変えるためにはどのような文にしたら良いのでしょうか？ 例えば、プルダウンで【卵】【焼く】を選択した時には、【目玉焼き】 【ゆでる】に変えると、【ゆで卵】といったように、組み合わせこどに表示される内容を変えたいです。 また、検索ボタンやリセットボタンを連動させたいです。検索ボタンを押すと結果が余っているスペースに表示されるようにしたいです。色々と申し訳ありませんが、教えて頂けると助かります！ <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> </head> <body> <h1>見出し</h1> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="材料"> <option value="1">卵</option> <option value="2" selected>じゃがいも</option> <option value="3">にんじん</option> </select> </form><br> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="調理"> <option value="1">焼く</option> <option value="2" selected>ゆでる</option> <option value="3">蒸す</option> </select> </form> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <input type=" submit" name="search" value=" 検索" /> <input type="reset" value="リセット"> </form> </body> </html>

  • 見よう見まねで以下のように作成してみたのですが

    見よう見まねで以下のように作成してみたのですが 作動しませんでした。 （当方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>

  • まったく同じ<select>フォームの値を連動させたい

    まったく同じ<select>フォームの値を連動させたい ptpで下記のようなコードがあり、まったく同じselectフォームの値を常に連動させるにはどうしたらよいでしょうか。 本当は、ひとつのform内に二つのSubmitボタンがあってはならないような話を聞いたことがありますが・・・ <html> <head> </head> <body> <?php $btn = "<select name='sorttype'>"; $btn .= "<option value='0'>氏名</option>"; $btn .= "<option value='1'>年齢</option>"; $btn .= "<option value='2'>電話番号</option>"; $btn .= "</select>"; $btn .= "<input type='submit' name='exec' value='保存'>"; ?> <form> <?= $btn ?> ああああ<br> いいいい<br> うううう<br> <?= $btn ?> </form> </body> </html>

  • PHPの変数について質問です．．．

    最近、ＰＨＰを始めて下記で悩んでおります。 分かる方がいらっしゃったら教えてください。 ［質問］ PHPで下記の２つのフォームがあります。 やりたい事は、 (1).form_aでＩＤを入力 (2).form_bで(1)のＩＤを基に対象部門を判定し、対象となるデータを表示。 (3)その後、(2)の選ばれたデータを対象にHTMLのコンボで検索を実施する。 といった内容です。 ここで問題なのは、 form_aからform_bへ移動した直後は正しく表示するのですが、 submitを実施したタイミングでsessionで取得した値がクリアされてしまい (2)の選ばれたデータが表示できません。 submitを実施しても他の変数の値がクリアされない様にするには どうしたら良いのでしょうか？ ---------------------------------------------------------- ■form_a...ログイン用 <html> <head> <title>login</title> </head> <body> <form action="form_b.php" method="post"> <input type="text" name="pass_word"> <input type="submit" name "bottun" value="ログイン"> <br> </form> </body> </html> --------------------------------------------------------- ■form_2...表示用 <? //－password－ session_start(); $pp = $_POST["pass_word"]; if ( $pp == 1000 ){ $p = 部門Ａ; } if ( $pp == 24400 ){ $p = 部門Ｂ; } ?> <html> <head> <title>data_sheet</title> </head> <body> <font size="6"><i><u>履歴一覧</u></i></font> <form action= "" method="post"> 大項目 <SELECT name="cate1"> <OPTION></OPTION> <OPTION value="社内">社内</OPTION> <OPTION value="社外">社外</OPTION> </SELECT> 小項目 <SELECT name="cate2"> <OPTION></OPTION> <OPTION value="実務">購入</OPTION> <OPTION value="知識">レンタル</OPTION> </SELECT> <input type="submit" name "bottun" value="検索実行"> </form> <? //DBへの接続開始 　　　　. 　　　　. //DBから$p、cate1、cate2でデータをSELECTして表示... ?> ----------------------------------------------------------- と言った感じで組んでいます。 ご回答をお願いします。

    • ベストアンサー
    • PHP
  • ドロップダウンメニューで選択された内容通りにチェックを入れるJS

    ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>

  • このJavaScriptはなんか早い・・・

    <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイマー</TITLE> </head> <body> <script language="JavaScript"><!-- myCnt = 0; myTim = 0; function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; myCnt = eval(document.myForm.myMenu.options[mySelect].value); myTim = setInterval("myTimer()",1000); } function myTimer(){ myCnt = myCnt-1; document.myForm.myFormSec.value = myCnt + " 秒"; if (myCnt == 0){ clearInterval(myTim); alert("制限時間を終了しました。"); } } // --></script> <CENTER> <form name="myForm"><select name="myMenu" size="1"> <option value="180">時間制限は？ </option> <option value="600">10分 </option> <option value="300">５分 </option> </select> <input type="button" value="GO!" onclick="myGo()"> 　　　　　　　　　　　　　　　　　　　　　　　　　　　あと<input type="text" size="15" name="myFormSec"> です。</form> </CENTER> <form> <center><input type="button" value="閉じる" onclick="window.close()"> </center> </form> </body> </html> 上のものを実行させると、なぜかスピードが早くなってしまいます。 どうすればいいのでしょう。 お願いします。

  • JavaScriptでアンケートを作成.。

    JavaScriptでアンケートを作成しました。 ＩＥ6.0で送信ボタンを押すとメール画面がでて、アンケート内容が送信できません。 宜しくお願いします。JavaScriptは有効になっています。 <form METHOD="POST" ACTION="mailto:XXX@***.ne.jp?Subject=XXXXX" ENCTYPE="text/plain" onSubmit="alert('ご協力ありがとうございます。')"> ■XXXアンケート： <select NAME="XXXアンケート"> <option VALUE="XXXますか？">XXXますか？ <option VALUE="・ほとんどない ">・ほとんどない </select><br> <br> ■XXXの感想：<br> <input TYPE="radio" NAME="XXXの感想" VALUE="XXX">XXX <input TYPE="radio" NAME="XXXの感想" VALUE="XXX-1">XXX-1 <br><br> ■XXXな異変：<br> <input TYPE="radio" NAME="XXXな異変" VALUE=">XXX感じ">感じ <input TYPE="radio" NAME="XXXな異変"VALUE="XXXに痛み">XXXに痛み <br><br> よろしければコメントをどうぞ。<br> <textarea NAME="よろしければコメントをどうぞ。" ROWS="6" COLS="25" WRAP="hard"> </textarea> <br> <input TYPE="submit" VALUE="メールを送る"> <input TYPE="reset" VALUE="やり直し"> </font> </form>

  • クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

    java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか？ <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○　"; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・

  • HTML内の指定の位置にプルダウンを読み込みたい

    まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>

  • ボタンを押したらラジオボタンを選択したい(サンプルソース付)

    ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか？ ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">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><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する