JavaScriptでSubmitを実行したい

データを登録する画面を作成しています。
1つ目の枠はコードを入れ、2つ目の枠にJQueryを使って非同期で名称を表示しています。
3つ目の枠に数量を入れて、データを登録しようとしています。

1つ目の枠から3つ目の枠に飛ぶときに『TAB』キーを押してくれれば一番良いのですが、
どうしても「ENTER」キーを押す人がいるので、1つ目の枠のENTERキーは押しても
次の枠に飛ぶようにするという設定にしました。

このため、最後のSubmitをInputタグからButtonタグに変更しました。

3つ目の枠に数量を入れてENTERキーを押したときに、データを入れたいのでSubmitを
実行したいのですが、どうしてもできません。

doActionでスクリプトを呼び出してSubmitを実行しているはずなのですが、ページが移動しません。

下記ソースですが、何とか移動できるようにするにはどうすれば良いか、お教え願います。

html
1<script
2  src="http://code.jquery.com/jquery-3.0.0.js"
3  integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
4  crossorigin="anonymous">
5</script>
6
7<script type="text/javascript">
8<!--
9function doAction(){
10 var id = $('#list1').serialize();
11 $.getJSON('getdata.php',id,callback,'JSON');
12}
13
14function callback(result){
15 $('#message').text(result.message);
16}
17
18function doSubmit(){
19// ###ここが動きません
20 document.form2.submit();
21}
22
23$(function(){
24  var elements = "input[type=text]";
25  $(elements).keypress(function(e) {
26    var c = e.which ? e.which : e.keyCode;
27    if (c == 13) { 
28      var index = $(elements).index(this);
29      $(elements + ":gt(" + index + "):first").focus();
30      e.preventDefault();
31    } 
32  });
33});
34
35//-->
36</script>
37</head>
38
39<body>
40<H1>データ登録</H1>
41    <form method='POST' action='input.php'>
42    <table border=1>
43    <tr>
44            <td width='50'>部品コード</td>
45            <td width='300'>部品名</td>
46            <td width='50'>数量</td>
47    </tr>
48    <tr>
49            <td><input type='text' id='list1' name='bcord' onchange='doAction();'></td>
50        <td><div class='msg' id='message'><div></td>
51            <td><input type='text' name='suu' onchange='doSubmit();' ></td>
52    </tr>
53    </table>
54    <button type='button' onclick='submit();'>登録</button>
55    </form>
56

行動規範の内容に同意します

回答3件

以下の処理で、1番目と3番目の両方のinput[type=text]にENTERを押されたら次のフォーカスへ行く処理が実行されるようになっています。つまり、3番目のsuuでENTERを押しても、preventDefaultによって本来の処理がキャンセルされてしまうため、onchange="doSubmit();"は実行されません。

Javascript
1var elements = "input[type=text]";
2$(elements).keypress(function(e) {
3	var c = e.which ? e.which : e.keyCode;
4	if (c == 13) { 
5		var index = $(elements).index(this);
6		$(elements + ":gt(" + index + "):first").focus();
7		e.preventDefault();
8	} 
9});

keypressイベントを登録するならENTERで次のフォーカスへ移させたい#list1だけでいいのではないでしょうか？

追記

すみません、onchangeはテキストフィールドの場合、「中の要素が切り替わった上でフォーカスが移動した時」に発生するイベントだったので、onchangeで正しく動作するようです…混乱させて申し訳ないです。
で、フォーカス移動する処理をできるだけ簡潔にまとめてみました。ただし、jQuery-UIを使うので、jsの取り込みが必要です。
!!!!!!!!!!
要jQuery-UI
!!!!!!!!!!

Javascript
1
2$(function() {
3	var inputList = $("input[type='text']"); // テキストフィールド全て
4	var focusableList = $(":focusable"); // フォーカス可能な要素全て
5
6	// テキストフィールドでENTERキーを押されると次の要素へフォーカスを移動させる
7	inputList.keypress(function(e) {
8		// テキストフィールドでキー入力があるたびに発生する
9		var c = e.which ? e.which : e.keyCode;
10		if (c == 13) { // ENTERキー
11			var index = focusableList.index(this); // いまのテキストフィールドがフォーカス可能な要素の中で何番目か
12			if (index < focusableList.length - 1) {
13				// 次のフォーカス可能な要素へ移動する
14				$(focusableList[index + 1]).focus();
15			}
16		}
17	});
18});

