Help needed with Show(),Hide() Functions.
Hello,
I am in need of assistance, I'm trying to do a form creation, when the user clicks on any option from the table, the particular form would be displayed. However I am unable to display the second form with the show() function. Any simple help would be appreciated.
Thanks in advance.
-
<html>
<head>
<title>Create Survey</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var form1=1;
var form2=1;
$(document).ready(function(){
$("#1TQSA").click(function(event){
if(form1==2){
$("#1TQSADiv").hide("slow");
$("#2TQLADiv").hide("slow");
form1--;
}
else {
$("#1TQSADiv").show("slow");
$("#2TQLADiv").hide("slow");
form1++;
}
});
$("#2TQLA").click(function(event){
if(form2==2){
$("#1TQSADiv").hide("slow");
$("#2TQLADiv").hide("slow");
form2--;
}
else {
$("#1TQSADiv").hide("slow");
$("#2TQLADiv").show("slow");
form2++;
}
});
});
function hideFunc(){
$("#1TQSADiv").hide();
$("#2TQLADiv").hide();
}
</script>
</head>
<body onload="hideFunc()">
<h1>TEST</h1>
<form>
<p>Select the type of question that you would like to create</p>
<table border="1" width="700">
<tr>
<td id="1TQSA" width="350">Textbox Question (Short Answer)</td>
<td id="2TQLA" width="350">Textbox Question (Long Answer)</td>
</tr>
<tr>
<td id="3MCQSA" width="350">Multiple Choice Question (Single Answer) </td>
<td id="4MCQMA" width="350">Multiple Choice Question (Multiple Answer)</td>
</tr>
</table>
<div id="1TQSADiv">
<form id="1TQSAForm" action="" method="post">
Title of Question <br/>
<input type="textbox" id="1TQSAFormTB1" />
<input type="submit" id="1TQSAFormSubmit" />
</form>
<div>
<div id="2TQLADiv">
<form id="2TQLAForm" action="" method="post">
Title of Question <br/>
<input type="textbox" id="2TQLAFormTB1" /> <br/>
<input type="textbox" id="2TQLAFormTB2" /> <br/>
<input type="textbox" id="2TQLAFormTB3" />
<input type="submit" id="2TQLAFormSubmit" />
</form>
<div>
</form>
</body>
</html>