PDA

View Full Version : validation of Main row & Sub row together



lsmith3306
Nov 22nd, 2003, 04:09 AM
I have a row of 4 radio buttons as my main row and a sub row that comes up when the main row is checked. The thing I need to know is once the one of the main buttons are clicked. Is their a way to validate the sub Row with the main row to make sure the person has picked the correct choice in the sub row of if they have not picked anything? I am using a Java Script now for Validation and it work great on the other parts of the from like the other radio buttons, text, and so on. I have put in the Java Script for the validation, (which works on a Submit button),I am currently using and part of my form with the main radio buttons and Sub radio buttons. Any help on this problem or Ideas?

<head>
<style type="text/css" media="screen"><!--
#subDiv1 { position: absolute; middle: 0px; middle: 0px; width: 100%; height: 100%; visibility: visible; display: block }-->
</style>
<style type="text/css" media="screen"><!--
#subDiv2 { position: absolute; middle: 0px; middle: 0px; width: 100%; height: 100%; visibility: visible; display: block }-->
</style>
<style type="text/css" media="screen"><!--
#subDiv3 { position: absolute; middle: 0px; middle: 0px; width: 100%; height: 100%; visibility: visible; display: block }-->
</style>
<style type="text/css" media="screen"><!--
#subDiv4 { position: absolute; middle: 0px; middle: 0px; width: 100%; height: 100%; visibility: visible; display: block }-->
</style>

</head>
<body>

<script type="text/javascript">
function dUit(){
if (document.form1.MyRadioGroup1[0].checked) {
for (i=1; i <4+1; i++)
document.getElementById('subDiv'+[i]).style.display = 'none'
document.getElementById('subDiv'+[1]).style.display = 'block'
}
if (form1.MyRadioGroup1[1].checked) {
for (i=1; i <4+1; i++)
document.getElementById('subDiv'+[i]).style.display = 'none'
document.getElementById('subDiv'+[2]).style.display = 'block'
}
if (form1.MyRadioGroup1[2].checked) {
for (i=1; i <4+1; i++)
document.getElementById('subDiv'+[i]).style.display = 'none'
document.getElementById('subDiv'+[3]).style.display = 'block'
}
if (form1.MyRadioGroup1[3].checked) {
for (i=1; i <4+1; i++)
document.getElementById('subDiv'+[i]).style.display = 'none'
document.getElementById('subDiv'+[4]).style.display = 'block'
}
}
</script>
<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
var fieldRequired = Array("Pillow","Pcolor","MyRadioGroup1","desc","1b_first_name","1b_middle_initial","1b_last_name","2b_addr");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Pillow Size", "Pillow Color", "Pillow Accents", "Make Your Pillow Talk", "First Name", "Middle Initial", "Last Name", "Email Address");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}

if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>

<script type="text/javascript">
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
function ReadForm (obj1, tst) { // Read the user form
var i,j,amt,des,obj,pos,val,op1a="",op1b="",op2a="",op2b="";
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
if (obj1.baseos0) op1b = obj1.baseos0.value;
if (obj1.baseon1) op2a = obj1.baseon1.value;
if (obj1.baseos1) op2b = obj1.baseos1.value;
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
pos = val.indexOf ("@"); // price set?
if (pos > 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos > 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos > 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value
} else
if (obj.type == "checkbox" || // just get checkboxex
obj.type == "radio") { // and radios
if (obj.checked) {
val = obj.value; // the value of the selection
pos = val.indexOf ("@"); // price set?
if (pos > 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos > 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos > 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value, or text
}
} else
if (obj.type == "select-multiple") { //one or more
for (j=0; j<obj.options.length; j++) { // run all options
if (obj.options[j].selected) {
val = obj.options[j].value; // selected value (default)
if (des.length = 0) des = amt;
else des = des + ", " + val;// accumulate value, or text
pos = val.indexOf ("+"); // price increment?
if (pos > 0) amt = amt + val.substring (pos + 1)*1.0;
}
}
} else
if (obj.type == "text" && // just read text,
obj.name != "tot" && // but not from here
obj.name != "quantity") {
val = obj.value; // get the data
if (val == "" && tst) { // force an entry
alert ("Enter data for " + obj.name);
return false;
}
tag = obj.name.substring (0, 2); // get special flag
if (tag == "1a") op1a = op1a + " " + val;
else if (tag == "1b") op1b = op1b + " " + val;
else if (tag == "2a") op2a = op2a + " " + val;
else if (tag == "2b") op2b = op2b + " " + val;
else if (des.length == 0) des = val;
else des = des + ", " + val;
}
}
// Now summarize stuff we just processed, above
if (op1a.length > 0) obj1.on0.value = op1a;
if (op1b.length > 0) obj1.os0.value = op1b;
if (op2a.length > 0) obj1.on1.value = op2a;
if (op2b.length > 0) obj1.os1.value = op2b;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
</script>

<table cellpadding="0" cellspacing="15">
<tr>
<form name="form1">
<PRE>
<td width="200"><label>
<input type="radio" name="MyRadioGroup1" value=1 onClick="dUit()">
Standard Radio Button</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup1" value=2 onClick="dUit()">
#2 Radio Group</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup1" value=3 onClick="dUit()">
#3 Radio Group</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup1" value=4 onClick="dUit()">
#4 Radio Group</label></td>
</tr><tr>
<td><div id="subDiv1" style="display:none">
<table><tr><td width="100"><label>
<input type="radio" name="MyRadioGroup2" value="4">
No Accents</label></td></tr></table>

<td><div id="subDiv2" style="display:none">
<table><tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="5">
Natural</label></td></tr>
<tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="6">
Blush</label></td></tr>
<tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="7">
Sage</label></td></tr>
<tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="8">
Sky</label></td></tr>
<tr><td width="140"><label>
<input type="radio" name="MyRadioGroup2" value="9">
Taupe(as pictured)</label></td></tr></table></td>
<td> <div id="subDiv3" style="display:none">
<table><tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="10">
Ivory</label></td></tr>
<tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="11">
Midnight</label></td></tr>
<tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="12">
Topaz</label></td></tr></table></td>
<td><div id="subDiv4" style="display:none">
<table><tr><td width="120"><label>
<input type="radio" name="MyRadioGroup2" value="13">
Natural </label></td></tr></table></td>
</tr>
</table>

</div>

</PRE>
</form>

</body>

zoobie
Nov 23rd, 2003, 12:06 AM
Too complicated to tell. However, maybe this will help. *bump*