Question

I have a small script where I take in a value from a select drop down, pass it to a php script via jquery, and then return the output based on that value and display it on the same page without refresh. When I use the following code, it just reloads the page again. Please can someone help.

Many thanks

<form name="offerForm" id="offerForm" method="post">
<select id="product_dropdown">
        <option value="Sony">Sony</option>
      </select>
<input type="image" src="GO.png" alt="" width="30" height="30"/>
</form>

<div id="show"></div>



$(function() {  
      $("#offerForm").submit(function() {  
        alert("validate and process form here !");
        $.post('offers.php', $("#offerForm").serialize(), function(data) {
                    $('#show').html(data);
                });
      });  
}); 

Answer 1

$(function() {  
      $("#offerForm").submit(function() {  
        alert("validate and process form here !");
        $.post('offers.php', $("#offerForm").serialize(), function(data) {
                    $('#show').html(data);
         });
         return false; //You should add return false to prevent the form submit.
      });  
});