我正在尝试创建一个万事达卡检查网站，其中将检查信用卡号、到期日期和 CVV(使用 JavaScript)。如果详细信息正确，用户将被重定向到另一个页面，信用卡详细信息将存储在 MYSQL 数据库中(使用 PHP)。
我已经成功创建了两个网页，并且 javaScript 功能工作正常，但问题是，当用户输入任何不正确的详细信息时，将显示警报对话框，告诉用户输入正确的信息(卡号、日期、. ...)这就是我想要的，但是当我单击“确定”时，它会自动将我重定向到另一个页面并将详细信息存储在数据库中。
我希望您帮助解决此问题，以便当用户单击“确定”时，它不会重定向到其他网页，并允许用户更正详细信息。
我尝试将 onsubmit = "return false"放入其中，这有效并允许用户重新编辑详细信息，但是当它将用户重定向到另一个网页时，PHP/MySQL 会显示字段的“UNDEFINED INDEX”。我尝试删除 onsubmit = "return false"并且“UNDEFINED INDEX”错误消失，但警报对话问题再次出现。
请帮忙解决上述问题。
我尝试在解决每个警报和警报框问题后添加 return false，但第二页显示“未定义索引”mysql 错误。
第一个网页的 HTML 代码
<!DOCTYPE html>
<html lang="en">
<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" align="right">
<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>
<div id="date">
<label for="Expiration">Expiration Date</label>
<select id= "month" name="month">
<option selected value="month">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select id= "year" name="year">
<option selected value="year">Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
<br>
<div id= "securityCode">
<label for="cvv">Security Code</label>
<input type="text" name="cvv" id="cvv" style="width:100px;">
<p>(3-4 digit code normally on the back of your card)</p>
</div>
<br>
<button type="submit" id="submit-button" onclick="cardCheck(document.form1.payment)">Continue</button>
</form>
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
第二个网页的 HTML/PHP 代码
<?php
$servername = "localhost";
$database = "creditCard";
$username = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
$sql = "INSERT INTO card (ccnum, expmonth, expyear, seccode)
VALUES ('$_POST[creditCard]','$_POST[month]','$_POST[year]','$_POST[cvv]')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Successful</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">You have successfully entered your credit card details</h2>
<hr>
<div id="CardImage/Text">
<br>
<img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
<h3 style="margin-left:90px;"> Debit / Credit Card</h3>
<br>
</div>
<div id= "successPaymentConsole" style="margin-left:50px; padding-bottom:200px">
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
JavaScript 代码
function cardCheck()
{
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) {
window.location.href = "secondpage.php";
} 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!");
}
}
最佳答案
当您使用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!");
}
}
没有尝试过，但希望它能帮助你解决问题。
关于javascript - 警报适用于条件，但按下 “OK” 时会重定向到其他页面，并且不允许用户更改输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60682384/