我正在嘗試創建一個萬事達卡檢查網站，其中將檢查信用卡號、到期日期和 CVV（使用 JavaScript）。如果詳細信息正確，用戶將被重定向到另一個頁面，信用卡詳細信息將存儲在 MYSQL 數據庫中（使用 PHP）。我已經成功創建了兩個網頁，并且 javaScript 功能工作正常，但問題是，當用戶輸入任何不正確的詳細信息時，將顯示警報對話框，告訴用戶輸入正確的信息（卡號、日期……） ）這就是我想要的，但是當我單擊“確定”時，它會自動將我重定向到另一個頁面并將詳細信息存儲在數據庫中。我希望您幫助解決此問題，以便當用戶單擊“確定”時，它不會重定向到其他網頁，并允許用戶更正詳細信息。我嘗試將 onsubmit = "return false" 放入其中，這有效并允許用戶重新編輯詳細信息，但是當它將用戶重定向到另一個網頁時，PHP/MySQL 會顯示字段的“UNDEFINED INDEX”。我嘗試刪除 onsubmit =“return false”，“UNDEFINED INDEX”錯誤消失，但警報對話問題再次出現。請幫忙解決上述問題。我嘗試在解決每個警報和警報框問題后添加 return false，但第二頁顯示“未定義索引”mysql 錯誤。第一個網頁的 HTML 代碼<!DOCTYPE html><html><head><meta charset="utf-8"><title>Payment Page</title><link rel="stylesheet" href='form-style.css' type='text/css' /></head><body><div class="mail"><h2 style="margin-left:0px;">Payment Options</h2><hr><div id="CardImage/Text"> <br> <img src="mastercard.png" alt="MasterCard" width="100px" height="50px"> <h3 style="margin-left:90px;"> Debit / Credit Card</h3> <br></div> <form name="form1" action="secondpage.php" method="post" onsubmit="return false;" ><div id= "payment" style="margin-left:50px; background: #F0F0F0;"> <div id= "cardNumber"> <label for="cardno">Card Number</label> <input type="text" name="creditCard" id="creditCard" style="width:300px;"> </div> <br>
3 回答
慕后森
TA貢獻1802條經驗 獲得超5個贊
從 HTML 中的元素onsubmit中刪除該屬性。<form>嘗試在 JavaScript 中使用addEventListener來監聽事件。
如果我們使用該cardCheck函數作為事件的回調submit，我們可以在函數內部控制事件將發生的情況。使用event.preventDefault將阻止表單提交。event.preventDefault例如，當您在click事件中使用時，它將阻止默認的單擊行為。所以現在表單不會提交，您可以給它您想要的行為。
我已將您的嵌套 if 語句修改為不需要嵌套的結構。在我看來，這更具可讀性。關鍵字return在此至關重要。每當一個if語句為真時，該函數就會停止。僅當所有if語句的結果均為 false（這意味著所有輸入都正確）時，用戶才會被路由到下一頁。
var form = document.querySelector('form[name="form1"]');
form.addEventListener('submit', cardCheck);
function cardCheck(event)
{
// Don't execute the default submit behavior.
event.preventDefault();
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if (!enteredCardNo.match(cardNo)) {
alert("Not a valid Mastercard number!");
return;
}
if (monthSelectedValue === "month") {
alert("Please select a month");
return;
}
if (yearSelectedValue === "year") {
alert("Please select a year");
return;
}
if (!(enteredCVV.length > 2 && enteredCVV.length < 5)) {
alert("Please input a correct CVV");
return;
}
window.location.href = "secondpage.php";
}
叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
解決此問題的一種方法是僅使用 onsubmit。
從“繼續（提交）”按鈕中刪除 onclick
<button type="submit" id="submit-button">Continue</button>
更改表單元素，以便它在提交時調用cardCheck，如下所示
<form name="form1" action="secondpage.php" method="post" onsubmit="return cardCheck(document.form1.payment)">
在你的卡內檢查是否一切正常返回 true 否則返回 false。同時刪除submit() 調用。這是更新后的代碼
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
return true;
} else {
alert("Please input a correct CVV");
return false;
}
} else {
alert("Please select a year");
return false;
}
} else {
alert("Please select a month");
return false;
}
} else {
alert("Not a valid Mastercard number!");
}
}
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
當您使用時return false，您會關閉默認的提交行為。然后，您通過更改進行簡單的重定向href- 因此表單不會將數據傳遞到第二頁（所有數據$_POST都是空的） - 這就是您出現錯誤的原因。那么 - 你可以做什么：
將 id 參數添加到表單中，例如：
<form id="creditCardForm" name="form1" action="secondpage.php" method="post" >
然后在cardCheck函數中使用preventDefault。它會阻止表單提交，因此如果數據正常，您必須手動提交表單：
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
document.getElementById("creditCardForm").submit(); //here's the form submittion
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
沒有嘗試，但希望它能幫助你解決問題。
- 3 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消