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

Question

我想在插入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提交后显示数据，但不会停留很长时间：

 <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');

然后可以简单地通过点符号来绑定Submit事件：

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

或通过添加事件侦听器：

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

大多数JS开发人员更喜欢addEventListener()方法，因为它使他们可以更好地控制事件处理。 但是，在您的情况下，可以认为它是多余的。