Hi, i am trying to make a form that when a button is clicked, a hidden div is displayed with radio buttons. i have managed to do this, however, the pagerefreshes and after a few seconds the page resets back to normal. can anyone explain what i'm doing wrong. My code is;
<script language="javascript" type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name$='group_name']").click(function(){
var submit_value = $(this).val();
if(submit_value=='show') {
$("#yes_box").show("slow");
$("#no_box").hide();
}
else if(submit_value=='No_show') {
$("#no_box").show("slow");
$("#yes_box").hide("slow");
}
});
$("#yes_box").hide();
$("#no_box").hide();
});
</script>The HTML is;
<form action="" method="post" name="form1">
<fieldset>
<input type="submit" name="group_name" value="show" id="group_name_0" />
<br />
<div id="yes_box">
<input type="radio" name="job_role" value="1" />Job Role 1
<input type="radio" name="job_role" value="1" />Job Role 2
<input type="radio" name="job_role" value="1" />Job Role 3
<input type="radio" name="job_role" value="1" />Job Role 4
<input type="radio" name="job_role" value="1" />Job Role 5
<input type="radio" name="job_role" value="1" />Job Role 6
<input type="radio" name="job_role" value="1" />Job Role 7
<input type="radio" name="job_role" value="1" />Job Role 8
<input type="radio" name="job_role" value="1" />Job Role 9
<input type="radio" name="job_role" value="1" />Job Role 10
</div>
<input type="radio" name="group_name" value="No_show" id="group_name_1" />
</fieldset>
</form>Any advice/help would be greatly appreciated.