仕様
入力必須の2つのラジオボタンから成る入力フォーム2組があり、Saveボタンをクリックすると不可視にしている3つのテキストボックスそれぞれに、保存日時、2組のラジオボタンの選択状況を1か0に変換して保存しています。
エラー内容
このページには1日に数十から150件前後の入力があり、数百件に1件程度、不可視のテキストボックスに何も保存されない入力データが発生します。入力端末はiPhoneのSafariが確認されていますが全件確認できていません。このエラーは特定の時間、ユーザに限定されません。
知りたいこと
再現ができず、困っています。原因が分かる方がいらっしゃいましたらご教示いただけますと幸いです。よろしくお願いいたします。
追記
テキストボックスにrequiredを設定してはとコメントをいただきました。
ユーザの画面上はラジオボタンが正しく選択されているのに「不可視のテキストボックス」のrequired設定のために保存できなくなると混乱を招くかと思い、手を出せないでいます。 現状は空欄が発生した時にメールを管理者に飛ばすようにして管理者側で修正しています。
また、最初ユーザ側で「javascriptを使用しない」設定でもしているのかと思いましたが確認できた数人は通常の使用でした。
html
1<table> 2 <tbody> 3 <tr> 4 <td class="kdmn"> 5 <fieldset> 6 <input name="fluits" value="1" type="radio"></input> 7 <label>りんご</label> 8 <br> 9 <input name="fluits" value="2" type="radio"></input> 10 <label>みかん</label> 11 </fieldset> 12 </td> 13 </tr> 14 <tr> 15 <td class="iro"> 16 <fieldset> 17 <input name="colors" value="1" type="radio"></input> 18 <label>あか</label> 19 <br> 20 <input name="colors" value="2" type="radio"></input> 21 <label>みどり</label> 22 </fieldset> 23 </td> 24 </tr> 25 <tr class="fukashi"> 26 <td> 27 <div class="date"> 28 <input class="date" type="text"> 29 </input> 30 </div> 31 </td> 32 </tr> 33 <tr class="fukashi"> 34 <td> 35 <div class="t_kdmn"> 36 <input class="t_kdmn" type="text"> 37 </input> 38 </div> 39 <div class="t_iro"> 40 <input class="t_iro" type="text"> 41 </input> 42 </div> 43 </td> 44 </tr> 45 </tbody> 46</table> 47<input value="Save" type="submit" id="id_submitbutton_save"></input>
Javascript
1 //時間 2 var timestmp = document.body.querySelector("input.date"); 3 var subSave = document.getElementById('id_submitbutton_save'); 4 subSave.addEventListener("click", function(evt0) { 5 //代入と入力必須で使用 6 var radios = document.querySelectorAll("input[type=radio]"); 7 var t_kdmn = document.querySelector("input.t_kdmn"); 8 var t_iro = document.querySelector("input.t_iro"); 9 //くだものを代入 10 if (radios[0].checked) { 11 t_kdmn.value = "1"; 12 } else if (radios[1].checked) { 13 t_kdmn.value = "0"; 14 } 15 //色を代入 16 if (radios[2].checked) { 17 t_iro.value = "1"; 18 } else if (radios[3].checked) { 19 t_iro.value = "0"; 20 } 21 timestmp.value = ""; 22 var now = new Date(); 23 var dayOfWeekStrJP = ["日", "月", "火", "水", "木", "金", "土"]; 24 var datetime = ('0' + (now.getMonth() + 1)).slice(-2) + 25 '/' + ('0' + now.getDate()).slice(-2) + 26 '(' + dayOfWeekStrJP[now.getDay()] + ')' + 27 ('0' + now.getHours()).slice(-2) + ':' + 28 ('0' + now.getMinutes()).slice(-2); 29 timestmp.value = datetime; 30 if (!(radios[0].checked || radios[1].checked)) { 31 // イベントキャンセル 32 evt0.preventDefault(); 33 alert("くだものを選択してください"); 34 } 35 if (!(radios[2].checked || radios[3].checked)) { 36 // イベントキャンセル 37 evt0.preventDefault(); 38 alert("色を選択してください"); 39 } 40 evt0.stopPropagation(); // イベントの伝播を止める 41 });
CSS
1.fukashi { 2 display: none; 3}
回答1件
あなたの回答
tips
プレビュー