Jquery表单提交将不起作用

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);
                });
      });  
}); 

$(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.
      });  
}); 

add return false;

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

            });
        return false;
    });  
});

you are missing a return false; in your submit handler. so your browser is not prevented from submitting your form on its own. try this:

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