javascript - 在 WordPress 中使用 JavaScript 提交表单后，页面立即重新加载

Question

我想在插入表单 div 后显示数据，并在同一页面的另一个 div 上显示提交表单的结果，而不需要更改 WordPress 中的页面？我使用了 javascript 函数 onSubmit 它按照我想要的方式工作，但是在提交表单 div 后，它显示隐藏的结果 div 几秒钟，然后它立即重新加载，我不想在显示结果 div 后重新加载或刷新页面？

第一个 Div 的表单代码:

<form  style="margin-top: 30px;" class="form-horizontal t-gray" id="ContactForm" method="post"  onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('hidden_div').style.display = ''; return true;" action="">
							<div id="first">

						<div class="col-md-6">
						<div class="form-group">
							<label for="" class="col-sm-3 control-label">Select Journey Type:</label>
							<div class="col-sm-6">
							  <select class="form-control" name="JourneyType">
							  	<option value="Distance (point A to Point B)">Distance (point A to Point B)</option>
							  <option value="Hourly">Hourly</option>
									</select>
							</div>
						</div>

						<div class="form-group">
							<label for="" class="col-sm-3 control-label">Baby Seat Required:</label>
							<div class="col-sm-6">
							  <select class="form-control" name="babyseat"><option value="Not Required">Not Required</option><option value="baby seat">Baby Seat</option>
									<option value="booster seat">Booster Seat</option></select>
							</div>
						</div>
	</div>
	<div class="col-md-6">
						<div class="form-group" style="position: relative;">
							<label for="" class="col-sm-3 control-label">Journey From:</label>
							<div class="col-sm-6">
							  <input class="form-control" type="text" value="" name="Journey_From" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
							</div>
							<div class="suggestionsBox" id="suggestions" style="display: none;">
								<!-- <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> -->
								<div class="suggestionList" id="autoSuggestionsList">

								</div>
							</div>
						</div>
						<div class="form-group" style="position: relative;">
							<label for="" class="col-sm-3 control-label">Journey To:</label>
							<div class="col-sm-6">
							  <select class="form-control" name="Journey_To"><option value="Melbourne Airport">Melbourne Airport</option>
									<option value="Melbourne CBD">Melbourne CBD</option></select>
							</div>
						</div>
	</div>
						<div class="form-group">
							<div class="col-md-6 col-md-offset-3">
							<button type="submit" class="btn btn-lg btn-primary" style="background-color:#e6ae48; border-color:#e6ae48; color:#fff;">Get Quote</button>
							</div>
						</div>
					</div>

					</form>
				</div></div>
</div>
				<div class="clear"></div><div class="clear"></div></div></div><div class="clear"></div>

这是我的第二个 Div，它在第一个 div 提交后显示数据，但不会停留很长时间:

<div id="hidden_div" style="display:none" >
						<?php        
// $conn = mysqli_connect("localhost","root","", "melbou99_melcars") or die("Could not make connection to the Database.");

$conn = mysqli_connect("localhost","tanxeelc_singh","singh@123", "tanxeelc_melb") or die("Could not make connection to the Database.");

// $db= mysql_select_db("melbou99_melcars",$conn) or die("Could not select the Database.");
//$conn = mysql_connect("localhost","root","") or die("Could not make connection to the Database.");
//$db= mysql_select_db("nz",$conn) or die("Could not select the Database.");
// old pass - !Cmo_;,cBb^A
?>
		<div class="container booking-area">
		<div class="row">
			<div class="col-md-12">
			<center>	<h3 class="">Online Price Calculator:</h3> </center>
                   <center>    <p class="t-gray"> Based on your selection, the price estimation is as follows. This is just the estimation not the final price.</p></center>

							<?php
							
							$journeytype= $_REQUEST['JourneyType'];
							$babyseat= $_REQUEST['babyseat'];
							$journeyfrom= $_REQUEST['Journey_From'];
							$journeyto= $_REQUEST['Journey_To'];

							?>	

							<?php
                            $sql = "SELECT * FROM prices where value='$journeyfrom'"; 
							$rs = mysqli_query($conn, $sql);
							while($myrow = mysqli_fetch_row($rs)){
								$value=$myrow[1];
								$cbd=$myrow[2];	
								$melb_air=$myrow[3];
								$ava_air=$myrow[4];
							}
							
							?>
<div class="row">
<div class="col-sm-6 pull-left">
					<h4 class="">Journey Type:</h4>
					<p class="t-gray"><?php echo $journeytype; ?></p>

					<h4 class="">Baby Seat Required:</h4>
					<p class="t-gray"><?php echo $babyseat; ?></p>

					<h4 class="">Journey From:</h4>
					<p class="t-gray"><?php echo $journeyfrom; ?></p>

					<h4 class="">Journey To:</h4>
					<p class="t-gray"><?php echo $journeyto; ?></p>

</div>
<div class="col-sm-6 pull-right" style="padding-right:100px;margin-top:5%;">
<h2 align="center">Fare:<br/>
					<span class="fare_p">
						<?php
								
								if($journeytype=="One Way Journey"){
									
										if($journeyto=="Melbourne Airport"){
											$fare= $melb_air;
										}
										elseif($journeyto=="Avalon Airport"){
												$fare=  $ava_air;
										}
										elseif($journeyto=="Melbourne CBD"){
												$fare=  $cbd;
										}
										if($babyseat=="baby seat"|| $babyseat== "booster seat"){
											$fare=$fare+10;
										}
											else{
												$fare=$fare+0;
										}
									echo "One way fare = $" .$fare ;
								}
								elseif($journeytype=="Return Journey"){
									
									if($journeyto=="Melbourne Airport"){
										$fare= $melb_air;
										
									}
									elseif($journeyto=="Avalon Airport"){
											$fare=	$ava_air;
											
									}
									elseif($journeyto=="Melbourne CBD"){
												$fare= $cbd;
												
									}
									$fare=$fare*2;
									if($babyseat=="baby seat"||$babyseat== "booster seat"){
									$fare=$fare+10;
									
									}
									else{
									$fare=$fare+0;
									
								}
									echo "Return Fare = $" .$fare;
								}
								
								?>
                                </span>
                                <br/><br/>
	
					</h2>

</div>

</div><!--row-->



				
			</div>
	
	
		</div><!--row-->
	</div><!--fluid-->
	</div>

Answer 1

您可以通过将 e 传递到 onsubmit 函数来使用 e.preventDefault()。

简单来说，它的作用是更改事件的默认行为。如果您提交表单，浏览器中的页面将不会刷新。您可以在 MDN 阅读有关 event.preventDefault() 的更多信息。 .

在 HTML 元素内进行内联 JavaScript 函数调用不被认为是最佳实践，至少在普通 JS 中开发时不是。相反，您可以在单独的 JS 文件或 script 标记中使用元素的 HTML 引用，在本例中最好是 id。

要引用您的表单，您需要执行以下操作:

ES6(推荐)

const contactForm = document.getElementById('ContactForm');

ES5

var contactForm = document.getElementById('ContactForm');

然后可以简单地通过点表示法来绑定(bind)提交事件:

contactForm.onsubmit = function(e){
  e.preventDefault();
  // do some other stuff
};

或者通过添加事件监听器:

contactForm.addEventListener('submit', function(e) {
  e.preventDefault();
  // keep doing stuff
}, false);

大多数 JS 开发人员更喜欢 addEventListener() 方法，因为它使他们能够更好地控制事件处理。但是，就您而言，它可能被认为是多余的。