猿问

警报适用于条件，但在按下“确定”时重定向到其他页面，并且不允许用户更改输入

我正在尝试创建一个万事达卡检查网站，其中将检查信用卡号、到期日期和 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> 



catspeake
浏览 105回答 3
3回答

慕后森

从 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){&nbsp; &nbsp; // Don't execute the default submit behavior.&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var enteredCardNo = document.getElementById("creditCard").value;&nbsp; &nbsp; var cardNo = /^(?:5[1-5][0-9]{14})$/;&nbsp; &nbsp; var mon = document.getElementById("month");&nbsp; &nbsp; var monthSelectedValue = mon.options[mon.selectedIndex].value;&nbsp; &nbsp; var year = document.getElementById("year");&nbsp; &nbsp; var yearSelectedValue = year.options[year.selectedIndex].value;&nbsp; &nbsp; var enteredCVV = document.getElementById("cvv").value;&nbsp; &nbsp; if (!enteredCardNo.match(cardNo)) {&nbsp; &nbsp; &nbsp; alert("Not a valid Mastercard number!");&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; if (monthSelectedValue === "month") {&nbsp; &nbsp; &nbsp; alert("Please select a month");&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; if (yearSelectedValue === "year") {&nbsp; &nbsp; &nbsp; alert("Please select a year");&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; if (!(enteredCVV.length > 2 && enteredCVV.length < 5)) {&nbsp; &nbsp; &nbsp; alert("Please input a correct CVV");&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; window.location.href = "secondpage.php";}
0

叮当猫咪

解决此问题的一种方法是仅使用 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 timevar 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)) {&nbsp; &nbsp; if(monthSelectedValue != "month") {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(yearSelectedValue !="year") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(enteredCVV.length > 2 && enteredCVV.length < 5) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Please input a correct CVV");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Please select a year");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert("Please select a month");&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }} else {&nbsp; &nbsp; alert("Not a valid Mastercard number!");}}
0

白衣染霜花

当您使用时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 timevar 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)) {&nbsp; &nbsp; if(monthSelectedValue != "month") {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(yearSelectedValue !="year") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(enteredCVV.length > 2 && enteredCVV.length < 5) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("creditCardForm").submit();&nbsp; //here's the form submittion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Please input a correct CVV");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Please select a year");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert("Please select a month");&nbsp; &nbsp; }} else {&nbsp; &nbsp; alert("Not a valid Mastercard number!");}}没有尝试，但希望它能帮助你解决问题。
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答