• 締切済み

Javascript onsubmit記述方法

サイト制作をしているのですが、行き詰った箇所を教えてください。 form内でEnterキーを押したときに送信ページに飛んでしまわずに、次項目へ行くように(Tabの役割)するJavascriptと、確認用メールアドレスの項目を作るためのJavascriptを併用したいのですが、 onsubmitに"return CheckForm(this);"と"javascript:pageTracker._linkByPost(this)"を並列させる必要があるようなのですが、書き方を教えてください。 もし、そもそもの記述が間違っていたらご指摘ください。 ---- Javascript部分 <script type="text/javascript"> /*********************************************** * Disable "Enter" key in Form script- * By Nurul Fadilah(nurul@REMOVETHISvolmedia.com) ***********************************************/ function handleEnter (field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { var i; for (i = 0; i < field.form.elements.length; i++) if (field == field.form.elements[i]) break; i = (i + 1) % field.form.elements.length; field.form.elements[i].focus(); return false; } else return true; } </script> <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (theform.mailaddress.value == "") { FieldControl(theform.To, "「メールアドレス」を入力してください。"); }else if (theform.mailaddresscheck.value != theform.email1.value ) { FieldControl(theform.To, "「メールアドレス(確認用)」を入力してください。"); }else if (theform.mailaddresscheck.value != theform.email1.value ) { FieldControl(theform.To, "入力されたものが一致するように入力してください。"); }else { FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ------- HTML部分(現状"Enter" key in Formのみ実装) <form action="" method="post" onSubmit="javascript:pageTracker._linkByPost(this)"> <table class="contact"> <tr> <th>メールアドレス <span class="red">※</span></th> <td><input type="text" name="mailaddress" id="textfield" class="type01" onkeypress="return handleEnter(this, event)" /></td> </tr> <tr> <th>メールアドレス確認用 <span class="red">※</span></th> <td><input type="text" name="mailaddresscheck" id="textfield" class="type01" onkeypress="return handleEnter(this, event)" /></td> </tr>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので… >form内でEnterキーを押したときに送信ページに飛んでしまわずに、次項目へ行くように >(Tabの役割)するJavascriptと、確認用メールアドレスの項目を作るためのJavascriptを >併用したいのですが、 多分、 ・Enterキーを押したときに次項目へ行くようにする == handleEnter() と思われますが、 ・「確認用メールアドレスの項目を作る」はどれなんでしょうか? ご提示のコードには、CheckForm()というのがあるけれど、こちらは空入力や入力値のチェックを行なうもののようで、項目を作るものではないようです。 確認用メールアドレスの項目ってこれのことでしょうか、それとも名前しかないので内容が不明なpageTracker._linkByPost()のことなのか、あるいはこれらとは別のものなのかわかりかねます。 (↑)のご質問内容通りであるのなら、イベント発生のタイミングが違うので問題なく併用できると思います。 ご提示のHTMLでhandleEnter()とpageTracker._linkByPost()を使い分けていますが、pageTracker._linkByPost()ところに「確認用~」の呼び出しを入れてあげればよいです。(pageTracker._linkByPost()が「確認用~」であるのなら現状のままで動作するはずです) 「確認用~」がCheckForm()のことで、これとpageTracker._linkByPost()(←何の処理なのか不明ですが)をサブミット時に処理したいのなら、処理手順の順序で呼出せば続けて実行するはず。  CheckForm(this); pageTracker._linkByPost(this); みたいに。 ただし、CheckForm(this);は戻り値でsubmitのキャンセルを制御しているように見受けられますが、このあたりをどのようにしたいのかがわりません。 (そもそも、このformはサーバーに送信するものなのかもわかりませんし…) 処理の制御をどうしたいのかによって、記述方法が変わってきます。 例えば、  if(CheckForm(this)) pageTracker._linkByPost(this); とか… 制御が複雑なら、HTML内からは先(後)に行なう処理だけを記述しておいて、そちらのfunction内で流れを制御してもよろしいかと。 例えば、pageTracker._linkByPost(f)の最初で   CheckForm(f); を呼出して、戻り値に応じて処理を変えるとか… 制御用のfunctionを別に作ってHTMLからはそちらを呼出し、CheckForm()やpageTracker._linkByPost()はそのfunctionから必要に応じて呼出すというのでもよろしいかと。 ご質問の意味がわかりかねますので、想像を交えた回答なのではずれているかも。

関連するQ&A

  • メールアドレス確認 javascriptについて

    入力フォームのメール項目にて 1.メールアドレスチェック 2.メールアドレス(確認用) のアラート設定を行いたいのですが、下記、javascriptの変更をどのように行っていいかが分からず困っています。 どなたかご回答お願いできますでしょう!? ------javascript部分-------------- <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (theform.email1.value == "") { FieldControl(theform.To, "「メールアドレス」を入力してください。"); }else if (theform.email2.value == "") { FieldControl(theform.To, "「メールアドレス(確認用)」を入力してください。"); }else if (theform.email2.value == "") { FieldControl(theform.To, "入力されたものが一致するように入力してください。"); }else { FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ------HTML部分-------------- <form action="" method="post" name="theform" onsubmit="return CheckForm(this);"> メールアドレス:<input size="40" name="email1">(半角英数字)<br><br> 確認用】:<input size="40" name="email2"><br><br> <input value="確認画面へ" name="submit" type="submit"> </form> 宜しくお願い致します。

  • JavaScriptのonsubmitについて

    大変申し訳ありませんが、とても困っているため書かせていただきました。 「次へ」「戻る」のボタンがある画面で、下記JavaScriptをかきました。 すると、アラートメッセージが表示されるとそれ以降の処理はまったく動かず ブラウザを再読み込みしない限り、次へなどのボタンがききません。 return falseをしているせいなのだと思いますが、回避策を教えていただけないでしょうか。 処理は、 <!-- script --> <script type="text/javascript" language="JavaScript"> <!-- document.getElementById("Form").onsubmit = function() { var errkey = document.getElementsByName('item3'); var keyArray = new Array(); for( i=0; i<19; i++ ) { if (errkey[i].checked){ keyArray.push(i); } } for( i=0; i<keyArray.length; i++ ) { ansnum = keyArray[i]; check1 = document.getElementsByName('item1'); check2 = document.getElementsByName('item2'); if (flgCheck1[ansnum].checked) continue; if (flgCheck2[ansnum].checked) continue; alert('同じ');   return false; } } // --> </script>

  • チェックボックスのjavascriptについて

    javascript初心者です! お力をお借りしたいと思い質問いたしました。 宜しくお願い致します。 ●やりたい事 ・チェックボックスがチェックされてない時に「商品を選択して下さい」のアラートを表示させ、1つでもチェックされていた場合は「送信」できる設定を行いたいです。 「name= 」 部分を同じ名前にすると可能ですが、異なる名前にすると動作いたしません。 どうかご教授お願い致します。 ■javascript部分 <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (!theform.category1[0].checked && !theform.category2[1].checked && !theform.category3[2].checked && !theform.category4[3].checked && !theform.category5[4].checked) { alert("商品を選択してください。"); }else{ FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ■HTML部分 <form name="theform" onsubmit="return CheckForm(this);" action="" method="post"> <input value="category1" name="category1" type="checkbox">category1<br> <input value="category2" name="category2" type="checkbox">category2<br> <input value="category3" name="category3" type="checkbox">category3<br> <input value="category4" name="category4" type="checkbox">category4<br> <input value="category5" name="category5" type="checkbox">category5<br><br> <br> <br> <input value="送信" name="submit" type="submit"></form> 宜しくお願い致します。

  • 電話番号チェックアラートについて【javascript】

    入力フォームアラート設定について、教えて下さい。 やりたい事。 1.入力項目の値が空白の場合は【「電話番号」を入力してください】を表示。 2.入力項目の値が電話番号の形式でない場合は、【「電話番号」を[xxxx-xxxx-xxxx]形式で入力してください。】を表示。 3.電話番号形式でも13桁以上の場合は、【「電話番号」は「-」を含む半角12~13桁です。】を表示 とアラートを表示させる設定を行っているのですが、下記、内容をどのような形に変更すればいいかがわからず困っております。 どなたかご回答いただけませんでしょうか? javascript初心者なもので細かい書き方がわかりません。 ----javascript-------------------------------- <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (theform.tel.value =="") { FieldControl(theform.To, "「電話番号」を入力してください。"); }else if (theform.tel.value =="") { FieldControl(theform.To, "「電話番号」を[xxxx-xxxx-xxxx]形式で入力してください。"); }else if (theform.tel.value == "") { FieldControl(theform.To, "「電話番号」は「-」を含む半角12~13桁です。"); }else{ FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> -------HTML----------------- <form action="" method="post" name="theform" onsubmit="return CheckForm(this);"> <p>電話番号:<input size="13" name="tel"></p> <input value="確認画面へ" name="submit" type="submit"> </form> 宜しくお願い致します。

  • JavaScriptの記述を教えて下さい。

    はじめまして、charliehamaといいます。 素人なもので、JavaScriptに詳しい方、教えて下さい。 次のコード(全体の中の一部)があります。 <!-- // ------------------------------------------------- // HTML生成関数 // ------------------------------------------------- function disp(){ //各要素を変数に格納 var $day = $(this).find('day').text(); var $label = $(this).find('label').text(); var $category = $(this).find('category').text(); var $content = $(this).find('content').text(); var $url = $(this).find('url').text(); var $target = $(this).find('target').text(); //HTMLを生成 $('<tr>'+ '<th>'+$day+'</th>'+ '<td class="label"><span class="'+$label+'">'+$category+'</span></td>'+ '<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>'+ '</tr>').appendTo('table.tbl tbody'); } --> 変数$urlについて、if構文で分岐させるにはどのように記述すればよいですか? (1) $urlがxxxの時、<td><span class="abc">'+$content+'</span></td> とする。 (2) $urlがそれ以外の時、<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>とする。 (3) (1)と(2)以外の処理は変更しない。 質問の仕方が悪ければご指摘下さい。 困っています。 どうかよろしくお願い申し上げます。

  • ネスケで動かないjavascriptの調べ方

    下記はセレクトボックスを選択させるためのものですが、IEでは動きますが、NNでは動きません。この時に、何かで調べようとするときに、「何」を調べればいいのかさっぱりです。できれば、 1番目に○を調べ、 2番目に○を調べ、 というような手順についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function submitCheck(){ for( i=0 ; i<document.main.length ; i++ ){ if(document.main.elements[i].type == "select-one" && document.main.elements[i].value == "err"){ alert("未選択項目があります。"); document.main.elements[i].focus(); return false; } } } </SCRIPT> <FORM NAME=main ACTION="sample.cgi" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" onSubmit="return submitCheck()"> <SELECT NAME="kubun"><OPTION SELECTED value="err">↓【選択して下さい】</OPTION> <OPTION>りんご</OPTION> <OPTION>みかん</OPTION> </SELECT> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>

  • htmlのformの表示について【Jquery】

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function formChanged(ev){ var sel = $('.chk:checked').map(function () { return this.checked ? this.value : null; }).get().join(); $("#output").text(sel); } formChanged(null); $(document).on("change",'.chk:checked',formChanged); </script> <form method="post" action="mail.php"> <table> <tr> <th>カテゴリー</th> <td> ・ABC: <input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" /> ・DEF: <input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" /> ・GHI: <input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" /> </tr> <tr> <th>選択した製品シリーズ</th> <td><span id="output"></span></td> </tr> <tr> </table> </form> これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。

  • form の onSubmit がコールされません;

    JavaScript初心者のyuki_xです。よろしくお願いします☆ 以下のコードで、 <チェック>を押下したときの動作が上手くいきません。 どうしてなのか、さっぱりわからないので教えてください!! 私の予定では、 1)<チェック>押下 2)nextPage() が呼ばれる 3)nextPage() で onSubmit イベントが発生 4)onSubmit に記述されている check() が呼ばれる となるはずなのですが、onSubmit イベントが発生していないようなのです。 alert() をいれて確認したところ、nextPage() が呼ばれたあと、 FORM の action に書かれている next.html へ移ってしまいます。 check() は呼ばれません。 どこが間違っているでしょうか? <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- function nextPage() { document.myform.type.value = n; document.myform.submit(); } function check() { //入力チェック } //--> </SCRIPT> <FORM action="next.html" method="post" name="myform" onSubmit="return check()"> <INPUT type="hidden" name="type" value=""> <INPUT type="button" value="チェック" onClick="nextPage();"> </FORM> (IE を使っています。)

  • undefinedを表示させない方法はありますか?(javascript)

    undefinedを表示させない方法はありますか?(javascript) コードを入力して、文字を表示させているのですが、 以下のソースになります。 その時に、イベント処理をonkeyupにしていて、 入力しているのと同時に表示させています。 その時に、1とか10とか入力している途中に、 undefinedが表示されてしまいます。 空白でもいいのですが、表示させない方法はありますか? 教えて下さい。 <SPAN>とinnerHTMLを使用しています。 <HTML> <BODY> <SCRIPT LANGUAGE=JavaScript> <!-- function sample(f) { var sample = new Array() sample['100'] = 'りんご' ; sample['101'] = 'オレンジ' ; sample['102'] = 'メロン' ; document.getElementById('ans').innerHTML = sample[f.code.value] ; } // --> </SCRIPT> <FORM NAME=f> <INPUT NAME=code SIZE=4 onkeyup="sample(this.form)"> <SPAN ID="ans"></SPAN> </FORM> </BODY> </HTML>

  • 外部JavaScriptファイルを読み込む

    <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function textReset(){ this.form1.userName.value=""; this.form1.passWord.value=""; } //--> </SCRIPT> </HEAD> のJavaScriptファイルを外出しにして、 <HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="/jsp/script.js"></SCRIPT> </HEAD> という風に呼び出そうとしているのですが、うまくいきません。どこに問題があると考えられるのでしょうか?

専門家に質問してみよう