单击提交按钮时网页刷新答案

【问题标题】：Webpage refreshing when I click Submit button单击提交按钮时网页刷新
【发布时间】：2017-10-16 06:17:05
【问题描述】：

每次我在字段中输入数据并单击提交时，页面都会刷新，清除表单，并且不会输入外部 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">&times;</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 文件

`函数验证（）{

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 - 在您的提交按钮中添加 type="button" 2 - 对表单提交进行验证并添加 event.preventDefault() 以避免提交表单
如果我希望它是提交而不是按钮。我必须做出哪些改变？
您需要在表单中添加onSubmit 事件并在其中执行验证。然后你 return false 或 event.preventDefault() 如果验证失败并返回 true 或 undefined 如果验证成功并且你希望表单提交

标签： javascript jquery html forms

【解决方案1】：

有两种方法可以解决。我个人喜欢的一个是将按钮更改为提交类型并将表单中的onSubmit事件绑定到validate() js函数。

确保在发生错误时取消事件，这样表单就不会使用 event.preventDefault() 提交

【讨论】：

onSubmit="" 属性是写在
我的错，onSubmit 事件属于
event.preventDefault();阻止了浏览器刷新，并且仍然按预期运行了 javascript。虽然我不太明白发生了什么。为什么页面之前刷新。即使提交后没有错误。

【解决方案2】：

我还不能对事情发表评论，所以让我发布一个答案。

回答

我同意程序员的回答，使用onsubmit事件$(...).submit(...) in jQuery，然后使用event.preventDefault()。

细化

详细说明（如果我错了，请纠正我），您的表单在单击按钮时“刷新”页面的原因是因为您的按钮是type='submit'，当您单击它时，它会提交表单。

表单实际上并没有刷新（这就是我之前使用引号的原因）。它尝试将某个 HTTP 方法运行到某个路由（正如 HTML 表单在提交时所做的那样）。默认情况下，它会尝试运行 GET 方法，以便将您带到该路线。

所以event.preventDefault() 实际上阻止了这种行为的发生，因此 theprogrammer 的答案是有效的。

回答

细化

更多信息