InsideDarkWeb.com

reload div without refresh page

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>

Stack Overflow Asked by kemar aim on November 18, 2021

1 Answers

One Answer

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

Add your own answers!

Related Questions

How to split given linked list

1  Asked on December 18, 2020 by evgeni-nabokov

   

delete bigquery table from spark by using scala

1  Asked on December 17, 2020 by counter10000

     

Python : find_all() return an empty list

2  Asked on December 17, 2020 by bastien

     

expected false to deeply equal true on postman

2  Asked on December 17, 2020 by cristian-hernandez

   

Split the data in the specific column in the DataFrame

2  Asked on December 17, 2020 by jaehyeon-robert-han

   

preventDefault not working when form submit react js

2  Asked on December 17, 2020 by gihankumara

 

Array to string conversion when using heredoc syntax

2  Asked on December 17, 2020 by icecub

     

Rewrite rules for angular and express server

0  Asked on December 17, 2020 by mirzet-zukic

       

I want to achieve this cursor interaction

1  Asked on December 16, 2020 by abdelhamied-mostafa

       

How to remove nested(child) items in List using Linq?

1  Asked on December 16, 2020 by kamil

       

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.