I m using this function for loading content dynamically depending on the item chosen from a dropdown. Here's my code:
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function() {
$('.group').hide();
$('#div1').show();
$('#stype').change(function() {
var val = $(this).val();
if (val) {
$('div:not(#div' + val + ')').slideUp();
$('#div' + val).slideDown();
} else {
$('div').slideDown();
}
});
});
</script>
<form action="a.php" method="post">
Select:
<select name="stype" id="stype">
<option value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
<option value="4">op4</option>
</select>
<br><br>
<div id="div1" class="group">
This is div 1.
</div>
<div id="div2" class="group">
This is div 2.
</div>
<div id="div3" class="group">
This is div 3.
</div>
<div id="div4" class="group">
This is div 4.
</div>
<input type="submit" name="submit" value=" Submit " />
</form>
</html>
This works perfectly well when I run this on a plain php file. But when I m trying to put this up on my website, and display it as content there, whenever I make a selection from dropdown, the complete page of website slides up and is hidden. (header, breadcrumb, footer, sidebar and stuff)
How to fix this problem?
