Hi Brad,
From you description, I understand that you want to implement an examination wizard without whole page refresh. Each wizard view should has a question, three radio buttons and a button to switch wizard view. If I have any misunderstanding, please let me know.
For this scenario, I think we can achieve it with JavaScript. For example, please refer to the following code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
functionGoTo(currentDiv,targetDiv)
{
document.getElementById(currentDiv).style.display = 'none';
document.getElementById(targetDiv).style.display = 'block';
}
functionShowResult()
{
var result = 'You selected: <br/>';
var wizard1 = document.getElementById('wizard1');
var wizard2 = document.getElementById('wizard2');
var fruits = wizard1.getElementsByTagName('input');
var color = wizard2.getElementsByTagName('input');
for (var i=0; i<fruits.length; i++)
{
if (fruits[i].type = 'radio')
{
if (fruits[i].checked)
{
result = result + fruits[i].nextSibling.innerHTML + '<br/>';
break;
}
}
}
for (var i=0; i<color.length; i++)
{
if (color[i].type = 'radio')
{
if (color[i].checked)
{
result = result + color[i].nextSibling.innerHTML + '<br/>';
break;
}
}
}
document.getElementById('LabelResult').innerHTML = result;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="wizard1" style="display:block">
Please select your favorite fruit:<br/>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Orange</asp:ListItem>
<asp:ListItem>Banana</asp:ListItem>
</asp:RadioButtonList>
<input type="button" value="Next" onclick="GoTo('wizard1','wizard2')" />
</div>
<div id="wizard2" style="display:none">
Please select your favorite color:<br/>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
<asp:ListItem>Yellow</asp:ListItem>
</asp:RadioButtonList>
<input type="button" value="Next" onclick="GoTo('wizard2','wizardlast');ShowResult()" />
</div>
<div id="wizardlast" style="display:none">
<asp:Label ID="LabelResult" Text="abc" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
No comments:
Post a Comment