将 confrim 添加到输入类型提交

编程问答 2022-04-29

问题描述

我正在尝试向我的 input type="submit","re​​set" 按钮添加一个非常基本的确认对话框。我的代码片段看起来像这样。这是课堂作业。

脚本（我放置了 console.log 消息以查看是否/哪里出现故障）

<script>    
        function validate() {
            console.log("I am in the validate function");
            var response = confirm("Are you sure?");
            if (response = true){
                console.log("Ok was selected");
                return true;
                }
            else{
                console.log("Cancel as selected");
                return false;
            }
        }
    </script>

我的重置/提交输入代码：

<div class="row">
                <input type="submit" value="Submit" onClick="return validate()"/> <input type="reset" value="Reset" onClick="validate()"/>
            </div>

它们被格式化成一个带有大 div 容器的表单。所以现在，无论我单击确定还是取消，它都会执行按钮功能。我只希望它提交表单，或者如果单击“确定”则重置表单。所以控制台总是会收到一条消息，表明选择了 Ok，即使我点击了取消。我只学习了一天的 JS。我尝试了其他答案，但找不到确切的情况。我知道我缺少一些简单的东西，感谢您的帮助。

完整代码如下：

/*CSS Styles Specific to the Customer Registration Page Will Go Here*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');

#logo   {
    display: inline-block;
    margin: 15px;
    /*float: left;*/
    height: 100%;
    width: auto;
}

.footer { /*sets a custom font for my footer and automatically transforms chars to uppercase*/
    font-family: 'Cinzel Decorative',cursive;
    text-transform:uppercase;
    float: right;
    text-align: bottom right;
}
        
*{
Box-sizing: border-Box
} /*Makes all Boxes sized as border Boxes (so they apply padding etc)*/

input[type=text],select,textarea { /*makes all my input/drop down Boxes have the same formatting*/
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    Box-sizing: border-Box;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
    
input[type=text]:focus { /*highlight the text input area of any clicked form field to similar to my logo color*/
    background-color: #48e0bd;
}

label { /*adds padding around all tags of type "label" in my form*/
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit],[type=reset] { /*applies color and other formatting to both reset and submit buttons*/
    background-color: #2b8c76;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: left;
}
    
input[type=submit]:hover,[type=reset]:hover { /*darkens reset or submite button when I hover over them*/
    background-color: #1f6656;
}

.container{
    border-radius: 0px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {float: left;
         width: 25%;
         margin-top: 6px;
 }
         
 .col-75 {float: left;
         width: 75%;
         margin-top: 6px;
}
         
.row:after{ /*clears floats after columns*/
            content: "";
            display: table;
            clear: both;
}
/*Responsive layout for our registration page*/

@media screen and (max-width: 600px) {
    .col-25,.col-75,input[type=submit],[type=reset]{
        width: 100%;
        align-top: 0;
        }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Grainy Travel: Plan Your Escape Customer Portal</title>
        <link rel="stylesheet" href="reset.css" /> <!-- This is a generic reset file off the web !-->
        
        <link rel="stylesheet" href="register.css" /> <!-- This is my custom CSS style sheet !--> 
        <script>    
            function validate() {
                console.log("I am in the validate function");
                var response = confirm("Are you sure?");
                if (response = true){
                    console.log("Ok was selected");
                    return true;
                    }
                else{
                    console.log("Cancel as selected");
                    return false;
                }
            }
        </script>
    </head>
    <body>
    <a href="#"><img id="logo" src="logo.png"></a> <br /> <!-- have to figure out how to separate this logo from the table! figured it out be removing float: left--> 
    <!--this is a container that wraps my whole form field together. 
    Each following <div /> wraps my form "entries" by rows split into two columns,a 25 and 75 width column
    based on my register.css file. !-->
    <div class="container"> 
        <form method="post" action="bouncer.PHP">
            <h1>Enter Your @R_705_4045@ion:</h1>
                <div class="row"> 
                    <div class="col-25">
                        <label for="fname">First Name:</label>
                    </div>
                        <div class="col-75">
                            <input type="text" id="fname" name="fname" placeholder="Your name..." />
                        </div>
                </div>
                <div class="row"> 
                    <div class="col-25">
                        <label for="lname">Last Name:</label>
                    </div>
                        <div class="col-75">
                            <input type="text" id="lname" name="lname" placeholder="Your last name..." />
                        </div>
                </div>
                <div class="row"> 
                    <div class="col-25">
                        <label for="cadd">Street Address:</label>
                    </div>
                        <div class="col-75">
                            <input type="text" id="cadd" name="cadd" placeholder="Your street address..." />
                        </div>
                </div>
                <div class="row"> 
                    <div class="col-25">
                        <label for="cname">Your City:</label>
                    </div>
                        <div class="col-75">
                            <input type="text" id="cname" name="city" placeholder="The city of your town" />
                        </div>
                </div>
            <div class="row">
                <div class="col-25">
                    <label for="prov">Province:</label>
                </div>
                <div class="col-75">
                    <select id="prov" name="prov">
                        <option value="ab">Alberta</option>
                        <option value="bc">British Columbia</option>
                        <option value="mb">Manitoba</option>
                        <option value="nb">New Brunswick</option>
                        <option value="nl">Newfoundland and Labrador</option>
                        <option value="ns">Nova Scotia</option>
                        <option value="on">Ontario</option>
                        <option value="pe">Prince Edward Island</option>
                        <option value="qc">Quebec</option>
                        <option value="sk">Saskatchewan</option>
                        <option value="nt">northwest Territories</option>
                        <option value="nu">Nunavut</option>
                        <option value="yt">Yukon</option>
                    </select>
                </div>
            </div>
                <div class="row"> 
                    <div class="col-25">
                        <label for="postcode">Your Postal Code:</label>
                    </div>
                        <div class="col-75">
                            <input type="text" id="postcode" name="postcode" placeholder="1N1N1N Format" />
                        </div>
                </div>
                <div class="row">
                    <input type="submit" value="Submit" onClick="return validate()"/> <input type="reset" value="Reset" onClick="validate()"/>
                </div>
        </form>
    </div> <br />
            
        <div class="footer"align="center";>
            copyright 2021 &copy;
        </div>
    </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

confirmationhtmlinputjavascriptsubmit