reload div without refresh page

Question

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>

use ajax . did you tried it ? If yes what error are you getting ? — Swati
– Swati, Commented Jul 22, 2020 at 4:17
i used ajax but nothing shown from the script , please help me .. — kemar aim
– kemar aim, Commented Jul 22, 2020 at 4:19
i adde a script and remove the Onchange from select option that i used but nothing change — kemar aim
– kemar aim, Commented Jul 22, 2020 at 4:24

Swati · Accepted Answer · 2020-07-22 04:40:59Z

2

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 Jul 22, 2020 at 4:40

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Swati Over a year ago

It will automcatically gets call when you change any options . You can test it change option in select and check your browser console you will see value of current option selected.Check this for more info.

kemar aim Over a year ago

it's work by adding <script src="ajax.googleapis.com/ajax/libs/jquery/3.5.1/…> but another select option shown

Swati Over a year ago

Can you elaborate on that? What do you mean by another select option shown?

Swati Over a year ago

Yes because in your code you have 2 select box and I think id of both you have given same here please change id of second select box and accordingly change $("#city")... as well.

Swati Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

reload div without refresh page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related