个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 11:03:54 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： javascript - 无法向下滚动以查看页脚
文章推荐： html - 如何垂直对齐文本
文章推荐： css - 如何下载包含 Fontawesome 等网络字体的完整页面？
文章推荐： html - 响应站点不工作 : CSS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com