サイト制作をしているのですが、行き詰った箇所を教えてください。
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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
正規表現で複数マッチ条件で悩...
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
ツリービューのチェックボック...
-
コピペを禁止するtextarea
-
RegularExpressionValidatorの...
-
Visual Studioのデザインでの非...
-
ドロップダウンリストボックス...
-
リロードしないようにするには
-
submitCheckの書き方
-
form の onSubmit がコールされ...
-
<JavaScript>tableタグを入力不...
-
プルダウン 項目が多いので先頭...
-
hiddenのvalueの値を変えたい
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
全てのselect要素をデフォルト...
-
javascript作成してます。ラジ...
-
onchangeイベントを強制的に発...
-
Selectボックスの一覧表示方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
フォームの入力チェックをする...
-
チェックボックスの有無判定
-
JavaScriptde途中で、「exit」...
-
COBOLの数字チェック
-
TEXTAREAに入力した改行コード...
-
ラジオボタンのNullチェック
-
Visual Studioのデザインでの非...
-
「本当に削除しますか」が正常...
-
ツリービューのチェックボック...
-
半角英数字のみの入力にエラー...
-
ドロップダウンリストボックス...
-
未入力のラジオボタンに、alert...
-
入力された日付の正規表現の仕...
-
JSのみで入力→確認→メールで送...
-
分岐数といえば
-
度胸試しのJavaScript
-
ドラッグ&ドロップ禁止について
-
Tabキーでのカーソルの移動...
おすすめ情報