javascript - javascript函数上的HTML输入复选框-6ren

javascript - javascript函数上的HTML输入复选框

转载作者：太空宇宙更新时间：2023-11-03 21:20:59

我使用 HTML/CSS/JS 创建了一个简单的支付表单，我想使用 html 模式检查用户输入的内容。但我也想使用 JS 创建一个弹出警报，以确认在正确填写所有必需的输入并且模式正常后必须弹出的表单。弹出警报还必须包含用户提供的名称并返回它。但问题是是当我按下提交按钮时，即使没有填写所需的信息，警报也会出现并说“订单已完成”....我怎样才能让弹出窗口只在所有信息都正确给出后出现？这里是我的代码:

<!DOCTYPE html>
<html>
<style>


    body {

        border:10px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 150px;

    }


    p.thick {
        font-weight: bold;
    }


    input[type=text], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type=text]:focus {
        border: 3px solid #555;
    }

    input[type=password]:focus {
        border: 3px solid #555;
    }

    input[type=password], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: red;
    }

    div {
        border-radius: 5px;
        background-color:rgb(238, 238, 232);
        padding: 40px;
    }
</style>

<body onload="CreditCard();">
    <form id="Myform">
        <div class="login-page">
            <div class="form">


                <fieldset>
                    <h1>Log in </h1>
                    <p>Username*: <input type="text"  name="Username" pattern=".{3,}" title="3 or more characters"></p>
                    <p>Password*: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[A-Z]).{5,}"placeholder="Password must contain 1 uppercaser and 1 number and must be atleast 5 digits." title="Must contain at least one number and one uppercase letter, and at least 5 or more characters."></p>



                </fieldset>

                <fieldset>
                    <h1> Payment </h1>
                    <select id="paymentmethod" onchange="CreditCard();">
                        <option value ="Payment on pickup">Payment on pickup</option>
                        <option value="Bank transfer/deposit">Bank transfer/deposit</option>
                        <option value="Credit/Debit card">Credit/Debit card</option>

                    </select>
                    <fieldset>
                        <div id="credit/debit card" style="display: block;">
                            <select name="cardtype" class="form">
                                <option value="VISA">VISA</option>
                                <option value="MasterCard">MasterCard</option>
                            </select>
                            <br>Card Number*:<br>
                            <input type="text" name="cardnumber" pattern="(?=.*\d).{16,16}" title="Enter a 16-digit card number please."  style="width:80%;" maxlength="20" value="" required>

                            <tr> 
                                <td height="22" align="right" valign="middle">Expiry Date:</td>
                                <td colspan="2" align="left">
                                    <SELECT NAME="CCExpiresMonth" >  
                                        <OPTION VALUE="01">January (01)
                                        <OPTION VALUE="02">February (02)
                                        <OPTION VALUE="03">March (03)
                                        <OPTION VALUE="04"SELECTED>April (04)
                                        <OPTION VALUE="05">May (05)
                                        <OPTION VALUE="06">June (06)
                                        <OPTION VALUE="07">July (07)
                                        <OPTION VALUE="08">August (08)
                                        <OPTION VALUE="09">September (09)
                                        <OPTION VALUE="10">October (10)
                                        <OPTION VALUE="11">November (11)
                                        <OPTION VALUE="12">December (12)
                                    </SELECT> 
                                    <SELECT NAME="CardExpiresYear">
                                        <OPTION VALUE="04"SELECTED>2016
                                        <OPTION VALUE="05">2017
                                        <OPTION VALUE="06">2018
                                        <OPTION VALUE="07">2019
                                        <OPTION VALUE="08">2020
                                        <OPTION VALUE="09">2021
                                        <OPTION VALUE="10">2022
                                        <OPTION VALUE="11">2023
                                        <OPTION VALUE="12">2024
                                        <OPTION VALUE="13">2025

                                    </SELECT>
                                </td>
                            </tr>
                    </fieldset>

                </fieldset>








                <h1> Order Information </h1>
                <p class="thick"> Name*: </p> <input type="text" id="customername"  style="width:55% name="cardholder" value="" pattern=".{1,}" title="Please enter a name" required>


                                                     <p class="thick"> Adress*: </p> <input type="text"style="width:55;" name="cardholderadr" value="" pattern=".{3,}" title="Please enter an adress" required>

                <p class="thick"> Phone </p> <input type="text"style="width:55;"  pattern="(?=.*\d).{10,10}" title="Enter a 10 digit number please." name="cardholderpho" value="" >

                <p class="thick"> email <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Please enter a valid email adress" placeholder="example@email.com" >

                <p class="thick"> Delivery comments </p> <input type="text" style="width:55; padding: 50px ;" name="cardholdercomm" value="" >


                <p style="color:blue;"> I agree with the <a href="https://en.wikipedia.org/wiki/Terms_of_service">
                        *terms</a>  <input type="radio" name="terms" title="Please agree to our terms."  unchecked required onclick="terms();"></p>
                <input type="submit" value="Submit" onclick="confirmed();">
                <input type="button" onclick="reset()" value="Reset form">


            </div>

        </div>

    </form>
    <script>
        function CreditCard() {
            prefer = document.forms[0].paymentmethod.value;
            if (prefer == "Credit/Debit card") {
                document.getElementById("credit/debit card").style.visibility = "visible";
            } else {
                document.getElementById("credit/debit card").style.visibility = "hidden";
            }

        }
        function paymentwithcard() {
            document.getElementById("credit/debit card").style.visibility = "hidden";
        }

        function reset() {
            document.getElementById("Myform").reset();


        }

        function confirmed() {

            var x = document.getElementById("customername").value;
            alert("Order completed.Name used:" + x);
        }
        function terms() {


        }
    </script>

</body>


</html>

关注输入和函数 confirmed()。

最佳答案

提交方法在您按下提交时执行。首先你必须让 submit 方法等待 comfirm 方法可以执行，然后 submit 方法可以执行。要访问您的 js 中的属性，您可以使用 id。

document.getElementById('submit-form').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    confirmed();
    this.submit(); // If confirmed succeeded
});

<input id="submit-form" type="submit" value="Submit">

关于javascript - javascript函数上的HTML输入复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37366171/

文章推荐：通过 setAttribute 设置类时的 JavaScript 奇怪行为

文章推荐： html - 为什么以下 CSS 规则不起作用？

文章推荐： python - 了解 Python OpenCV 中的 HoughCircles (cv2)

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - javascript函数上的HTML输入复选框