开发者

load div without refresing page using select option

I want to load the results of a form into a div without refreshing the page. The result should load if an option is selected. By selecting the option submits the form without page refresh and then load the result. Here is the code, how would i use jquery with this

<form name="form" action="show.php" method="GET">
<select name="school" >
<option value="">School</option>
<option value="1">St.Peter</option>
<option value="2">JHS</option>
</select>
<input type="submit" name="Submit" value="Search" >
开发者_开发知识库</form>

<?php
$s = $_GET['school'];
if($q && ($s =='1')){echo "St.peter H.S";}
elseif($q && ($s=='2')){echo "JHS";}
else echo "Enter something"; 
?>


HTML:

<form name="form" action="show.php" method="GET">
<select name="school" >
<option value="">School</option>
<option value="1">St.Peter</option>
<option value="2">JHS</option>
</select>
<input type="submit" name="Submit" value="Search" >
</form>
<div id="result"></div>

PHP:

<?php
$s = $_GET['school'];
if($q && ($s =='1')){echo "St.peter H.S";}
elseif($q && ($s=='2')){echo "JHS";}
else echo "Enter something"; 
?>

jQuery:

$(document).ready(function(){

    $('select[name="school"]').change(function(){
        $.get('show.php', {school : $(this).val()}, function(data){
            // use .append(data), if you don't want to remove the previous content
            $('#result').html(data);
        });
    });
});


append() would be what you're looking for! Make sure you are appending to the right parent and you'll want use addClass() to style your newly created element! Good luck.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