0
我想在表單div中插入後顯示數據，並在同一頁面上的另一個div上顯示該提交表單的結果而不更改wordpress中的頁面？我使用的JavaScript函數onSubmit它的工作原理根據我想要的，但提交表單div後，它顯示隱藏的結果div幾秒鐘，然後它立即重新加載，我不想刷新頁面後顯示結果div？這是第一個div頁面在wordpress中使用javascript表單提交後立即重新加載
表格代號：
<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="">
\t \t \t \t \t \t \t <div id="first">
\t \t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label for="" class="col-sm-3 control-label">Select Journey Type:</label>
\t \t \t \t \t \t \t <div class="col-sm-6">
\t \t \t \t \t \t \t <select class="form-control" name="JourneyType">
\t \t \t \t \t \t \t \t <option value="Distance (point A to Point B)">Distance (point A to Point B)</option>
\t \t \t \t \t \t \t <option value="Hourly">Hourly</option>
\t \t \t \t \t \t \t \t \t </select>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label for="" class="col-sm-3 control-label">Baby Seat Required:</label>
\t \t \t \t \t \t \t <div class="col-sm-6">
\t \t \t \t \t \t \t <select class="form-control" name="babyseat"><option value="Not Required">Not Required</option><option value="baby seat">Baby Seat</option>
\t \t \t \t \t \t \t \t \t <option value="booster seat">Booster Seat</option></select>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t </div>
\t <div class="col-md-6">
\t \t \t \t \t \t <div class="form-group" style="position: relative;">
\t \t \t \t \t \t \t <label for="" class="col-sm-3 control-label">Journey From:</label>
\t \t \t \t \t \t \t <div class="col-sm-6">
\t \t \t \t \t \t \t <input class="form-control" type="text" value="" name="Journey_From" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="suggestionsBox" id="suggestions" style="display: none;">
\t \t \t \t \t \t \t \t <!-- <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> -->
\t \t \t \t \t \t \t \t <div class="suggestionList" id="autoSuggestionsList">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group" style="position: relative;">
\t \t \t \t \t \t \t <label for="" class="col-sm-3 control-label">Journey To:</label>
\t \t \t \t \t \t \t <div class="col-sm-6">
\t \t \t \t \t \t \t <select class="form-control" name="Journey_To"><option value="Melbourne Airport">Melbourne Airport</option>
\t \t \t \t \t \t \t \t \t <option value="Melbourne CBD">Melbourne CBD</option></select>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <div class="col-md-6 col-md-offset-3">
\t \t \t \t \t \t \t <button type="submit" class="btn btn-lg btn-primary" style="background-color:#e6ae48; border-color:#e6ae48; color:#fff;">Get Quote</button>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t </form>
\t \t \t \t </div></div>
</div>
\t \t \t \t <div class="clear"></div><div class="clear"></div></div></div><div class="clear"></div>這是我的第二個div這表明數據第一個div之後提交，但不留長：
<div id="hidden_div" style="display:none" >
\t \t \t \t \t \t <?php
// $conn = mysqli_connect("localhost","root","", "melbou99_melcars") or die("Could not make connection to the Database.");
$conn = mysqli_connect("localhost","tanxeelc_singh","[email protected]", "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
?>
\t \t <div class="container booking-area">
\t \t <div class="row">
\t \t \t <div class="col-md-12">
\t \t \t <center> \t <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>
\t \t \t \t \t \t \t <?php
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t $journeytype= $_REQUEST['JourneyType'];
\t \t \t \t \t \t \t $babyseat= $_REQUEST['babyseat'];
\t \t \t \t \t \t \t $journeyfrom= $_REQUEST['Journey_From'];
\t \t \t \t \t \t \t $journeyto= $_REQUEST['Journey_To'];
\t \t \t \t \t \t \t ?> \t
\t \t \t \t \t \t \t <?php
$sql = "SELECT * FROM prices where value='$journeyfrom'";
\t \t \t \t \t \t \t $rs = mysqli_query($conn, $sql);
\t \t \t \t \t \t \t while($myrow = mysqli_fetch_row($rs)){
\t \t \t \t \t \t \t \t $value=$myrow[1];
\t \t \t \t \t \t \t \t $cbd=$myrow[2]; \t
\t \t \t \t \t \t \t \t $melb_air=$myrow[3];
\t \t \t \t \t \t \t \t $ava_air=$myrow[4];
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t ?>
<div class="row">
<div class="col-sm-6 pull-left">
\t \t \t \t \t <h4 class="">Journey Type:</h4>
\t \t \t \t \t <p class="t-gray"><?php echo $journeytype; ?></p>
\t \t \t \t \t <h4 class="">Baby Seat Required:</h4>
\t \t \t \t \t <p class="t-gray"><?php echo $babyseat; ?></p>
\t \t \t \t \t <h4 class="">Journey From:</h4>
\t \t \t \t \t <p class="t-gray"><?php echo $journeyfrom; ?></p>
\t \t \t \t \t <h4 class="">Journey To:</h4>
\t \t \t \t \t <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/>
\t \t \t \t \t <span class="fare_p">
\t \t \t \t \t \t <?php
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t if($journeytype=="One Way Journey"){
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t if($journeyto=="Melbourne Airport"){
\t \t \t \t \t \t \t \t \t \t \t $fare= $melb_air;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t elseif($journeyto=="Avalon Airport"){
\t \t \t \t \t \t \t \t \t \t \t \t $fare= $ava_air;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t elseif($journeyto=="Melbourne CBD"){
\t \t \t \t \t \t \t \t \t \t \t \t $fare= $cbd;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t if($babyseat=="baby seat"|| $babyseat== "booster seat"){
\t \t \t \t \t \t \t \t \t \t \t $fare=$fare+10;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t else{
\t \t \t \t \t \t \t \t \t \t \t \t $fare=$fare+0;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t echo "One way fare = $" .$fare ;
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t elseif($journeytype=="Return Journey"){
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t if($journeyto=="Melbourne Airport"){
\t \t \t \t \t \t \t \t \t \t $fare= $melb_air;
\t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t elseif($journeyto=="Avalon Airport"){
\t \t \t \t \t \t \t \t \t \t \t $fare= \t $ava_air;
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t elseif($journeyto=="Melbourne CBD"){
\t \t \t \t \t \t \t \t \t \t \t \t $fare= $cbd;
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t $fare=$fare*2;
\t \t \t \t \t \t \t \t \t if($babyseat=="baby seat"||$babyseat== "booster seat"){
\t \t \t \t \t \t \t \t \t $fare=$fare+10;
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t else{
\t \t \t \t \t \t \t \t \t $fare=$fare+0;
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t echo "Return Fare = $" .$fare;
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t ?>
</span>
<br/><br/>
\t
\t \t \t \t \t </h2>
</div>
</div><!--row-->
\t \t \t \t
\t \t \t </div>
\t
\t
\t \t </div><!--row-->
\t </div><!--fluid-->
\t </div>
您的代碼很難閱讀......建議您查閱event.preventDefault –
如果您不希望頁面重新加載，您需要停止第一個表單提交。但是，您似乎需要提交表單以獲取第二個分部的數據 - 是嗎？ – Tom
是的，我想第一個div數據提交和顯示在第二個div是隱藏的，但是當我使用返回false;在Java腳本函數它不重新加載，但也沒有從第一個div – Zain