单击提交按钮时网页刷新
[英]Webpage refreshing when I click Submit button
问题描述
每次我在字段中输入数据并单击提交时，页面都会刷新，清除表单，而不是在外部Javascript文件中输入。 但是，当我将按钮类型更改为“按钮”而不是“提交”时，一切都进行顺利，但不再显示“必需”弹出窗口。 单击“提交类型”按钮时调用外部脚本的最佳实践是什么？
HTML文件
<!DOCTYPE html> <html> <head> <title>Registration Form 2</title> <link href="bStrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="style 2.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="script.js"></script> </head> <body> <div class="row"> <div class="col-md-2"> </div> <!--MAIN PANEL--> <div class="col-md-8"> <div class="panel-group"> <div class="panel panel-primary"> <div class="panel-heading"> <h1 class="pheading">Registration</h1> </div> <div class="panel-body"> <!--FORM START--> <form class="register"> <!--NAME--> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-6"> <fieldset class="well"> <legend align="left">Name</legend> <div class="row field"> <div class="namefields"> <input type="text" class="form-control" id="fname" placeholder="Enter firstname" required> <input type="text" class="form-control" id="lname" placeholder="Enter lastname" required> </div> </div> </fieldset> </div> <!--BDAY--> <div class="col-md-4"> <fieldset class="well"> <legend align="left">Birthday</legend> <input type="date" class="form-control" id="bday" required> </fieldset> </div> <div class="col-md-1"> </div> </div> <div class="row"> <div class="col-md-1"> </div> <!--EMAIL--> <div class="col-md-4"> <fieldset class="well"> <legend align="left">Email</legend> <div class="row field"> <div class="col-md-12"> <input type="email" class="form-control" id="email" placeholder="Enter email" required> </div> </div> </div> <!--GENDER--> <div class="col-md-3"> <fieldset class="well"> <legend align="left">Gender</legend> <div class="row field"> <div class="col-md-6"> <label class="radio-inline"><input type="radio" name="gender" checked value="Male">Male</label> </div> <div class="col-md-6"> <label class="radio-inline"><input type="radio" name="gender" value="Female">Female</label> </div> </div> </fieldset> </div> <!--COUNTRY--> <div class="col-md-3"> <fieldset class="well"> <legend align="left">Country</legend> <div class="row field" align="middle" title="Select Country"> <select id="country"> <option selected hidden>Select Country</option> <optgroup label = "Asia"> <option value="Philippines">Philippines</option> <option value="China">China</option> <option value="Japan">Japan</option> <optgroup label = "Europe"> <option value="Italy">Italy</option> <option value="France">France</option> <option value="Germany">Germany</option> </select> </fieldset> </div> <!--SUBMIT--> <div class="row"> <div class="col-md-5"> </div> <div class="col-md-2"> <div class="submit"> <button type="submit" class="btn btn-primary" id="sbtn" onClick="validate()">Submit</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="col-md-5"> </div> </div> </div> </div> </div> </form> </div> </div> </div> <div class="col-md-2"> </div> </div> </body> </html>
JAVASCRIPT文件
`function validate（）{
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var gender = $('input[name="gender"]:checked').val();
var bday = document.getElementById("bday").value;
var country = document.getElementById("country").value;
if (fname=="" || lname=="" || email=="" || country == "Select Country"){
console.log("Incomplete data");
$(".modal-title").text("Incomplete Data");
$(".modal-body").text("Please Fill All Required Fields");
$("#myModal").modal();
}
else{
$(".modal-title").text("Registration Succesful");
$(".modal-body").text("Welcome "+ fname +"! Your data has been inserted.");
$("#myModal").modal();
var info = new Object();
info.firstname = fname;
info.lastname = lname;
info.email = email;
info.gender = gender;
info.country = country;
info.bday = bday;
console.log("Output: " , info);
}
}`
2 个解决方案
解决方案1
1 已采纳 2017-05-17 00:53:37
有两种解决方法。 我个人喜欢的一个方法是将按钮更改为类型提交，并将onSubmit事件从表单绑定到validate（）js函数。
确保在发生错误时取消事件，因此不会使用event.preventDefault（）提交表单
解决方案2
1 2017-05-17 01:27:01
我还不能对事情发表评论，所以让我发表一个答案。
回答
我同意程序员的回答， $(...).submit(...) in jQuery使用onsubmit事件$(...).submit(...) in jQuery ，然后使用event.preventDefault() 。
细化
为了详细说明（如果我错了，请纠正我），您的表单在单击按钮时“刷新”页面的原因是，因为单击按钮时type='submit' ，所以它会提交表单。
该表格实际上并没有刷新（这就是我之前使用引号的原因）。 它尝试将特定的HTTP方法运行到特定的路由（就像HTML表单在提交时一样）。 默认情况下，它尝试运行GET方法，以便将您带到该路由。
所以event.preventDefault()实际上是在防止这种行为的发生，因此是程序员的答案起作用的原因。
更多信息
查找HTTP方法和HTTP动词以真正了解表单的工作方式。 我无法为您提供atm链接。
希望有帮助/有意义。
当管理员选择批准按钮并单击提交按钮时以及刷新后，如何禁用表行中的按钮？
[英]How to disable button in table rows when admins select approve button and click submit button, and also after refreshing?
我有一个带有链接到javascript函数的提交按钮的表单，但是当我单击提交按钮时没有任何反应
[英]I have a form with the submit button linked to javascript function but nothing is happening when I click the submit button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.