在Wordpress中使用javascript提交表单后，页面会立即重新加载

Question

I want to show data after inserting in form div and show results of that submitted form on another div on same page without changing page in wordpress? I used javascript function onSubmit it works according to which i want but after submit form div it shows the hidden result div for few seconds and then it reloads immediately and i dont want to reload or refresh the page after show result div?

Form Code Which Is First 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> 

And this is my Second Div Which Shows Data after first div submit but don't stay for long:

 <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

You can use e.preventDefault() by passing e into your onsubmit function.

What this does is, in simple terms, it changes the default behavior of the event. In your case of submitting a form, the page in the browser would not refresh. You can read more about event.preventDefault() at MDN .

Doing inline JavaScript function calling inside HTML elements is not considered best practice, at least not when developing in vanilla JS. Rather, you would use an HTML reference of your element, in this case preferably an id , within a seperate JS-file or a script tag.

To reference your form you would then do:

ES6 (recommended)

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

ES5

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

Binding the submit event could then be done either simply through dot notation:

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

Or by adding an event listener:

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

Most JS developers prefer the addEventListener() method as it gives them more control over the event handling. However, in your case it could be considered superfluous.