リアルタイムで入力値を反映するフォームについてのjavaスクリプトサンプル
- 入力フォームで入力した値が別のフォームにリアルタイムで反映される機能を実装したいです。
- 対象のフォームにフォーカスしなくても反映され、日本語や記号にも対応してるサンプルを探しています。
- 目標とするサンプルには以下のページが近いですが、フォーカスが必要で日本語や記号には対応していません。
- ベストアンサー
フォームに入力した値をリアルタイムで別のフォームに反映させるスクリプト
こんにちは。 現在作成している入力フォームで以下のような機能を追加したいと考えています。 ソース： <form> <input type="text" name="id" /> <input type="text" name="nickname" /> </form> 機能： idに入力した値がnicnameに即座に反映される このようなjavaスクリプトのサンプルを配布している場所をご存じの方はいらっしゃらないでしょうか？ 自分でも探しましたが以下のページが理想に一番近かったです。 http://www.rememberthemilk.com/signup/ ただ、 ・対象のフォームにフォーカスしないと反映されない という点と ・日本語、記号に対応していない という点が致命的で使えないのですが・・。 みなさま、よろしくお願い致します。
- love-uni
- お礼率43% (13/30)
- Java
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
骨子は以下のようなソースでいかがでしょう？ <script type="text/javascript"> function copyid() { document.hoge.nickname.value = document.hoge.id.value; } </script> <form name="hoge"> <input type="text" name="id" onkeyup="copyid()"> <input type="text" name="nickname" /> </form>
関連するQ&A
- フォームに入力後、別のフォームに値を表示
すみません。教えて頂けないでしょうか？（初心者です） <input type="text" name="a" id="aaa" size=20> ↓ <input type="text" name="b" id="bbb" size=20> ↓ <input type="text" name="c" id="ccc" size=20> ↓ このような感じで作成し、aとbのフォームに値が何か 入力されたら自動的に、例えばaとbの値を足してcのフォームに その結果を表示する様にしたいのですが、記述の仕方が なかなか見つけられません。
- 締切済み
- PHP
- 入力フォームの反映
登録ページにて、申込者の情報入力フォーム、社長の入力フォーム、部長の入力フォームが同ページにあります。 申込者は社長か部長かをドロップダウンで選択してもらいます。 社長を選んだ場合、申込者の情報を入力すると下の社長の入力フォームに同じものが反映され 部長を選んで入力すると、下の部長の入力欄に同じく反映させたいのですが PHPで可能でしょうか？ よろしくお願いいたします。 // <p>［お申込み者入力］</p> <dt> <label for="yakusyoku">役職</label> </dt> <dd> <select id="yakusyoku" name="yakusyoku"> <option value="社長">社長</option> <option value="部長">部長</option> </select> </dd> <dt> <label for="m_name">お名前</label> </dt> <dd> <input name="m_name" type="text" id="m_name" size="10" maxlength="20" /> </dd> <p>［社長情報入力］</p><br> <dt> <label for="s_name">お名前</label> </dt> <dd> <input name="s_name" type="text" id="s_name" size="10" maxlength="20" /> </dd> <p>［部長情報入力］</p><br> <dt> <label for="b_name">お名前</label> </dt> <dd> <input name="b_name" type="text" id="b_name" size="10" maxlength="20" /> </dd>
- 締切済み
- PHP
- java 計算フォームで未入力の場合ゼロとしたい
java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります＞＜ フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします
- ベストアンサー
- JavaScript
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
- フォームに入力された値を計算する方法
私はまったくの初心者なのですがどなたか教えて下さい。 ●Ａ，Ｂ，Ｃという3つの入力フォームがあるとします。 Ａのフォームに入力された数字は「Ａ÷20」という値に、 Ｂのフォームに入力された数字はそのまま、 Ｃのフォームに入力された数字は「Ｃ×10」という値に変更して、 (Ａ+Ｃ)÷Ｂ×30という計算を行なって、その答えを Ｄのフォームへ表示するというシステムをcgiやphpで作りたいのです。 あれこれと試行錯誤しながら、javascriptでなんとか出来たんですが… どなたか教えて頂けませんか？ function keiri() { a = document.takeko.case.value; a = eval(a); a = a / 20 b = document.takeko.time.value; b = eval(b); c = document.takeko.days.value; c = eval(c); c = c * 10 ans = (a + c) / c * 30; document.spec.result.value = ans; } <form name="takeko"> <input name="case" type="text" size="12"> <input name="time" type="text" size="12"> <input name="days" type="text" size="12"> <input name="button" type="button" onClick="keiri()" value="CLICK"> <input name="result" type="text" size="12"> <br></form>
- 締切済み
- PHP
- フォームを作成 入力するところの大きさがおかしい
ＩＤ・パスワード入力フォームを作成したのですが、 <input type=text name=ID size=20 value=""> <input type=password name=password size=20 value="" > 大きさが異なります。 どうしてなのか、理由を知りたく思います。 お知恵をお貸し下さい。
- ベストアンサー
- HTML
- フォームに入力したテキストを別フレームのフォームに反映させるには？
上と下でフレーム分けしたページで、以下のような構成です。 上段フレームのフォームに入力した内容を、フォームの右側に設置した変更ボタンを押すことで、 下段フレームのプルダウンメニューとテキストフィールドに上記の構成のような感じで反映させたいのです。 社員番号の反映までのスクリプトを書いたところで、わからなくなってしまいました。 名前・部署・営業所・年齢も反映させるにはどうすればいいでしょうか？ 画面イメージ----------------------------------------------------------- 社員番号 名前 部署 営業所 年齢 [I00001] [山田太郎] [営業] [東京] [25] 【変更ボタン】 [I00002] [鈴木次郎] [販売] [大阪] [30] 【変更ボタン】 ======================================================================= 社員番号 名前 部署 営業所 年齢 《I00001▼》 《山田太郎▼》 《営業▼》 《東京▼》 [25] ------------------------------------------------------------------------ [XXXXX]がテキストフィールド、 《XXXXX▼》がselectのプルダウンメニューでいくつか選べるようになっています。 ★上段(ue_frame.html)★ <html> <head> <title>社員情報</title> <script language="JavaScript"><!-- function sendData(id) { syainbangou_label = id+"_syainbangou"; syainbangou_value = document.getElementsByTagName(syainbangou_label).value; //alert(parent.ue_frame.document.entry.syainbangou.options.length); for(count=0; count<parent.ue_frame.document.entry.syainbangou.options.length;count++){ if(id == parent.ue_frame.document.entry.syainbangou.options[count].value) { parent.ue_frame.document.entry.syainbangou.options[id].selected=true; } } } // --> </script> </head> <body> <form> <table> <tr> <td>社員番号</td><td>名前</td><td>部署</td><td>営業所</td><td>年齢</td><td></td><td></td><td></td> </tr> <tr> <td><input type="text" name="1_syainbangou" value="I00001"></td> <td><input type="text" name="1_syain_namae" value="山田太郎"></td> <td><input type="text" name="1_busyo" value="営業"></td> <td><input type="text" name="1_eigyousyo" value="東京"></td> <td><input type="text" name="1_age" value="25"></td> <td></td> <td><input type="button" value="変更" name="1_update" onClick="sendData(1)"></td> </tr> <tr> <td><input type="text" name="2_syainbangou" value="I00002"></td> <td><input type="text" name="2_syain_namae" value="鈴木次郎"></td> <td><input type="text" name="2_busyo" value="販売"></td> <td><input type="text" name="2_eigyousyo" value="大阪"></td> <td><input type="text" name="2_age" value="30"></td> <td></td> <td><input type="button" value="変更" name="2_update" onClick="sendData(2)"></td> </tr> </table> </body> </html> ★下段(sita_frame.html)★ <html> <head> <title>社員情報登録</title> <script language="JavaScript"><!-- // --></script> </head> <body> <form name="entry"> <table border="0"> <tr> <td>社員番号</td><td>名前</td><td>部署</td><td>営業所</td><td>年齢</td><td></td> </tr> <tr> <td> <select id="syainbangou"> <option>社員番号を選択 <option value=1>1.I00001 <option value=2>2.I00002 </select></td> <td> <select> <option>名前を選択 <option>1.山田太郎 <option>2.鈴木次郎 </select></td> <td> <select> <option>部署を選択 <option>1.営業 <option>2.販売 </select></td> <td><select> <option>営業所を選択 <option>1.東京 <option>2.大阪 </select></td> <td><input type="text" name="age" value="0"></td> </tr> <table> </form> </body> </html>
- 締切済み
- JavaScript
- スマホでの入力フォームが上手く反映されません
いつも大変お世話になります。 cgi勉強中ですが初心者です。 どうかお力添えよろしくお願いいたします。 kent-webさんのパスワード自動発行型の会員登録フォームをアレンジして作っています。 http://www.kent-web.com/pwd/pwmgr.html もちろん「改造品を配布するホームページとしてリンクを貼るようにします。 一つだけ改善しません。 フォームの入力をPCですると全てうまくいきますが、スマホで入力していただくと返信用のメール内容に反映されず空欄で返ってきます。 最初のエンコードの宣言をutf-8にすると文字化けが起きました。 次にshift_jisにすると文字化けはしませんが、自分で改造した部分だけが空欄で帰ってくるようになりました。 なので、文字コードの間違いではなく、改造した(自分で足したフォームタグ部分のみ空欄)箇所がプログラムが間違っているような気がします。 改造前の「名前」「入力日時」「ホスト情報」「ログインID」「パスワード」はちゃんと変換されます。 こうなるともうお手上げで…うまくいきません。 どなたか見ていただけないでしょうか 必要だと思われる箇所のみ↓に記します。 ※受付フォームhtml の60行くらいまで↓ <?php echo '<?xml version="1.0" encoding="shift_jis"?>'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <title>POPS会員登録フォーム</title> <style type="text/css"> <!-- body,th,td { background:#eee; color:#000; font-size:80%; } table.obi { width:400px; } table.obi th { padding:5px; background:#666; color:#fff; } table.form th,td { background:#fff; color:#000; padding:7px; } td.msg { color:green; font-size:75%; } table.chg td { padding:0; } --> </style> </head> <body> <form> <p style="text-align:center;"><input type="button" value="TOPに戻る" onclick=window.open("../index.html","_top")></p> </form> <div align="center"> <table class="obi"> <tr> <th>POPS研究会 新規メンバー登録</th> </tr> </table> <p> 以下のフォームにご入力ください。<br> 折り返しパスワードを送信します。 </p> <form action="./pwmgr.cgi" method="post"> <input type="hidden" name="mode" value="new_user"> <table cellspacing="0" border="1" class="form"> <tr> <th>お名前</th> <td><input type="text" name="name" size="30"></td> </tr> <tr> <th>フリガナ</th> <td><input size="20" type="text" name="フリガナ" /> 全角カタカナ</td> </tr> <tr> <th>電話番号（半角）</th> <td><input size="30" type="text" name="本人電話番号" />ご本人様（携帯など）</td> </tr> <tr> <th>性別</th> <td><input type="radio" name="性別" value="男" /> 男 <input type="radio" name="性別" value="女" /> 女 </td> </tr> <tr> <th>POPS会を知ったきっかけ</th> <td><input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" /> 友人・知人 <input name="サイトを知ったきっかけ[]" type="checkbox" value="検索エンジン" /> セミナー</td> </tr> <tr> <th>勤務先施設（所属歯科医院）</th> </tr> <tr>※受付フォームのhtml </head> <body> <form> <p style="text-align:center;"><input type="button" value="TOPに戻る" onclick=window.open("../index.html","_top")></p> </form> <div align="center"> <table class="obi"> <tr> <th>POPS研究会 新規メンバー登録</th> </tr> </table> <p> 以下のフォームにご入力ください。<br> 折り返しパスワードを送信します。 </p> <form action="./pwmgr.cgi" method="post"> <input type=初心者"hidden" name="mode" value="new_user"> <table cellspacing="0" border="1" class="form"> <tr> <th>お名前</th> <td><input type="text" name="name" size="30"></td> </tr> <tr> <th>フリガナ</th> <td><input size="20" type="text" name="フリガナ" /> 全角カタカナ</td> </tr> <tr> <th>電話番号（半角）</th> <td><input size="30" type="text" name="本人電話番号" />ご本人様（携帯など）</td> </tr> <tr> <th>性別</th> <td><input type="radio" name="性別" value="男" /> 男 <input type="radio" name="性別" value="女" /> 女 </td> </tr> <tr> <th>POPS会を知ったきっかけ</th> <td><input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" /> 友人・知人 <input name="サイトを知ったきっかけ[]" type="checkbox" value="検索エンジン" /> セミナー</td> </tr> <tr> <th>勤務先施設（所属歯科医院）</th> </tr> <tr> ※入力内容を返信させるtxt !name!様 ご登録をありがとうございます。 以下のとおりログインIDとパスワードを発行しました。 ※パスワードはご自分で自由に変更可能ですので、覚えやすいものに 変更しておくことができます。 ▼登録内容 登録日時 : !date! ホスト情報 : !host! お名前 : !name! E-mail : !email! フリガナ : !kana! 本人電話番号 : !tel! 性別 : !sex! サイトを知ったきっかけ : !trigger! 勤務先名称 : !medicalname! ▼ログイン情報 ログインID : !id! パスワード : !pw! ※パスワード発行用のdgiも必要でしょうか？
- ベストアンサー
- CGI
- フォームから値を受け取る方法について
例えば <form method="post" name="frm" action="mail.php">名前<input type="text" name="namae"><br> 住所<input type="text" name="jyuusyo"><br> 電話番号<input type="text" name="denwa"><br> 職業<input type="text" name="syokugyou"><br> 年齢<input type="text" name="nenrei"><br> <input type="submit" value="送信"><br> </form> というフォームがあるとして、それをmail.phpで 名前を取得する場合$_POST['namae']と書く以外で フォームの1番目の値を取得するというような書き方はあるのでしょうか？ frmのパラメータの数（上記の場合５コ）というのは取得出来るのでしょうか？ ご存知の方教えてください。お願いします。
- ベストアンサー
- PHP
- フォームのリアルタイム入力チェック
現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、 エラーがあれば、送信されないようものを使っております。 送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、 入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。 エラーがあれば、下記のように隠しているメッセージなどが表示され、 問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。 で構いません。 よろしくお願い致します。 ・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()"> <!--テキスト--> <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }
- 締切済み
- JavaScript
お礼
直接コードを教えて頂きありがとうございます。 理想どおりの動作です！ 本当にありがとうございました！！