Q&A
コメントありがとうございました。
早速 cleartext の中身を入れ替えて試してみました（もちろんformタグの順番は入れ替えました)。
しかし、値は送ることができませんでした。
また、resetしたせいか、固定の2項目も再度入力するようになっていました。
特にエラー表示が無かったので、不具合のポイントを説明できず申し訳ありません。
webページでフレームを使い上下に画面を用意して、上のページで入力し下のページで更新するという物を作っています。
概要：
上のページには5項目あります。入力後、「登録」ボタンで下のページに送り、phpでデータを反映させた後、結果を表示しようとしています。
実現したい事：
入力して、データを送った後の処理を加えて利便性を図りたいと考えています。
次の登録をする際に2項目は固定なので後3項目の値をクリアし、フォーカスを3項目に移動して次の入力に備えたいとしています。
問題点：
formタグとinputタグを使うだけで、下のページに情報は送ることはできるのですが、入力項目には前の入力情報が残るので、まず項目をクリアする仕組みをJavascriptで作りました(cleartext)。そうすると、下のページに値を送らなくなりました。
行った対策：
次に下のページに値を送るものをJavaScriptで作りました(idou)。
きちんと値を送るのですが、項目をクリアするものと合わせて動かすと項目のクリアとフォーカスの移動だけで値を下のページに送りません。
すみませんが、どこがおかしくてどう対応すればよいか、アドバイスをお願いします。
ソース：
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset='UTF-8'> 5 6<script type="text/javascript"><!-- 7function idou() { 8document.getElementById('form').action = 't_data_input_body.htm'; 9document.getElementById('form').target= 'body'; 10document.getElementById('form').submit(); 11} 12 13function cleartext() { 14document.touroku.barcord.value=''; 15document.touroku.quantity.value=''; 16document.touroku.NewStorageLocation.value=''; 17document.touroku.barcord.focus(); 18} 19 20//--></script> 21 22 23</head> 24 25<body> 26<h1>登録</h1> 27<table> 28 <tr><td>場所A</td><td>場所B</td><td>バーコード値</td><td>数量</td><td>新場所B</td></tr> 29 <form method='POST' name='touroku' action='t_data_input_body.htm' target='body' id='form'> 30 <tr> 31 <td> 32 <input type='text' name='b_a' required autofocus> 33 </td> 34 <td> 35 <input type='text' name='b_b' required> 36 </td> 37 <td> 38 <input type='text' name='barcord' required> 39 </td> 40 <td> 41 <input type='number' name='quantity' required> 42 </td> 43 <td> 44 <input type='text' name='n_b_b'> 45 </td> 46 <td> 47 <input type='submit' value='登録' onClick='idou(); cleartext();'> 48 </td> 49 </tr> 50 </form> 51</table> 52</body> 53</html> 54
※フレームページと下ページは省略いたします。
回答3件
0
自己解決
並行して相談・検討をしていた結果、何とか実現できました。
function を1つにまとめて、input type='submit' を type='button' に変更することで
実現できました。
ありがとうございました。
html
1function idou() { 2document.getElementById('form').action = 't_data_input_body.htm'; 3document.getElementById('form').target= 'body'; 4document.getElementById('form').submit(); 5 6document.touroku.barcord.value=''; 7document.touroku.quantity.value=''; 8document.touroku.NewStorageLocation.value=''; 9document.touroku.barcord.focus(); 10} 11 12---------------------- 13<input type='button' value='登録' onClick='idou();'>
投稿2021/07/20 02:10
総合スコア42
0
submitボタン自身がsubmitしないようにしてみてはどうでしょうか。
HTML
1<input type='submit' value='登録' onClick='idou(); cleartext();return false'>
投稿2021/07/19 01:14
総合スコア246
0
これでどうでしょうか？
js
1function cleartext() { 2 document.getElementById("form").reset() 3}
あと <table> <form> <tr>
という入れ子順ですといずれ javascript でうまく解釈できない問題に当たる可能性があるので
（こちらでデバッグした際に document.querySelectorAll("#form input") が動かず、修正したら動きました。）
投稿2021/07/16 07:47
総合スコア662
本当にすみません。リセットしないフォームもあったの読めていませんでした。
document.querySelector('[name="barcord"]').value = ""
document.querySelector('[name="quantity"]').value = ""
document.querySelector('[name="barcord"]').focus()
という感じで個別の input 要素に指定できます。
カーソルの動きと元々あったデータは消えて目的は達しましたが、やはりデータはbodyに送られませんでした。
「input要素」というのが、ちょっと理解できずに、cleartext()に入れています。
function cleartext() {
document.querySelector('[name="barcord"]').value = ""
document.querySelector('[name="quantity"]').value = ""
document.querySelector('[name="barcord"]').focus()
// document.getElementById("form").reset()
}
このやり方では、まずいのでしょうか？
下のページというのは2ページ目(t_data_input_body.htm ?)ですか？
もしかして iframe で2分割しているなどでしょうか？
すみません情報が不足しているのでformの挙動と
form送信の2つの問題に分けていただけると助かります
説明不足で申し訳ありませんでした。
おっしゃる通り、iframeで上下に分割しており、今うかがっているのは上の画面となります。
ido()とcleartext()はそれぞれ、input の onclikに設定すると思うように動くのですが、2つ並べると、cleartext()の部分しか動作しません。
cleartext()の内容をido()の後ろに記述して1つにまとめても、データクリアの部分しか動作しません。
こういった2つの異なる動作は JavaScript では onClick に並列に記述せず、別の方法があるのでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。