所以我有一个网站，该网站的表单包含三个选项。 发件人，客舱和目的地。
用户选择所有它们，然后按提交。我使用POST并使用一些select语句从mySQL中检索相关信息。
问题是页面总是刷新，而我不希望那样。
代码在下面-我在底部添加了Java脚本部分。它在控制台中显示正确的值。但这似乎并不会影响我的sql语句。
<html class="no-js" lang="en">
<head>
<title>Aeroplan Points Calculator</title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-3.4.0.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<section class="s-featured">
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<!-- start of my form -->
<form id="myForm" method="post" action="index.php" class="selections">
<label style="color: black;">From Location:</label>
<div style="text-align: left;">
<select type = "text" name="q" class="chzn-select">
<!-- so here im basically pulling information for the dropdown from mySQL -->
<?php
foreach ($result6 as $row) {
echo '<option value="'.$row["Country"]. '"';
if($row["Country"] == $_POST['q']) echo 'SELECTED';
echo '>' .$row["Country"]. '</option>';
}
?>
</select>
<br><br>
</div>
<label style="color: black;">Cabin Type:</label>
<div style="text-align: left;">
<select type = "text" name="r" class="chzn-select">
<!-- code is done as below to keep value after hitting submit button -->
<option value="Economy" <?php echo (isset($_POST['r']) && $_POST['r'] == 'Economy') ? 'selected="selected"' : ''; ?>>Economy</option>
<option value="Premium Economy" <?php echo (isset($_POST['r']) && $_POST['r'] == 'Premium Economy') ? 'selected="selected"' : ''; ?>>Premium Economy</option>
<option value="Business" <?php echo (isset($_POST['r']) && $_POST['r'] == 'Business') ? 'selected="selected"' : ''; ?>>Business</option>
<option value="First" <?php echo (isset($_POST['r']) && $_POST['r'] == 'First') ? 'selected="selected"' : ''; ?>>First</option>
</select>
<br><br>
</div>
<label style="color: black;">Destination:</label>
<div style="text-align: left;">
<select type = "text" name="s" class="chzn-select">
<?php
//working code to keep value after hitting submit button
foreach ($result6 as $row) {
echo '<option value="'.$row["Country"]. '"';
if($row["Country"] == $_POST['s']) echo 'SELECTED';
echo '>' .$row["Country"]. '</option>';
}
?>
</select>
</div>
<br>
<div style="text-align: center;">
<input type="submit" name="submit" value="Find" class="button" onclick="return clickButton();">
</div>
</form>
</div>
<!-- getting values from mysql based on form inputs-->
<?php
if (isset($_POST['submit'])) {
$connection = new mysqli('host', 'usrname', 'pass', 'database');
$q = $connection->real_escape_string($_POST['q']);
$column = $connection->real_escape_string($_POST['q']);
$r = $connection->real_escape_string($_POST['r']);
$column2 = $connection->real_escape_string($_POST['r']);
$s = $connection->real_escape_string($_POST['s']);
$column3 = $connection->real_escape_string($_POST['s']);
$sql = $connection->query("SELECT Points FROM aeroplan WHERE fromLocation = (SELECT region FROM countriesAeroplan WHERE Country = '$q') AND toLocation = (SELECT region FROM countriesAeroplan WHERE Country = '$s') AND Cabin = '$r'");
if ($q == $s) {
echo '<h2 style="color: #ffffff;" class="animatedText"> Choose different countries</h2>';
}
elseif ($sql->num_rows > 0) {
while ($data = $sql->fetch_array())
echo "<h2 class='animatedText'>A Trip from $q to $s in $r will cost ".$data['Points'] . " Points</h2>";
}
else
echo '<h2 style="color: #ffffff;" class="animatedText"> Route Not Available</h2>';
}
?>
</div>
</section>
</body>
<script>
if (window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<script type="text/javascript">
function clickButton(){
var from=document.getElementById('q').value;
var cabin=document.getElementById('r').value;
var dest=document.getElementById('s').value;
$.ajax({
type:"post",
url:"index.php",
data:
{
'from' :from,
'cabin' :cabin,
'dest' :dest
},
cache:false,
success: function (html)
{
console.log(from,cabin,dest);
$('#msg').html(html);
}
});
return false;
}
</script>
</html>