我正在嘗試創(chuàng)建一個(gè)萬事達(dá)卡檢查網(wǎng)站，其中將檢查信用卡號(hào)、到期日期和 CVV（使用 JavaScript）。如果詳細(xì)信息正確，用戶將被重定向到另一個(gè)頁面，信用卡詳細(xì)信息將存儲(chǔ)在 MYSQL 數(shù)據(jù)庫中（使用 PHP）。我已經(jīng)成功創(chuàng)建了兩個(gè)網(wǎng)頁，并且 javaScript 功能工作正常，但問題是，當(dāng)用戶輸入任何不正確的詳細(xì)信息時(shí)，將顯示警報(bào)對(duì)話框，告訴用戶輸入正確的信息（卡號(hào)、日期……） ）這就是我想要的，但是當(dāng)我單擊“確定”時(shí)，它會(huì)自動(dòng)將我重定向到另一個(gè)頁面并將詳細(xì)信息存儲(chǔ)在數(shù)據(jù)庫中。我希望您幫助解決此問題，以便當(dāng)用戶單擊“確定”時(shí)，它不會(huì)重定向到其他網(wǎng)頁，并允許用戶更正詳細(xì)信息。我嘗試將 onsubmit = "return false" 放入其中，這有效并允許用戶重新編輯詳細(xì)信息，但是當(dāng)它將用戶重定向到另一個(gè)網(wǎng)頁時(shí)，PHP/MySQL 會(huì)顯示字段的“UNDEFINED INDEX”。我嘗試刪除 onsubmit =“return false”，“UNDEFINED INDEX”錯(cuò)誤消失，但警報(bào)對(duì)話問題再次出現(xiàn)。請(qǐng)幫忙解決上述問題。我嘗試在解決每個(gè)警報(bào)和警報(bào)框問題后添加 return false，但第二頁顯示“未定義索引”mysql 錯(cuò)誤。第一個(gè)網(wǎng)頁的 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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
從 HTML 中的元素onsubmit中刪除該屬性。<form>嘗試在 JavaScript 中使用addEventListener來監(jiān)聽事件。
如果我們使用該cardCheck函數(shù)作為事件的回調(diào)submit，我們可以在函數(shù)內(nèi)部控制事件將發(fā)生的情況。使用event.preventDefault將阻止表單提交。event.preventDefault例如，當(dāng)您在click事件中使用時(shí)，它將阻止默認(rèn)的單擊行為。所以現(xiàn)在表單不會(huì)提交，您可以給它您想要的行為。
我已將您的嵌套 if 語句修改為不需要嵌套的結(jié)構(gòu)。在我看來，這更具可讀性。關(guān)鍵字return在此至關(guān)重要。每當(dāng)一個(gè)if語句為真時(shí)，該函數(shù)就會(huì)停止。僅當(dāng)所有if語句的結(jié)果均為 false（這意味著所有輸入都正確）時(shí)，用戶才會(huì)被路由到下一頁。
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";
}
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
解決此問題的一種方法是僅使用 onsubmit。
從“繼續(xù)（提交）”按鈕中刪除 onclick
<button type="submit" id="submit-button">Continue</button>
更改表單元素，以便它在提交時(shí)調(diào)用cardCheck，如下所示
<form name="form1" action="secondpage.php" method="post" onsubmit="return cardCheck(document.form1.payment)">
在你的卡內(nèi)檢查是否一切正常返回 true 否則返回 false。同時(shí)刪除submit() 調(diào)用。這是更新后的代碼
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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
當(dāng)您使用時(shí)return false，您會(huì)關(guān)閉默認(rèn)的提交行為。然后，您通過更改進(jìn)行簡單的重定向href- 因此表單不會(huì)將數(shù)據(jù)傳遞到第二頁（所有數(shù)據(jù)$_POST都是空的） - 這就是您出現(xiàn)錯(cuò)誤的原因。那么 - 你可以做什么：
將 id 參數(shù)添加到表單中，例如：
<form id="creditCardForm" name="form1" action="secondpage.php" method="post" >
然后在cardCheck函數(shù)中使用preventDefault。它會(huì)阻止表單提交，因此如果數(shù)據(jù)正常，您必須手動(dòng)提交表單：
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 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消