使用ajax提交表单后如何在div中显示元素？ （不刷新页面）

Question

How to display element in div after submit form using ajax ? (Not refresh page)

.....................................................................................................................................................................

Normal i use this way

First select radio button and then press submit button, it's will display data (with refresh page)

I want to submit form using ajax and display element in div and not refresh page

how can i do that ?

HTML

<form name="f1" method="POST" action="">
<input type="radio" name="color" value="red">red
<br>
<input type="radio" name="color" value="black">black
<br>
<input type="submit" name="submit" value="OK">
</form>

PHP

<?PHP
if ( $_GET["color"] != "" )
    {
        $sql = "SELECT * FROM products WHERE color = '$_GET[color]' order by id asc";
        $result = mysql_query($sql);
        $datas=mysql_fetch_array($result);{
        $product_name = stripslashes(str_replace('
', '<br>',($datas['product_name'])));
        }
        echo $product_name;
    }
?>

Answer 1

Try this

HTML

<form name="f1" method="POST" action="">
<input type="radio" name="color" value="red">red
<br>
<input type="radio" name="color" value="black">black
<br>
<input type="submit" name="submit" value="OK">
</form>

<!-- This element will show ajax request -->
<div id="result"></div>

Javascript

$(document).ready(function(){
  $("form[name=f1]").submit(function(){
    $.ajax({
       url : 'yourphpscript.php',
       type : 'GET',
       data : $(this).serialize(),
       success : function(data){
          $("#result").html(data);
       }
    });
    //!This is important to stay the page without reload
    return false;
  });
});