Hi guys, I have the code here and working fine except for the order of the alert popups/messages. I want the alert popups to be in the order of from top to bottom as it's shown in the browser. If you click Submit button without
ticking any radiobuttons, you'll see what I mean.
Will you kindly help me out? Thanks guys.
<html>
<head>
<script type="text/javascript" language="javascript">
function Form123function(){
var theForm = document.forms['Form123'];
if(!theForm['Vacation'][0].checked && !theForm['Vacation'][1].checked){
alert("Vacation: Yes\/No\?");
return false;
}
if(!theForm['happy'][0].checked && !theForm['happy'][1].checked){
alert("happy: Yes\/No\?");
return false;
}
if (theForm['yoursay'].value == ''){
alert("yoursay!");
return false;
}
if (theForm['condition'][0].checked){
var varFlg_AppleTree = false;
var varFlg_bananaTree = false;
for(var b=0;b<theForm['AppleTree'].length;b++){if(theForm['AppleTree'][b].checked)varFlg_AppleTree=true;}
for(var d=0;d<theForm['bananaTree'].length;d++){if(theForm['bananaTree'][d].checked)varFlg_bananaTree=true;}
if (!varFlg_bananaTree){
alert("Banana: Yes\/No\?");
}else if (!varFlg_AppleTree){
alert("Apple: Yes\/No\?");
}else{
return true;
}
}else if (theForm['condition'][1].checked){
var varFlg_Fries = false;
var varFlg_Burger = false;
for(var j=0;j<theForm['Fries'].length;j++){if(theForm['Fries'][j].checked)varFlg_Fries=true;}
for(var e=0;e<theForm['Burger'].length;e++){if(theForm['Burger'][e].checked)varFlg_Burger=true;}
if (!varFlg_Burger){
alert("Burger\?");
}else if (!varFlg_Fries){
alert("Fries\?");
}else{
return true;
}
}else{
alert("Please choose either \'Left\', \'Right\'")
}
return false;
}
</script>
</head>
<body>
<div>
<form action="test.html" method='POST' name='Form123' id="Form123" onSubmit="return(Form123function())">
Left
<input name="condition" type="radio" value="1" id="LeftCheckbox" onClick="myFunction()" />
Right
<input name="condition" type="radio" value="4" id="RightCheckbox" onClick="myFunction()" />
<p>
Vacation Yes
<input name="Vacation" type="radio" value="1">
No
<input name="Vacation" type="radio" value="0">
</p>
<div id="Left" style="display:none">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td> </td>
<td><strong>Yes</strong></td>
<td><strong>No</strong></td>
</tr>
<tr>
<td valign="top">Banana</b></td>
<td valign="middle"><input type="radio" name="bananaTree" id="bananaTreeYes" value="1" /></td>
<td valign="middle"><input type="radio" name="bananaTree" id="bananaTreeNo" value="0" /></td>
</tr>
<tr>
<td valign="top">Apple</td>
<td valign="middle"><input type="radio" name="AppleTree" id="AppleTreeYes" value="1" /></td>
<td valign="middle"><input type="radio" name="AppleTree" id="AppleTreeNo" value="0" /></td>
</tr>
</table>
<p> </p>
</div>
<div id="Right" style="display:none">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td> </td>
<td><strong>Yes</strong></td>
<td><strong>No</strong></td>
</tr>
<tr>
<td valign="top">Burger</td>
<td valign="middle"><input type="radio" name="Burger" id="BurgerYes" value="1" /></td>
<td valign="middle"><input type="radio" name="Burger" id="BurgerNo" value="0" /></td>
</tr>
<tr>
<td valign="top">Fries</td>
<td valign="middle"><input type="radio" name="Fries" id="FriesYes" value="1" /></td>
<td valign="middle"><input type="radio" name="Fries" id="FriesNo" value="0" /></td>
</tr>
</table>
<p> </p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"> </p></td>
</tr>
</table>
</div>
<p>
Happy Yes
<input name="happy" type="radio" value="1">
No
<input name="happy" type="radio" value="0">
<p>Your say
<input name="yoursay" type="text" id="yoursay">
<p><br />
<input type="submit" value="Submit">
</form>
<p>
</div>
</body>
<script language="javascript">
function myFunction() {
var checkBox = document.getElementById("LeftCheckbox");
var text = document.getElementById("Left");
var checkBoxAB = document.getElementById("RightCheckbox");
var text123 = document.getElementById("Right");
if (checkBox.checked == true){
text.style.display = "block";
}else{
text.style.display = "none";
document.getElementById("bananaTreeYes").checked = false;
document.getElementById("bananaTreeNo").checked = false;
document.getElementById("AppleTreeYes").checked = false;
document.getElementById("AppleTreeNo").checked = false;
}
if (checkBoxAB.checked == true){
text123.style.display = "block";
} else {
text123.style.display = "none";
document.getElementById("BurgerYes").checked = false;
document.getElementById("BurgerNo").checked = false;
document.getElementById("FriesYes").checked = false;
document.getElementById("FriesNo").checked = false;
}
}
</script>
</html>