投稿2016/06/21 07:58

編集2016/06/22 07:27

masaya_ohashi

総合スコア9206

YosiyukiUsijima

2016/06/21 08:22

masaya_ohashi様回答ありがとうございました。おっしゃる通り、#list1のイベントだけでよいで、最初は「function doAction」の $.getJSONの下に if (event.keyCode==13) { event.keyCord=9; } と入れてみたのですが、動作せず、WEBを探していたところ唯一動作したのが、var elementsのスクリプトだけだったのです。 javascriptを始めて間もないため、ご指摘内容に正しい修正がわかりません。すみませんが、サンプルを一つ教えていただければ幸いなのですが。

masaya_ohashi

2016/06/21 09:13

自分が書いたコードを理解せずになんとなくで使っているのは問題なので、知識が不足していることは否めません。jQueryのセレクタ、イベントハンドラの知識を勉強しなおしたほうがよいでしょう。 var elements = "input[type=text]"; $(elements) この部分は、jQueryを使って「CSSセレクタで該当する全てのエレメント」を取得する処理です。input[type=text]に該当するエレメントは、bcordもsuuもどちらも当てはまりますね？ .keypress(function(e){/*省略*/}); そしてこの部分は「該当するエレメントのkeypressイベントが発生した際の処理を登録する」という意味です。つまり、bcordもsuuもこの処理が走るようになります。だったら、CSSセレクタがbcordだけを指すようにすればよいのです。 bcordのテキストボックス「だけ」を指すセレクタの書き方は以下のどちらでも構いません。 var elements = "#list1"; var elements = "input[name=bcord]";

masaya_ohashi

2016/06/21 09:15

あともう一点、think49さんの回答にもあるように、onchangeは文字入力が1文字変わるごとに起こるイベントなので、enterを押した時に送信したいというあなたの考えとは違う動きをしますのでご注意ください。

YosiyukiUsijima

2016/06/21 14:52

masaya_ohashi様何度も本当にありがとうございました。 $function()の中に何かを入れるのかと思っていましたが、キーワードが出てこなかったので苦戦していました。勉強不足で本当にお恥ずかしい限りです。 var elementsが呼び出し条件だったのですね。ありがとうございました。セレクタとイベントハンドラについて勉強したいと思います。いろいろと本当にありがとうございました。

masaya_ohashi

2016/06/22 00:08

$()というメソッドはjQuery()というメソッドと同じものを指すようになっています。頻繁に使うので長さを省略しているわけですね。セレクタを引数に、マッチするエレメントをjQuery形式で返してくれるメソッドというわけです。ちなみにコールバックを渡した時は特殊な動作で、$(document).ready()と同じ働きをします。 http://api.jquery.com/jQuery/

YosiyukiUsijima

2016/06/22 06:13 編集

会社で早速「var elements」を変更してみましたが、動作しませんでした。 [type=text]に戻すと動作します。 Firefoxでデバッグの仕方を見つけましたので調べてみますが、doActionの後、 var elementsに行っていないように思います。ブレークポイントを置いても止まらず処理が終了しています。もう少し、丹念に調べてみます。

masaya_ohashi

2016/06/22 06:15

doActionの後にはelementsに行かないですよ？このコードの流れは以下のようになっています。 bcordに文字が入力されるたび(onchange)、doActionが実行される。 doActionが実行されると、messageにgetJSONで取ってきた内容が格納される。 bcordでENTERを押すと、フォーカスがsuuに移る。 doActionの終了と、elementsの行に来ることはまったくつながりがありません。 elementsの行に来るタイミングは、このページを読み込んだときです。何か入力があった時ではありません。

YosiyukiUsijima

2016/06/24 01:37

回答ありがとうございました。デバッグで見ていると、ver elementsで1文字ずつ入力文字をチェックしてからonchengeが実行されているようになっていました。 ver elementsはfunction()にあります。funcion()は名称がないので無条件で最初のタイミングで実行される場所だと思います。その後、doActionの処理をしているように思います。もう少し時間をかけて調べたかったのですが、ちょっと締め切りに間に合わなくなりここだけで時間を取れなくなりました。追記事項もいただき、本当にありがとうございました。いったんここで、終結させて頂きます。

