侃侃無極
2022-09-11 20:14:00
<form class="modal-content" id="bookingForm"> <div class="formContainer"> <h1>Booking Form</h1> <p>Please fill in this form to Book The Trip.</p> <hr> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required id="email"> <label><b>Package</b></label> <input type="text" id="packageFields" name="teste2"> <label for="psw"><b>Name</b></label> <input type="text" placeholder="Enter Name" name="name" required id="name"> <label for="psw-repeat"><b>Phone No.</b></label> <input type="tel" placeholder="Enter Phone No." name="psw-repeat" required id="phone"> <label for="psw-repeat"><b>Date Of Journey</b></label> <input type="date" placeholder="Enter Phone No." name="psw-repeat" required id="date"> <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="submit" class="signupbtn">Confirm Booking</button> <button type="button" onclick="document.getElementById('bookingForm').style.display='none'" class="cancelbtn">Cancel</button> </div> </div> </form>我正在嘗試將我的聯系人表單的數據存儲在火庫中。但它給出了錯誤未捕獲的打字錯誤: 提交預訂時為空提交.js:27我把腳本放在最后,那么為什么它給出這個錯誤?它的原因是什么,如何解決它...??
2 回答

慕容森
TA貢獻1853條經驗 獲得超18個贊
您應該在元素上添加一個 id,而不是一個類。
<button type="submit" id="signupbtn" class="signupbtn">Confirm Booking</button>
const submitBtn = document.querySelector("#signupbtn");
此外,https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListeneraddEventListener
它應該是
submitBtn.addEventListener('click', function(e){
//Remove default form submit behaviour.
e.preventDefault();
//...
而不是
submitBtn.addEventListner('click', function(){ //Typo in addEventListner

MMTTMM
TA貢獻1869條經驗 獲得超4個贊
您正在使用:
const submitBtn = document.querySelector("#signupbtn");
以選擇
<button type="submit" class="signupbtn">Confirm Booking</button>
您需要根據類名進行選擇:或者在元素上設置 ID 而不是類。".signupbtn"
添加回答
舉報
0/150
提交
取消