我想在插入表单div后显示数据，并在同一页面上的另一个div上显示该提交表单的结果而不更改wordpress中的页面？我使用了javascript函数onSubmit它按照我想要的方式工作但是在提交表单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 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>
答案 0 :(得分：2)
您可以将e.preventDefault()传递到e功能中，以onsubmit使用。{/ p>
这样做，简单来说，它改变了事件的默认行为。在您提交表单的情况下，浏览器中的页面不会刷新。您可以在MDN了解有关event.preventDefault()的更多信息。
在HTML元素中调用内联JavaScript函数不被认为是最佳实践，至少在使用vanilla JS开发时不行。相反，您将在单独的JS文件或id标记内使用元素的HTML引用，在这种情况下最好是script。
要参考您的表格，您可以这样做：
ES6（推荐）
const contactForm = document.getElementById('ContactForm');
ES5
var contactForm = document.getElementById('ContactForm');
然后可以通过点表示法来绑定提交事件：
contactForm.onsubmit = function(e){
e.preventDefault();
// do some other stuff
};
或者添加一个事件监听器：
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// keep doing stuff
}, false);
大多数JS开发人员更喜欢addEventListener()方法，因为它可以让他们更好地控制事件处理。但是，在你的情况下，它可能被认为是多余的。