行動規範の内容に同意します

ベストアンサー

masaya_ohashi さんが回答されたように event.preventDefault() は #list1 だけに適用すればいいですね。
もう一つ、<input type='text' name='suu' onchange='doSubmit();'> は一文字でも入力されれば submit されるので 10 を入力できなくなってしまいます(1 を入力した時点で submit します)。
要件を考え直す必要があると思います。

HTML
1<h1>データ登録</h1>
2<form method='POST' action='input.php'>
3  <table border=1>
4    <tbody>
5      <tr>
6        <td width='50'>部品コード</td>
7        <td width='300'>部品名</td>
8        <td width='50'>数量</td>
9      </tr>
10      <tr>
11        <td><input type='text' id='list1' name='bcord'></td>
12        <td><div class='msg' id='message'><div></td>
13        <td><input type='text' id="suu" name='suu'></td>
14      </tr>
15    </tbody>
16  </table>
17  <input type='submit' value="登録">
18</form>
19
20<script>
21'use stirct';
22(function (jQuery) {
23  function handleKeydown (event) {
24    if (event.keyCode === 13) {
25      event.preventDefault();
26      event.target.form.elements['suu'].focus();
27    }
28  }
29
30  function handleChangeList1 (event) {
31    jQuery.getJSON('getdata.php', jQuery(this).serialize(), callback, 'JSON');
32  }
33
34  function handleChangeSuu (event) {
35    event.target.form.submit();
36  }
37
38  function callback(result){
39    jQuery('#message').text(result.message);
40  }
41
42  function main () {
43    var list1 = jQuery('#list1');
44    console.log(list1);
45
46    list1.on('keydown', handleKeydown);
47    list1.on('change', handleChangeList1);
48    jQuery('#suu').on('change', handleChangeSuu);
49  }
50
51  main();
52}(jQuery));
53</script>

Re: YosiyukiUsijima さん

投稿2016/06/21 08:23

think49

総合スコア18164

YosiyukiUsijima

2016/06/21 15:02

think49様回答ありがとうございました。ソースコードを刷新していただき感謝します。勉強させていただきます。 onchangeですが、入力した情報に変化があったら実行すると覚えていました。ですから、入力枠に今まで違う値が入力されて移動したときに実行すると思っていたのですが、確かに「1文字」入力したら違う値ですね。今のソースで部品コードを6文字ほど入力した後、ENTERキーやTABキーで移動した場合、アクションが実行されていたので気にならなかったです。大変助かりました。ありがとうございました。

think49

2016/06/22 08:05

私としては jQuery('#suu').on('change', handleChangeSuu); を削除したコードが完成形であろうと思います。 <input type='text'> で [Enter] キーを押すことによる submit は初めからブラウザのデフォルト動作として組み込まれているのでそれを阻害しなければ特別なコードは必要ありません。 https://jsfiddle.net/d4jp797y/

YosiyukiUsijima

2016/06/24 01:44

回答ありがとうございました。本来は自分で教えていただいたサンプルを理解して作り上げていくものですが、締め切りが来てしまいました。不勉強で大変申し訳ありませんが教えていただいたソースをそのまま使わせて頂きます。ありがとうございました。

行動規範の内容に同意します

html内にフォームが1つだけであれば

JavaScript
1document.form[0].submit();

で動作するかと思います
document.form2を活かすのであれば

html
1<form method='POST' action='input.php' name="form2">

とname属性を指定してみて下さい。

投稿2016/06/21 07:51

退会済みユーザー

総合スコア0

YosiyukiUsijima

2016/06/21 07:59

hide2e3r様回答ありがとうございました。残念ながら両方とも試してみましたが、動作しませんでした。 form2を生かす方法を使った場合、ENTERキーでは動きませんでしたが、ブラウザの別のタグをクリックすると、後ろでページ移動していました。デバックのやり方がわからないので現象しかお伝えできません。すみません。

行動規範の内容に同意します

あなたの回答