如何解决将 confrim 添加到输入类型提交
我正在尝试向我的 input type="submit","reset" 按钮添加一个非常基本的确认对话框。我的代码片段看起来像这样。这是课堂作业。
脚本（我放置了 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 Information:</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 © </div> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。