実現したいこと。
- [ ]Javascript 非同期処理の中でsubmit処理を中断させたい
前提
jspページで従業員登録や更新、削除ができる画面を作成中です。
従業員番号がすでに登録されている場合フォーム送信を中断し
エラー文を表示する機能を実装したのですがエラー文が一瞬表示された後
画面遷移が中断されず遷移してしまいます。
非同期処理の中で画面遷移を阻止する方法知りたいです。
発生している問題・エラーメッセージ
event.preventDefault()で画面遷移を防ぐはずが中断されず遷移してしまう。
該当のソースコード
javascript
1 2//入力されたEMPNOを送信し重複してないかを判定する 3 return new Promise(resolve =>{ 4 5 fetch('http://localhost:3000/judgeEmpNo',{ 6 method: 'POST', 7 headers: { 'Content-Type': 'application/json' }, 8 signal:signal, 9 //ここで編集中の従業員番号を送信 10 body: JSON.stringify({empNo:empNo}) 11 }) 12 .then(response => response.json()) 13 .then(data =>{ 14 console.log(data); 15 16 if(!data.length <= 0){ 17 //重複しているかどうかを従業員IDで判断 18 if(!(Number(data[0].empId) == Number(empId))){ 19 //ここで画面遷移を中断させたい 20 event.preventDefault(); 21 error.textContent='そのempNoはすでに登録されています'; 22 }else{ 23 error.textContent=''; 24 resolve(); 25 } 26 }else{ 27 error.textContent=''; 28 resolve(); 29 } 30 }) 31//node express側 32 33//empNoが重複してないかチェックする 34 35app.post('/judgeEmpNo',(req,res)=>{ 36 console.log('from / judgeEmpNo'); 37 let empNo = req.body.empNo; 38 empNo = Number(empNo); 39 connection.query(`select empId from Employee where empNo=${empNo}`,(err,result,field)=>{ 40 if (err) throw err; 41 console.log(result); 42 res.json(result); 43 }); 44 45}); 46
試したこと
送信ボタンの要素にdisable=Trueをして無効化しようとしたが失敗した
フォームのonSubmitで関数を実行し戻り値をfalseにして無効化しようとしたが失敗した。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー