Get the value of select option without refreshing the page
Question
My problem is very simple.
This is my code:
<?php
include "../../../koneksi.php";
?>
<html>
<body>
<form action="" method="POST">
<?php
if($_POST['menu'] === "lunchmenu"){
$result = mysqli_query($conn,"SELECT * FROM tb_lunch");
} else{
$result = mysqli_query($conn,"SELECT * FROM tb_dinner");
}
?>
<table>
<tr>
<td>Kategori Menu</td>
<td>
<select name="menu" onchange="this.form.submit();">
<option selected="true" disabled>-- Menu Category --</option>
<option value="lunchmenu">Lunch Menu </option>
<option value="dinnermenu">Dinner Menu </option>
</select>
</td>
</tr>
<tr>
<td>Menu Name</td>
<td>
<select>
<?php
if($_POST['menu'] === "lunchmenu")
$i = 1;
while ( $row = mysqli_fetch_assoc($result)):
?>
<option> <?=$row[menu_name]; ?></option>
<?php
$i++;
endwhile;
?>
<?php
if($_POST['menu'] === "dinnermenu")
$i = 1;
while ( $row = mysqli_fetch_assoc($result)):
?>
<option> <?=$row[menu_name]; ?></option>
<?php
$i++;
endwhile;
?>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
The results that I want is very simple. When I choose "Lunch Menu" from --Menu Category--, it will show me the available lunch menu. I got no problem in here. My problem is: After I choose a menu (lunch or dinner), the page will refresh and it will be back just like the default value of --Menu Category--, though it shows the correct menu below.
I think the problem is at onchange="this.form.submit();
Do you guys has any solution for this?
2 answers
solution1
0 ACCPTED 2019-02-04 06:14:57
You can maintain two empty variables one for lunchmenu and another for dinner menu, and one for defaultmenu, change these variables to "selected" and "" based on the POST variable as below.
$lunchmenu changes from "" to "selected" when $_POST['menu'] === "lunchmenu"
$dinnermenu changes from "" to "selected" when $_POST['menu'] === "dinnermenu"
<?php include "../../../koneksi.php"; ?> <html> <body> <form action="" method="POST"> <?php $defaultmenu = 'selected'; $lunchmenu = ''; $dinnermenu = ''; if($_POST['menu'] === "lunchmenu"){ $lunchmenu = "selected"'; $defaultmenu = ''; $result = mysqli_query($conn,"SELECT * FROM tb_lunch"); } else{ $dinnermenu = "selected"'; $defaultmenu = ''; $result = mysqli_query($conn,"SELECT * FROM tb_dinner"); } ?> <table> <tr> <td>Kategori Menu</td> <td> <select name="menu" onchange="this.form.submit();"> <option <?php echo $defaultmenu ;?> disabled >-- Menu Category --</option> <option value="lunchmenu" <?php echo $lunchmenu;?> > Lunch Menu </option> <option value="dinnermenu" <?php echo $dinnermenu;?> > Dinner Menu </option> </select> </td> </tr> <tr> <td>Menu Name</td> <td> <select> <?php if($_POST['menu'] === "lunchmenu") $i = 1; while ( $row = mysqli_fetch_assoc($result)): ?> <option> <?=$row[menu_name]; ?></option> <?php $i++; endwhile; ?> <?php if($_POST['menu'] === "dinnermenu") $i = 1; while ( $row = mysqli_fetch_assoc($result)): ?> <option> <?=$row[menu_name]; ?></option> <?php $i++; endwhile; ?> </select> </td> </tr> </table> </form> <script> $( document ).ready(function() { $('html, body').animate({ scrollTop: $("#menuform").offset().top }, 2000); return false; }); </script> </body> </html>
solution2
0 2019-02-04 10:02:36
You should use Ajax. It will give you the value according to change without refreshing the page.
$.ajax({
type: "GET",
url: 'test.php', // Here is your link which will give you desired values.
success: function(data){
alert(data);
},
error: function(){
alert(data)
}
});
Bind this in a function and call that function from onchange event of your dropdown.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.