Stack Overflow Asked by kemar aim on November 18, 2021
I have a select option that shows the states
and I have a DIV return the cost of shipping of the selected state
my problem is that page refreshed when I select an option and return the value of DIV
I want to display the value of DIV without refresh the whole page
<html>
<body>
<div id ="content"> this is the cost of shipping of :
<?php
$ship=20;
if (isset($_POST['city'])){
$listings = $_POST['city'];
} else if (isset($_GET['city'])) {
$listings = $_GET['city'];
} else {
$listings = 'city';
}
switch ($listings) {
case 'California':
$ship=$ship+5; echo $ship;
break;
case 'Alabama':
$ship=$ship+10; echo $ship;
break;
case 'Texas':
$ship=$ship+15; echo $ship;
}
?>
</div>
<form id = "form1" name = "form" >
<select id ="city" name ="city" method="post" onchange="this.form.submit()" >
<option value="California" <?php echo (isset($_POST['city']) && $_POST['city'] == 'California') ? 'selected="selected"' : ''; ?>>California</option>
<option value="Alabama" <?php echo (isset($_POST['city']) && $_POST['city'] == 'Alabama') ? 'selected="selected"' : ''; ?>>Alabama</option>
<option value="Texas" <?php echo (isset($_POST['city']) && $_POST['city'] == 'Texas') ? 'selected="selected"' : ''; ?>>Texas</option>
</select>
</form>
</body>
</html>
java script
<script type="text/javascript" >
$("#form1").click(function(){
$("#content").load(" #content");
});
</script>
You need to use onchange event of jquery and get value of select then pass the same to your php page using ajax . Changes you need to make in your code :
Your html code:
<!--remove onchange from here-->
<select id ="city" name ="city">
<!--same code -->
</select>
Your jquery code :
//onchange of select
$("#city").change(function() {
//get select value
var city = $(this).val();
console.log(city)
//ajax call
$.ajax({
url: 'urlofphppage',
type: 'POST',
data: {
'city': city
},
success: function(data) {
alert('Data: ' + data);
//add data which recieve from server to div
$("#content").html(data);
}
});
});
Your php page :
if (isset($_POST['city'])){
$listings = $_POST['city'];
switch ($listings) {
case 'California':
$ship=$ship+5;
echo $ship;//will send back to ajax as response
break;
case 'Alabama':
$ship=$ship+10;
echo $ship; //will send back to ajax as response
break;
case 'Texas':
$ship=$ship+15;
echo $ship; //will send back to ajax as response
}
}
Answered by Swati on November 18, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP