Reset Displayed Form Fields After Hiding Other Form Fields 2

fpwr · Jun 17, 2004

We have a web application with a form that expands for additional input when a "Chemical" is selected. I'm trying to validate on one of the "revealed" fields except that I can't if the user goes back and "hides" it by clicking on "General" button again. That's probably okay, except it keeps the name of the chemical in the description box.

Clicking on the "Chemical" button works to display the chemicals drop down list as well as the HMIS selections. Clicking on the "General" button works to collapse the form and re-hide the additional fields. What I need it to do is when I click on the "General" tab after first selecting a chemical is have it also blank out all of the "revealed" form fields as well as the "Description" field that it populates.

Does anyone have an idea on an easy way to do this? Thanks.

Paul.

Here's an example:

Code:

<html><head>

<SCRIPT LANGUAGE="JavaScript">
<!--

/*****************************************/
/** Usable Forms 1.0, May 2003          **/
/** Written by ppk, [URL unfurl="true"]www.quirksmode.org[/URL]  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/

var relatedTag = 'TR';

var compatible = (
	document.getElementById && document.getElementsByTagName && document.createElement
	&&
	!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
	);

if (compatible)
	document.write('<style>.accessibility{display: none}</style>');

function prepareForm()
{
	if (!compatible) return;
	var marker = document.createElement(relatedTag);
	marker.style.display = 'none';

	var x = document.getElementsByTagName(relatedTag);
	var toBeRemoved = new Array;
	for (var i=0;i<x.length;i++)
	{
		if (x[i].getAttribute('relation'))
		{
			var y = getAllFormFields(x[i]);
			x[i].nestedRels = new Array;
			for (var j=0;j<y.length;j++)
			{
				var rel = y[j].getAttribute('show');
				if (!rel || rel == 'none') continue;
				x[i].nestedRels.push(rel);
			}
			if (!x[i].nestedRels.length) x[i].nestedRels = null;
			toBeRemoved.push(x[i]);
		}
	}

	while (toBeRemoved.length)
	{
		var rel = toBeRemoved[0].getAttribute('relation');
		if (!document.getElementById(rel))
		{
			var newMarker = marker.cloneNode(true);
			newMarker.id = rel;
			toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
		}
		document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
	}
	document.onclick = arrangeFormFields;

	var y = document.getElementsByTagName('input');
	for (var i=0;i<y.length;i++)
	{
		if (y[i].checked && y[i].getAttribute('show'))
			intoMainForm(y[i].getAttribute('show'))
	}

	var z = document.getElementsByTagName('select');
	
	// Opera weird with hidden selects in quirks mode: selectedIndex = -1
	
	for (var i=0;i<z.length;i++)
	{
		if (z[i].options[z[i].selectedIndex].getAttribute('show'))
		{
			z[i].onchange = arrangeFormFields;
			intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
		}			
	}
}

function arrangeFormFields(e)
{
	if (!e) var e = window.event;
	var tg = (e.target) ? e.target : e.srcElement;
	if (
		!(tg.nodeName == 'SELECT' && e.type == 'change')
		&&
		!(tg.nodeName == 'INPUT' && tg.getAttribute('show'))
	   ) return;
	var toBeInserted = tg.getAttribute('show');

	/* Why no switch statement? Because Netscape 3 gives an error message on encountering it,
		and this script must degrade perfectly. */

	if (tg.type == 'checkbox')
	{
		if (tg.checked)
			intoMainForm(toBeInserted);
		else
			intoWaitingRoom(toBeInserted);
	}
	else if (tg.type == 'radio')
	{
		removeOthers(tg.form[tg.name],toBeInserted)
		intoMainForm(toBeInserted);
	}
	else if (tg.type == 'select-one')
	{
		toBeInserted = tg.options[tg.selectedIndex].getAttribute('show');
		removeOthers(tg.options,toBeInserted);
		intoMainForm(toBeInserted);
	}
}

function removeOthers(others,toBeInserted)
{
	var toBeRemoved = new Array;
	for (var i=0;i<others.length;i++)
	{
		var show = others[i].getAttribute('show');
		if (show != toBeInserted)
			toBeRemoved.push(show);
	}
	while (toBeRemoved.length)
		intoWaitingRoom(toBeRemoved.shift());
}

function gatherElements(name)
{
	var Elements = new Array;
	var x = document.getElementsByTagName(relatedTag);
	for (var i=0;i<x.length;i++)
		if (x[i].getAttribute('relation') == name)
			Elements.push(x[i]);
	return Elements;
}

function intoWaitingRoom(name)
{
	if (name == 'none') return;
	var Elements = gatherElements(name);
	if (isInWaitingRoom(Elements[0])) return;
	while (Elements.length)
	{
		if (Elements[0].nestedRels)
			for (var i=0;i<Elements[0].nestedRels.length;i++)
				intoWaitingRoom(Elements[0].nestedRels[i]);
		document.getElementById('waitingRoom').appendChild(Elements.shift())
	}
}

function intoMainForm(name)
{
	if (name == 'none') return;
	var Elements = gatherElements(name);
	if (!isInWaitingRoom(Elements[0])) return;
	var insertPoint = document.getElementById(name);
	while (Elements.length)
		insertPoint.parentNode.insertBefore(Elements.shift(),insertPoint)
}

function isInWaitingRoom(obj)
{
	while(obj.nodeName != 'BODY')
	{
		obj=obj.parentNode;
		if (obj.id == 'waitingRoom')
			return true;
	}
	return false;
}


function getAllFormFields(node)
{
	var allFormFields = new Array;
	var x = node.getElementsByTagName('input');
	for (var i=0;i<x.length;i++)
		allFormFields.push(x[i]);
	var y = node.getElementsByTagName('option');
	for (var i=0;i<y.length;i++)
		allFormFields.push(y[i]);
	return allFormFields;
}

// push and shift for IE5

function Array_push() {
	var A_p = 0
	for (A_p = 0; A_p < arguments.length; A_p++) {
		this[this.length] = arguments[A_p]
	}
	return this.length
}

if (typeof Array.prototype.push == "undefined") {
	Array.prototype.push = Array_push
}

function Array_shift() {
	var A_s = 0
	var response = this[0]
	for (A_s = 0; A_s < this.length-1; A_s++) {
		this[A_s] = this[A_s + 1]
	}
	this.length--
	return response
}

if (typeof Array.prototype.shift == "undefined") {
	Array.prototype.shift = Array_shift
}

// End hiding -->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function requiredfields() {
    var form = document.General_Requisition;

    if (form.strHMISHealth.value == "") {
        alert("You must input a Health Value!");
        form.strHMISHealth.focus ();
        return false;
    }

    return true;
}
// End hiding -->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--

function validDecnum(input) {
    if (!checkDecNumber(input)) {
        alert("A Numeric value is required here");
        input.focus ();
        return false;
    }
    return true;
}

function checkDecNumber(obj)
{
        var str = obj.value;
        for (var i = 0; i < str.length; i++) {
                var ch = str.substring(i, i + 1)
                if ((ch < "0" || "9" < ch) && ch != '.') return false;
        }
        return true;
}

function calclinetotal() {
	var num = document.General_Requisition.elements.length;
	for (var i=0; i<num; i++) {
		if (document.General_Requisition.elements[i].name.substring(0,10) == "Unit_Cost_") {
			Unit_Cost_ = document.General_Requisition.elements[i].value;
			Quantity_ = document.General_Requisition.elements[i-4].value;
			if ((Unit_Cost_ != null && Unit_Cost_ != "") && (Quantity_ != null && Quantity_ != "")) {
				extcost = parseFloat(Unit_Cost_) * parseFloat(Quantity_);
				document.General_Requisition.elements[i+1].value = extcost.toString();
			}
		}
	}
	return;
}

function calcsubtotal() {
	var num = document.General_Requisition.elements.length;
	var myTotal = 0.0;
	for (var i=0; i<num; i++) {
		if (document.General_Requisition.elements[i].name.substring(0,11) == "Total_Cost_") {
			linecost = document.General_Requisition.elements[i].value
			if (linecost == null || linecost == "") {
			    fieldvalue = 0.0;
			} else {
				fieldvalue = parseFloat(document.General_Requisition.elements[i].value);
			}
			myTotal = myTotal + fieldvalue;
		}
	}
	document.General_Requisition.Total.value = myTotal.toString();
	return;
}

// End hiding -->
</SCRIPT>

</head>
<body onload="prepareForm()">

<SCRIPT LANGUAGE="JavaScript">
var codeArray1 = new Array("","1","2","3")
var nameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var ChemicalnameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var HMISHealthArray1 = new Array(""," ","3","3")
var HMISFlammableArray1 = new Array(""," ","0","0")
var HMISReactiveArray1 = new Array(""," ","3","1")
var HMISpecificArray1 = new Array(""," ","0","0")
var HMISColorArray1 = new Array(""," ","White","Blue")

function displayInfo() {
   var tempIndex
   tempIndex=document.General_Requisition.strName.selectedIndex
   tempIndex = tempIndex + 1;
   document.General_Requisition.Description_1.value=ChemicalnameArray1[tempIndex]
   document.General_Requisition.strHMISHealth.value=HMISHealthArray1[tempIndex]
   document.General_Requisition.strHMISFlammable.value=HMISFlammableArray1[tempIndex]
   document.General_Requisition.strHMISReactive.value=HMISReactiveArray1[tempIndex]
   document.General_Requisition.strHMISpecific.value=HMISpecificArray1[tempIndex]
   document.General_Requisition.strHMISColor.value=HMISColorArray1[tempIndex]
}
</SCRIPT>

<table><tbody id="waitingRoom" style="display: none"></tbody></table>

<FORM NAME="General_Requisition" ACTION="#" METHOD="POST" onSubmit="return requiredfields()">

<center><table>
	<tr>
		<td align="middle"><b>Type</b></td>
		<td align="middle"><b>Quantity</b></td>
		<td align="middle"><b>Unit</b></td>
		<td align="middle"><b>Catalog #</b></td>
		<td align="middle"><b>Description</b></td>
		<td align="middle"><b>Unit Cost</b></td>
		<td align="middle"><b>Total</b></td>
	</tr>
	<tr>
		<td><input type="radio" Name="ReqType_1" Value="General" show="none" />General&nbsp;<input type="radio" Name="ReqType_1" Value="Chemical" show="chemical" />Chemical</td>
		<td><input size="3" type="text" name="Quantity_1" onBlur="validDecnum(this); calclinetotal(); calcsubtotal();"></td>
		<td>
			<SELECT NAME="Unit_1">
				<OPTION VALUE="each">each</option>
				<OPTION VALUE="dozen">dozen</option>
			</SELECT>
		</td>
		<td><input size="10" type="text" name="Catalog_1"></td>
		<td><input size="60" type="text" name="Description_1"></td>
		<td><input size="7" type="text" name="Unit_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
		<td><input size="8" type="text" name="Total_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
	</tr>

	<tr relation="chemical">
		<td colspan=6><b>Please select a chemical:</b>&nbsp;<SELECT NAME="strName" onChange="displayInfo()">
			<option value="0">Please select a Chemical...</option>
			<option value="1">Sulphuric Acid</option>
			<option value="2">Chloroform</option>
		</SELECT></td>
	</tr>
	<tr relation="chemical">
		<td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
		<td align="middle"><b>Health</b></td>
		<td align="middle"><b>Flammable</b></td>
		<td align="middle"><b>Reactive</b></td>
		<td align="middle"><b>Specific</b></td>
		<td align="middle"><b>Color Code</b></td>
	</tr>
	<tr relation="chemical">
		<td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
		<td><input size="3" type="text" name="strHMISHealth"></td>
		<td><input size="3" type="text" name="strHMISFlammable"></td>
		<td><input size="3" type="text" name="strHMISReactive"></td>
		<td><input size="3" type="text" name="strHMISpecific"></td>
		<td><input size="10" type="text" name="strHMISColor"></td>
	</tr>

	<tr><td colspan="5" align="right">TOTAL:&nbsp;</td><td align="right"><input size="10" type="text" name="Total"></td></tr>
</table></center>

	<br><br><center><INPUT TYPE="submit" Name="SelectButton" VALUE="Submit Requisition"></center>

</form>

</body></html>

kaht · Jun 17, 2004

fpwr, I made some changes to your code, see if this is what you were wanting:
(Changes in bold)

Code:

<html><head>

<SCRIPT LANGUAGE="JavaScript">
<!--

/*****************************************/
/** Usable Forms 1.0, May 2003          **/
/** Written by ppk, [URL unfurl="true"]www.quirksmode.org[/URL]  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/

var relatedTag = 'TR';
[b]var chemicalFlag = false;[/b]

var compatible = (
    document.getElementById && document.getElementsByTagName && document.createElement
    &&
    !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
    );

if (compatible)
    document.write('<style>.accessibility{display: none}</style>');

function prepareForm()
{
    if (!compatible) return;
    var marker = document.createElement(relatedTag);
    marker.style.display = 'none';

    var x = document.getElementsByTagName(relatedTag);
    var toBeRemoved = new Array;
    for (var i=0;i<x.length;i++)
    {
        if (x[i].getAttribute('relation'))
        {
            var y = getAllFormFields(x[i]);
            x[i].nestedRels = new Array;
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('show');
                if (!rel || rel == 'none') continue;
                x[i].nestedRels.push(rel);
            }
            if (!x[i].nestedRels.length) x[i].nestedRels = null;
            toBeRemoved.push(x[i]);
        }
    }

    while (toBeRemoved.length)
    {
        var rel = toBeRemoved[0].getAttribute('relation');
        if (!document.getElementById(rel))
        {
            var newMarker = marker.cloneNode(true);
            newMarker.id = rel;
            toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
        }
        document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
    }
    document.onclick = arrangeFormFields;

    var y = document.getElementsByTagName('input');
    for (var i=0;i<y.length;i++)
    {
        if (y[i].checked && y[i].getAttribute('show'))
            intoMainForm(y[i].getAttribute('show'))
    }

    var z = document.getElementsByTagName('select');
    
    // Opera weird with hidden selects in quirks mode: selectedIndex = -1
    
    for (var i=0;i<z.length;i++)
    {
        if (z[i].options[z[i].selectedIndex].getAttribute('show'))
        {
            z[i].onchange = arrangeFormFields;
            intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
        }            
    }
}

function arrangeFormFields(e)
{
    if (!e) var e = window.event;
    var tg = (e.target) ? e.target : e.srcElement;
    if (
        !(tg.nodeName == 'SELECT' && e.type == 'change')
        &&
        !(tg.nodeName == 'INPUT' && tg.getAttribute('show'))
       ) return;
    var toBeInserted = tg.getAttribute('show');

    /* Why no switch statement? Because Netscape 3 gives an error message on encountering it,
        and this script must degrade perfectly. */

    if (tg.type == 'checkbox')
    {
        if (tg.checked)
            intoMainForm(toBeInserted);
        else
            intoWaitingRoom(toBeInserted);
    }
    else if (tg.type == 'radio')
    {
        removeOthers(tg.form[tg.name],toBeInserted)
        intoMainForm(toBeInserted);
    }
    else if (tg.type == 'select-one')
    {
        toBeInserted = tg.options[tg.selectedIndex].getAttribute('show');
        removeOthers(tg.options,toBeInserted);
        intoMainForm(toBeInserted);
    }
}

function removeOthers(others,toBeInserted)
{
    var toBeRemoved = new Array;
    for (var i=0;i<others.length;i++)
    {
        var show = others[i].getAttribute('show');
        if (show != toBeInserted)
            toBeRemoved.push(show);
    }
    while (toBeRemoved.length)
        intoWaitingRoom(toBeRemoved.shift());
}

function gatherElements(name)
{
    var Elements = new Array;
    var x = document.getElementsByTagName(relatedTag);
    for (var i=0;i<x.length;i++)
        if (x[i].getAttribute('relation') == name)
            Elements.push(x[i]);
    return Elements;
}

function intoWaitingRoom(name)
{
    if (name == 'none') return;
    var Elements = gatherElements(name);
    if (isInWaitingRoom(Elements[0])) return;
    while (Elements.length)
    {
        if (Elements[0].nestedRels)
            for (var i=0;i<Elements[0].nestedRels.length;i++)
                intoWaitingRoom(Elements[0].nestedRels[i]);
        document.getElementById('waitingRoom').appendChild(Elements.shift())
    }
}

function intoMainForm(name)
{
    if (name == 'none') return;
    var Elements = gatherElements(name);
    if (!isInWaitingRoom(Elements[0])) return;
    var insertPoint = document.getElementById(name);
    while (Elements.length)
        insertPoint.parentNode.insertBefore(Elements.shift(),insertPoint)
}

function isInWaitingRoom(obj)
{
    while(obj.nodeName != 'BODY')
    {
        obj=obj.parentNode;
        if (obj.id == 'waitingRoom')
            return true;
    }
    return false;
}


function getAllFormFields(node)
{
    var allFormFields = new Array;
    var x = node.getElementsByTagName('input');
    for (var i=0;i<x.length;i++)
        allFormFields.push(x[i]);
    var y = node.getElementsByTagName('option');
    for (var i=0;i<y.length;i++)
        allFormFields.push(y[i]);
    return allFormFields;
}

// push and shift for IE5

function Array_push() {
    var A_p = 0
    for (A_p = 0; A_p < arguments.length; A_p++) {
        this[this.length] = arguments[A_p]
    }
    return this.length
}

if (typeof Array.prototype.push == "undefined") {
    Array.prototype.push = Array_push
}

function Array_shift() {
    var A_s = 0
    var response = this[0]
    for (A_s = 0; A_s < this.length-1; A_s++) {
        this[A_s] = this[A_s + 1]
    }
    this.length--
    return response
}

if (typeof Array.prototype.shift == "undefined") {
    Array.prototype.shift = Array_shift
}

// End hiding -->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function requiredfields() {
    var form = document.General_Requisition;

    if (form.strHMISHealth.value == "") {
        alert("You must input a Health Value!");
        form.strHMISHealth.focus ();
        return false;
    }

    return true;
}
// End hiding -->
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--

function validDecnum(input) {
    if (!checkDecNumber(input)) {
        alert("A Numeric value is required here");
        input.focus ();
        return false;
    }
    return true;
}

function checkDecNumber(obj)
{
        var str = obj.value;
        for (var i = 0; i < str.length; i++) {
                var ch = str.substring(i, i + 1)
                if ((ch < "0" || "9" < ch) && ch != '.') return false;
        }
        return true;
}

function calclinetotal() {
    var num = document.General_Requisition.elements.length;
    for (var i=0; i<num; i++) {
        if (document.General_Requisition.elements[i].name.substring(0,10) == "Unit_Cost_") {
            Unit_Cost_ = document.General_Requisition.elements[i].value;
            Quantity_ = document.General_Requisition.elements[i-4].value;
            if ((Unit_Cost_ != null && Unit_Cost_ != "") && (Quantity_ != null && Quantity_ != "")) {
                extcost = parseFloat(Unit_Cost_) * parseFloat(Quantity_);
                document.General_Requisition.elements[i+1].value = extcost.toString();
            }
        }
    }
    return;
}

function calcsubtotal() {
    var num = document.General_Requisition.elements.length;
    var myTotal = 0.0;
    for (var i=0; i<num; i++) {
        if (document.General_Requisition.elements[i].name.substring(0,11) == "Total_Cost_") {
            linecost = document.General_Requisition.elements[i].value
            if (linecost == null || linecost == "") {
                fieldvalue = 0.0;
            } else {
                fieldvalue = parseFloat(document.General_Requisition.elements[i].value);
            }
            myTotal = myTotal + fieldvalue;
        }
    }
    document.General_Requisition.Total.value = myTotal.toString();
    return;
}
[b]
function clearFields() {
   if (chemicalFlag) {
      document.General_Requisition.strName.selectedIndex = 0;
      document.General_Requisition.Description_1.value='';
      document.General_Requisition.strHMISHealth.value='';
      document.General_Requisition.strHMISFlammable.value='';
      document.General_Requisition.strHMISReactive.value='';
      document.General_Requisition.strHMISpecific.value='';
      document.General_Requisition.strHMISColor.value='';
   }
}
[/b]
// End hiding -->
</SCRIPT>

</head>
<body onload="prepareForm()">

<SCRIPT LANGUAGE="JavaScript">
var codeArray1 = new Array("","1","2","3")
var nameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var ChemicalnameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var HMISHealthArray1 = new Array(""," ","3","3")
var HMISFlammableArray1 = new Array(""," ","0","0")
var HMISReactiveArray1 = new Array(""," ","3","1")
var HMISpecificArray1 = new Array(""," ","0","0")
var HMISColorArray1 = new Array(""," ","White","Blue")

function displayInfo() {
   var tempIndex
   tempIndex=document.General_Requisition.strName.selectedIndex
   tempIndex = tempIndex + 1;
   document.General_Requisition.Description_1.value=ChemicalnameArray1[tempIndex]
   document.General_Requisition.strHMISHealth.value=HMISHealthArray1[tempIndex]
   document.General_Requisition.strHMISFlammable.value=HMISFlammableArray1[tempIndex]
   document.General_Requisition.strHMISReactive.value=HMISReactiveArray1[tempIndex]
   document.General_Requisition.strHMISpecific.value=HMISpecificArray1[tempIndex]
   document.General_Requisition.strHMISColor.value=HMISColorArray1[tempIndex]
}
</SCRIPT>

<table><tbody id="waitingRoom" style="display: none"></tbody></table>

<FORM NAME="General_Requisition" ACTION="#" METHOD="POST" onSubmit="return requiredfields()">

<center><table>
    <tr>
        <td align="middle"><b>Type</b></td>
        <td align="middle"><b>Quantity</b></td>
        <td align="middle"><b>Unit</b></td>
        <td align="middle"><b>Catalog #</b></td>
        <td align="middle"><b>Description</b></td>
        <td align="middle"><b>Unit Cost</b></td>
        <td align="middle"><b>Total</b></td>
    </tr>
    <tr>
        <td><input type="radio" Name="ReqType_1" Value="General" show="none" [b]onclick="clearFields()"[/b]/>General&nbsp;<input type="radio" Name="ReqType_1" Value="Chemical" show="chemical" [b]onclick="chemicalFlag=true;"[/b]/>Chemical</td>
        <td><input size="3" type="text" name="Quantity_1" onBlur="validDecnum(this); calclinetotal(); calcsubtotal();"></td>
        <td>
            <SELECT NAME="Unit_1">
                <OPTION VALUE="each">each</option>
                <OPTION VALUE="dozen">dozen</option>
            </SELECT>
        </td>
        <td><input size="10" type="text" name="Catalog_1"></td>
        <td><input size="60" type="text" name="Description_1"></td>
        <td><input size="7" type="text" name="Unit_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
        <td><input size="8" type="text" name="Total_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
    </tr>

    <tr relation="chemical">
        <td colspan=6><b>Please select a chemical:</b>&nbsp;<SELECT NAME="strName" onChange="displayInfo()">
            <option value="0">Please select a Chemical...</option>
            <option value="1">Sulphuric Acid</option>
            <option value="2">Chloroform</option>
        </SELECT></td>
    </tr>
    <tr relation="chemical">
        <td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
        <td align="middle"><b>Health</b></td>
        <td align="middle"><b>Flammable</b></td>
        <td align="middle"><b>Reactive</b></td>
        <td align="middle"><b>Specific</b></td>
        <td align="middle"><b>Color Code</b></td>
    </tr>
    <tr relation="chemical">
        <td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
        <td><input size="3" type="text" name="strHMISHealth"></td>
        <td><input size="3" type="text" name="strHMISFlammable"></td>
        <td><input size="3" type="text" name="strHMISReactive"></td>
        <td><input size="3" type="text" name="strHMISpecific"></td>
        <td><input size="10" type="text" name="strHMISColor"></td>
    </tr>

    <tr><td colspan="5" align="right">TOTAL:&nbsp;</td><td align="right"><input size="10" type="text" name="Total"></td></tr>
</table></center>

    <br><br><center><INPUT TYPE="submit" Name="SelectButton" VALUE="Submit Requisition"></center>

</form>

</body></html>

-kaht

mwolf00 · Jun 17, 2004

kaht - much easier solution than trying to decipher that code!!! Talk about taking a simple thing and making it far harder than it needs to be...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

fpwr · Jun 18, 2004

Thanks again kaht---that is what I was wanting to do!

Paul.

fpwr · Jun 18, 2004

One quick followup.... I tried moving this into a [tt]select[/tt] list, however, I can't seem to get the [tt]clearfields()[/tt] function to "fire" correctly (the chemical "form expansion" selection still works so I'm pretty sure that [tt]onchange[/tt] is what I want):

Code:

		<SELECT NAME="ReqType_1">
			<OPTION VALUE="General" show="none" onchange="clearFields()">General</option>
			<OPTION VALUE="Computer" show="none" onchange="clearFields()">Computer</option>
			<OPTION VALUE="Chemical" show="chemical" onchange="chemicalFlag=true;">Chemical</option>
		</SELECT>

What am I missing? Thanks.

Paul.

kaht · Jun 18, 2004

Onchange cannot be fired from option tags. Move the onchange parameter up into the select tag and then modify your clearFields function like so:

Code:

<SELECT NAME="ReqType_1" onchange="clearFields(this)">
   <OPTION VALUE="General" show="none">General</option>
   <OPTION VALUE="Computer" show="none">Computer</option>
   <OPTION VALUE="Chemical" show="chemical">Chemical</option>
</SELECT>

Code:

function clearFields(obj) {
   if (obj.selectedIndex == 2) {
      chemicalFlag = true;
   }
   else {
      if (chemicalFlag) {
         document.General_Requisition.strName.selectedIndex = 0;
         document.General_Requisition.Description_1.value='';
         document.General_Requisition.strHMISHealth.value='';
         document.General_Requisition.strHMISFlammable.value='';
         document.General_Requisition.strHMISReactive.value='';
         document.General_Requisition.strHMISpecific.value='';
         document.General_Requisition.strHMISColor.value='';
      }
   }
}

-kaht

fpwr · Jun 18, 2004

Heh...heh...okay, I'm starting to feel like your little icon guy (banging his head on the brick wall). I made the changes but it still doesn't work so I must be missing something obvious. Here's the whole thing again (which I'm assuming makes it easier):

Code:

<html><head>

<SCRIPT LANGUAGE="JavaScript">
<!--

/*****************************************/
/** Usable Forms 1.0, May 2003          **/
/** Written by ppk, [URL unfurl="true"]www.quirksmode.org[/URL]  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/


var relatedTag = 'TR';

var compatible = (
	document.getElementById && document.getElementsByTagName && document.createElement
	&&
	!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
	);

if (compatible)
	document.write('<style>.accessibility{display: none}</style>');


function prepareForm()
{
	if (!compatible) return;
	var marker = document.createElement(relatedTag);
	marker.style.display = 'none';

	var x = document.getElementsByTagName(relatedTag);
	var toBeRemoved = new Array;
	for (var i=0;i<x.length;i++)
	{
		if (x[i].getAttribute('relation'))
		{
			var y = getAllFormFields(x[i]);
			x[i].nestedRels = new Array;
			for (var j=0;j<y.length;j++)
			{
				var rel = y[j].getAttribute('show');
				if (!rel || rel == 'none') continue;
				x[i].nestedRels.push(rel);
			}
			if (!x[i].nestedRels.length) x[i].nestedRels = null;
			toBeRemoved.push(x[i]);
		}
	}

	while (toBeRemoved.length)
	{
		var rel = toBeRemoved[0].getAttribute('relation');
		if (!document.getElementById(rel))
		{
			var newMarker = marker.cloneNode(true);
			newMarker.id = rel;
			toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
		}
		document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
	}
	document.onclick = arrangeFormFields;

	var y = document.getElementsByTagName('input');
	for (var i=0;i<y.length;i++)
	{
		if (y[i].checked && y[i].getAttribute('show'))
			intoMainForm(y[i].getAttribute('show'))
	}

	var z = document.getElementsByTagName('select');
	
	// Opera weird with hidden selects in quirks mode: selectedIndex = -1
	
	for (var i=0;i<z.length;i++)
	{
		if (z[i].options[z[i].selectedIndex].getAttribute('show'))
		{
			z[i].onchange = arrangeFormFields;
			intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
		}			
	}
}

function arrangeFormFields(e)
{
	if (!e) var e = window.event;
	var tg = (e.target) ? e.target : e.srcElement;
	if (
		!(tg.nodeName == 'SELECT' && e.type == 'change')
		&&
		!(tg.nodeName == 'INPUT' && tg.getAttribute('show'))
	   ) return;
	var toBeInserted = tg.getAttribute('show');

	/* Why no switch statement? Because Netscape 3 gives an error message on encountering it,
		and this script must degrade perfectly. */

	if (tg.type == 'checkbox')
	{
		if (tg.checked)
			intoMainForm(toBeInserted);
		else
			intoWaitingRoom(toBeInserted);
	}
	else if (tg.type == 'radio')
	{
		removeOthers(tg.form[tg.name],toBeInserted)
		intoMainForm(toBeInserted);
	}
	else if (tg.type == 'select-one')
	{
		toBeInserted = tg.options[tg.selectedIndex].getAttribute('show');
		removeOthers(tg.options,toBeInserted);
		intoMainForm(toBeInserted);
	}
}

function removeOthers(others,toBeInserted)
{
	var toBeRemoved = new Array;
	for (var i=0;i<others.length;i++)
	{
		var show = others[i].getAttribute('show');
		if (show != toBeInserted)
			toBeRemoved.push(show);
	}
	while (toBeRemoved.length)
		intoWaitingRoom(toBeRemoved.shift());
}

function gatherElements(name)
{
	var Elements = new Array;
	var x = document.getElementsByTagName(relatedTag);
	for (var i=0;i<x.length;i++)
		if (x[i].getAttribute('relation') == name)
			Elements.push(x[i]);
	return Elements;
}

function intoWaitingRoom(name)
{
	if (name == 'none') return;
	var Elements = gatherElements(name);
	if (isInWaitingRoom(Elements[0])) return;
	while (Elements.length)
	{
		if (Elements[0].nestedRels)
			for (var i=0;i<Elements[0].nestedRels.length;i++)
				intoWaitingRoom(Elements[0].nestedRels[i]);
		document.getElementById('waitingRoom').appendChild(Elements.shift())
	}
}

function intoMainForm(name)
{
	if (name == 'none') return;
	var Elements = gatherElements(name);
	if (!isInWaitingRoom(Elements[0])) return;
	var insertPoint = document.getElementById(name);
	while (Elements.length)
		insertPoint.parentNode.insertBefore(Elements.shift(),insertPoint)
}

function isInWaitingRoom(obj)
{
	while(obj.nodeName != 'BODY')
	{
		obj=obj.parentNode;
		if (obj.id == 'waitingRoom')
			return true;
	}
	return false;
}


function getAllFormFields(node)
{
	var allFormFields = new Array;
	var x = node.getElementsByTagName('input');
	for (var i=0;i<x.length;i++)
		allFormFields.push(x[i]);
	var y = node.getElementsByTagName('option');
	for (var i=0;i<y.length;i++)
		allFormFields.push(y[i]);
	return allFormFields;
}

// push and shift for IE5

function Array_push() {
	var A_p = 0
	for (A_p = 0; A_p < arguments.length; A_p++) {
		this[this.length] = arguments[A_p]
	}
	return this.length
}

if (typeof Array.prototype.push == "undefined") {
	Array.prototype.push = Array_push
}

function Array_shift() {
	var A_s = 0
	var response = this[0]
	for (A_s = 0; A_s < this.length-1; A_s++) {
		this[A_s] = this[A_s + 1]
	}
	this.length--
	return response
}

if (typeof Array.prototype.shift == "undefined") {
	Array.prototype.shift = Array_shift
}
// End hiding -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var chemicalFlag = false;

function validDecnum(input) {
    if (!checkDecNumber(input)) {
        alert("A Numeric value is required here");
        input.focus ();
        return false;
    }
    return true;
}

function checkDecNumber(obj)
{
        var str = obj.value;
        for (var i = 0; i < str.length; i++) {
                var ch = str.substring(i, i + 1)
                if ((ch < "0" || "9" < ch) && ch != '.') return false;
        }
        return true;
}

function calclinetotal() {
	var num = document.General_Requisition.elements.length;
	for (var i=0; i<num; i++) {
		if (document.General_Requisition.elements[i].name.substring(0,10) == "Unit_Cost_") {
			Unit_Cost_ = document.General_Requisition.elements[i].value;
			Quantity_ = document.General_Requisition.elements[i-4].value;
			if ((Unit_Cost_ != null && Unit_Cost_ != "") && (Quantity_ != null && Quantity_ != "")) {
				extcost = parseFloat(Unit_Cost_) * parseFloat(Quantity_);
				document.General_Requisition.elements[i+1].value = extcost.toString();
			}
		}
	}
	return;
}

function calcsubtotal() {
	var num = document.General_Requisition.elements.length;
	var myTotal = 0.0;
	for (var i=0; i<num; i++) {
		if (document.General_Requisition.elements[i].name.substring(0,11) == "Total_Cost_") {
			linecost = document.General_Requisition.elements[i].value
			if (linecost == null || linecost == "") {
			    fieldvalue = 0.0;
			} else {
				fieldvalue = parseFloat(document.General_Requisition.elements[i].value);
			}
			myTotal = myTotal + fieldvalue;
		}
	}
	document.General_Requisition.Total.value = myTotal.toString();
	return;
}

function clearFields(obj) {
   if (obj.selectedIndex == 2) {
      chemicalFlag = true;
   }
   else {
      if (chemicalFlag) {
         document.General_Requisition.strName.selectedIndex = 0;
         document.General_Requisition.Description_1.value='';
         document.General_Requisition.strHMISHealth.value='';
         document.General_Requisition.strHMISFlammable.value='';
         document.General_Requisition.strHMISReactive.value='';
         document.General_Requisition.strHMISpecific.value='';
         document.General_Requisition.strHMISColor.value='';
      }
   }
}

// End hiding -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function requiredfields() {
    var form = document.General_Requisition;

    if (form.strHMISHealth.value == "") {
        alert("You must input a Health Value!");
        form.strHMISHealth.focus ();
        return false;
    }

    return true;
}
// End hiding -->
</SCRIPT>

</head>
<body onload="prepareForm()">

<SCRIPT LANGUAGE="JavaScript">
var codeArray1 = new Array("","1","2","3")
var nameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var ChemicalnameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var HMISHealthArray1 = new Array(""," ","3","3")
var HMISFlammableArray1 = new Array(""," ","0","0")
var HMISReactiveArray1 = new Array(""," ","3","1")
var HMISpecificArray1 = new Array(""," ","0","0")
var HMISColorArray1 = new Array(""," ","White","Blue")

function displayInfo() {
   var tempIndex
   tempIndex=document.General_Requisition.strName.selectedIndex
   tempIndex = tempIndex + 1;
   document.General_Requisition.Description_1.value=ChemicalnameArray1[tempIndex]
   document.General_Requisition.strHMISHealth.value=HMISHealthArray1[tempIndex]
   document.General_Requisition.strHMISFlammable.value=HMISFlammableArray1[tempIndex]
   document.General_Requisition.strHMISReactive.value=HMISReactiveArray1[tempIndex]
   document.General_Requisition.strHMISpecific.value=HMISpecificArray1[tempIndex]
   document.General_Requisition.strHMISColor.value=HMISColorArray1[tempIndex]
}
</SCRIPT>

<table><tbody id="waitingRoom" style="display: none"></tbody></table>

<FORM NAME="General_Requisition" ACTION="#" METHOD="POST" onSubmit="return requiredfields()">

<center><table>
	<tr>
		<td align="middle"><b>Type</b></td>
		<td align="middle"><b>Quantity</b></td>
		<td align="middle"><b>Unit</b></td>
		<td align="middle"><b>Catalog #</b></td>
		<td align="middle"><b>Description</b></td>
		<td align="middle"><b>Unit Cost</b></td>
		<td align="middle"><b>Total</b></td>
	</tr>
	<tr>
        <td>
<SELECT NAME="ReqType_1" onchange="clearFields(this);">
   <OPTION VALUE="General" show="none">General</option>
   <OPTION VALUE="Computer" show="none">Computer</option>
   <OPTION VALUE="Chemical" show="chemical">Chemical</option>
</SELECT>

</td>
        <td><input size="3" type="text" name="Quantity_1" onBlur="validDecnum(this); calclinetotal(); calcsubtotal();"></td>
		<td>
			<SELECT NAME="Unit_1">
				<OPTION VALUE="each">each</option>
				<OPTION VALUE="dozen">dozen</option>
			</SELECT>
		</td>
		<td><input size="10" type="text" name="Catalog_1"></td>
		<td><input size="60" type="text" name="Description_1"></td>
		<td><input size="7" type="text" name="Unit_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
		<td><input size="8" type="text" name="Total_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
	</tr>

	<tr relation="chemical">
		<td colspan=6><b>Please select a chemical:</b>&nbsp;<SELECT NAME="strName" onChange="displayInfo()">
			<option value="0">Please select a Chemical...</option>
			<option value="1">Sulphuric Acid</option>
			<option value="2">Chloroform</option>
		</SELECT></td>
	</tr>
	<tr relation="chemical">
		<td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
		<td align="middle"><b>Health</b></td>
		<td align="middle"><b>Flammable</b></td>
		<td align="middle"><b>Reactive</b></td>
		<td align="middle"><b>Specific</b></td>
		<td align="middle"><b>Color Code</b></td>
	</tr>
	<tr relation="chemical">
		<td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
		<td><input size="3" type="text" name="strHMISHealth"></td>
		<td><input size="3" type="text" name="strHMISFlammable"></td>
		<td><input size="3" type="text" name="strHMISReactive"></td>
		<td><input size="3" type="text" name="strHMISpecific"></td>
		<td><input size="10" type="text" name="strHMISColor"></td>
	</tr>

	<tr><td colspan="5" align="right">TOTAL:&nbsp;</td><td align="right"><input size="10" type="text" name="Total"></td></tr>
</table></center>

	<br><br><center><INPUT TYPE="submit" Name="SelectButton" VALUE="Submit Requisition"></center>

</form>

</body></html>

Thanks again. Paul.

fpwr · Jun 22, 2004

Okay, I've narrowed down the problem to my body tag:

Code:

<body onload="prepareForm()">

When I remove the [tt]onload="prepareForm()"[/tt] portion the [tt]clearFields()[/tt] function will work correctly (though of course this breaks the field hiding functionality).

The [tt]prepareForm()[/tt] function does the following:

Code:

function prepareForm()
{
    if (!compatible) return;
    var marker = document.createElement(relatedTag);
    marker.style.display = 'none';

    var x = document.getElementsByTagName(relatedTag);
    var toBeRemoved = new Array;
    for (var i=0;i<x.length;i++)
    {
        if (x[i].getAttribute('relation'))
        {
            var y = getAllFormFields(x[i]);
            x[i].nestedRels = new Array;
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('show');
                if (!rel || rel == 'none') continue;
                x[i].nestedRels.push(rel);
            }
            if (!x[i].nestedRels.length) x[i].nestedRels = null;
            toBeRemoved.push(x[i]);
        }
    }

    while (toBeRemoved.length)
    {
        var rel = toBeRemoved[0].getAttribute('relation');
        if (!document.getElementById(rel))
        {
            var newMarker = marker.cloneNode(true);
            newMarker.id = rel;
            toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
        }
        document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
    }
    document.onclick = arrangeFormFields;

    var y = document.getElementsByTagName('input');
    for (var i=0;i<y.length;i++)
    {
        if (y[i].checked && y[i].getAttribute('show'))
            intoMainForm(y[i].getAttribute('show'))
    }

    var z = document.getElementsByTagName('select');
    
    // Opera weird with hidden selects in quirks mode: selectedIndex = -1
    
    for (var i=0;i<z.length;i++)
    {
        if (z[i].options[z[i].selectedIndex].getAttribute('show'))
        {
            z[i].onchange = arrangeFormFields;
            intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
        }            
    }
}

For whatever reason, it seems to be incompatible with the [tt]clearFields()[/tt] function as it is currently written:

Code:

function clearFields(obj) {
   if (obj.selectedIndex == 2) {
      chemicalFlag = true;
   }
   else {
      if (chemicalFlag) {
         document.General_Requisition.strName.selectedIndex = 0;
         document.General_Requisition.Description_1.value='';
         document.General_Requisition.strHMISHealth.value='';
         document.General_Requisition.strHMISFlammable.value='';
         document.General_Requisition.strHMISReactive.value='';
         document.General_Requisition.strHMISpecific.value='';
         document.General_Requisition.strHMISColor.value='';
      }
   }
}

Does anyone have any idea what the issue between the two might be? Any help would be appreciated! Thanks.

Paul.

BillyRayPreachersSon · Jun 22, 2004

I can only imagine that this line:

Code:

z[i].onchange = arrangeFormFields;

is overwriting the onchnage event of the select box:

Code:

<SELECT NAME="ReqType_1" onchange="clearFields(this);">

Because the clearFields function is never actually getting called.

Hope this helps,
Dan

fpwr · Jun 22, 2004

That does make sense---I had determined that the [tt]clearFields()[/tt] function wasn't being called by putting in a couple of "Here I am" alerts in the script.... I'm still confused though why the [tt]onChange="validDecnum(this);"[/tt] statement would work if the problem is with [tt]onChange[/tt] in general (you can see this by putting a character in the quantity field). Shouldn't that be getting "overwritten" too if that's the case?

Either way, is there any other way to do this that would avoid the problem? Thanks.

Paul.

BillyRayPreachersSon · Jun 22, 2004

Paul said:
I'm still confused though why the onChange="validDecnum(this);" statement would work if the problem is with onChange in general (you can see this by putting a character in the quantity field). Shouldn't that be getting "overwritten" too if that's the case?

No - because the onchange overwriting that happens is only happening for select elements:

Code:

var z = document.getElementsByTagName('select');

Hope this helps,
Dan

BillyRayPreachersSon · Jun 22, 2004

>> is there any other way to do this that would avoid the problem?

What does the "prepareForm" functin actually do? Can you explain this? That way, we might be able to suggest an alternative that doesn't overwrite the onchange event.

Dan

BillyRayPreachersSon · Jun 22, 2004

Hmm - nevermind - I followed the copyright notice and read up on it ;o)

You can remove the section of code from the prepareForm function that replaces the onchange event, and call it inline alongside yours, as no other select boxes utilise the "show" attribute.

However, as the quirksmode.org code have removed your form elemets from the form, the clearFields function can no longer access them to clear them, so you'd need to rewrite that.

In my opinion (and this is just what I would do, not what other might do), you'd be better of speccing this out, and rewriting it to not use the quirksmode code - it's over-the-top for what you require it for, IMO.

Hope this helps,
Dan

fpwr · Jun 24, 2004

Can you give me some additional insight into what you mean by:

Dan said:
You can remove the section of code from the prepareForm function that replaces the onchange event, and call it inline alongside yours

Rewriting the quirksmode code is really beyond my ability at the moment (I'm just a JS hack).... All I'm really looking to do is have the chemical name & HMIS values (health, flammability, etc...) erased if someone changes the type back to something other than "chemical." Otherwise what could potentially happen is they collapse the form (e.g. by selecting "General") after selecting a chemical and then the HMIS fields are removed from the form (so the business process of requiring these values to be input/verified for chemicals is circumvented). Whatever is the simplest way of accomplishing this is probably the best for me. Would this "inline" thing you're talking about be somewhat simple to implement? Do you have quick example I could look at? Thanks.

Paul.

BillyRayPreachersSon · Jun 24, 2004

By calling it inline, I mean something like this:

Code:

<SELECT NAME="ReqType_1" onchange="arrangeFormFields(); clearFields(this);">

But as I said, the clearFields function would fail anyway due to your form fields having been removed from the form by the quirksmode code, so you'd need to rewrite it to find your form fields (maybe assign them IDs instead, and use "document.getElementById") if you really want to continue using the quirksmode code).

Personally, I'd ditch the quirksmode code and write code that does just the job you need, rather than a library of code that you're only utilising part of... But that's just me ;o)

Dan

fpwr · Aug 4, 2004

Just in case anyone references this thread later I finally did find a pretty simple solution to this problem. Rather than fight the [tt]onchange[/tt] issue I decided to just accomodate it. I moved the "clearing" statements (in bold below) up into the already-being-called [tt]intoWaitingRoom[/tt] function which accomplishes what I needed it to do. Here is the entire file which demonstrates the functionality:

Code:

<html><head>

<SCRIPT LANGUAGE="JavaScript">
<!--

/*****************************************/
/** Usable Forms 1.0, May 2003          **/
/** Written by ppk, [URL unfurl="true"]www.quirksmode.org[/URL]  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/


var relatedTag = 'TR';

var compatible = (
    document.getElementById && document.getElementsByTagName && document.createElement
    &&
    !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
    );

if (compatible)
    document.write('<style>.accessibility{display: none}</style>');


function prepareForm()
{
    if (!compatible) return;
    var marker = document.createElement(relatedTag);
    marker.style.display = 'none';

    var x = document.getElementsByTagName(relatedTag);
    var toBeRemoved = new Array;
    for (var i=0;i<x.length;i++)
    {
        if (x[i].getAttribute('relation'))
        {
            var y = getAllFormFields(x[i]);
            x[i].nestedRels = new Array;
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('show');
                if (!rel || rel == 'none') continue;
                x[i].nestedRels.push(rel);
            }
            if (!x[i].nestedRels.length) x[i].nestedRels = null;
            toBeRemoved.push(x[i]);
        }
    }

    while (toBeRemoved.length)
    {
        var rel = toBeRemoved[0].getAttribute('relation');
        if (!document.getElementById(rel))
        {
            var newMarker = marker.cloneNode(true);
            newMarker.id = rel;
            toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
        }
        document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
    }
    document.onclick = arrangeFormFields;

    var y = document.getElementsByTagName('input');
    for (var i=0;i<y.length;i++)
    {
        if (y[i].checked && y[i].getAttribute('show'))
            intoMainForm(y[i].getAttribute('show'))
    }

    var z = document.getElementsByTagName('select');
    
    // Opera weird with hidden selects in quirks mode: selectedIndex = -1
    
    for (var i=0;i<z.length;i++)
    {
        if (z[i].options[z[i].selectedIndex].getAttribute('show'))
        {
            z[i].onchange = arrangeFormFields;
            intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
        }            
    }
}

function arrangeFormFields(e)
{
    if (!e) var e = window.event;
    var tg = (e.target) ? e.target : e.srcElement;
    if (
        !(tg.nodeName == 'SELECT' && e.type == 'change')
        &&
        !(tg.nodeName == 'INPUT' && tg.getAttribute('show'))
       ) return;
    var toBeInserted = tg.getAttribute('show');

    /* Why no switch statement? Because Netscape 3 gives an error message on encountering it,
        and this script must degrade perfectly. */

    if (tg.type == 'checkbox')
    {
        if (tg.checked)
            intoMainForm(toBeInserted);
        else
            intoWaitingRoom(toBeInserted);
    }
    else if (tg.type == 'radio')
    {
        removeOthers(tg.form[tg.name],toBeInserted)
        intoMainForm(toBeInserted);
    }
    else if (tg.type == 'select-one')
    {
        toBeInserted = tg.options[tg.selectedIndex].getAttribute('show');
        removeOthers(tg.options,toBeInserted);
        intoMainForm(toBeInserted);
    }
}

function removeOthers(others,toBeInserted)
{
    var toBeRemoved = new Array;
    for (var i=0;i<others.length;i++)
    {
        var show = others[i].getAttribute('show');
        if (show != toBeInserted)
            toBeRemoved.push(show);
    }
    while (toBeRemoved.length)
        intoWaitingRoom(toBeRemoved.shift());
}

function gatherElements(name)
{
    var Elements = new Array;
    var x = document.getElementsByTagName(relatedTag);
    for (var i=0;i<x.length;i++)
        if (x[i].getAttribute('relation') == name)
            Elements.push(x[i]);
    return Elements;
}

function intoWaitingRoom(name)
{
    if (name == 'none') return;

	 [b]document.General_Requisition.strName.selectedIndex = 0;
         document.General_Requisition.Description_1.value='';
         document.General_Requisition.strHMISHealth.value='';
         document.General_Requisition.strHMISFlammable.value='';
         document.General_Requisition.strHMISReactive.value='';
         document.General_Requisition.strHMISpecific.value='';
         document.General_Requisition.strHMISColor.value='';[/b]

    var Elements = gatherElements(name);
    if (isInWaitingRoom(Elements[0])) return;
    while (Elements.length)
    {
        if (Elements[0].nestedRels)
            for (var i=0;i<Elements[0].nestedRels.length;i++)
                intoWaitingRoom(Elements[0].nestedRels[i]);
        document.getElementById('waitingRoom').appendChild(Elements.shift())
    }

}

function intoMainForm(name)
{
    if (name == 'none') return;
    var Elements = gatherElements(name);
    if (!isInWaitingRoom(Elements[0])) return;
    var insertPoint = document.getElementById(name);
    while (Elements.length)
        insertPoint.parentNode.insertBefore(Elements.shift(),insertPoint)
}

function isInWaitingRoom(obj)
{
    while(obj.nodeName != 'BODY')
    {
        obj=obj.parentNode;
        if (obj.id == 'waitingRoom')
            return true;
    }
    return false;
}


function getAllFormFields(node)
{
    var allFormFields = new Array;
    var x = node.getElementsByTagName('input');
    for (var i=0;i<x.length;i++)
        allFormFields.push(x[i]);
    var y = node.getElementsByTagName('option');
    for (var i=0;i<y.length;i++)
        allFormFields.push(y[i]);
    return allFormFields;
}

// push and shift for IE5

function Array_push() {
    var A_p = 0
    for (A_p = 0; A_p < arguments.length; A_p++) {
        this[this.length] = arguments[A_p]
    }
    return this.length
}

if (typeof Array.prototype.push == "undefined") {
    Array.prototype.push = Array_push
}

function Array_shift() {
    var A_s = 0
    var response = this[0]
    for (A_s = 0; A_s < this.length-1; A_s++) {
        this[A_s] = this[A_s + 1]
    }
    this.length--
    return response
}

if (typeof Array.prototype.shift == "undefined") {
    Array.prototype.shift = Array_shift
}
// End hiding -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var chemicalFlag = false;

function validDecnum(input) {
    if (!checkDecNumber(input)) {
        alert("A Numeric value is required here");
        input.focus ();
        return false;
    }
    return true;
}

function checkDecNumber(obj)
{
        var str = obj.value;
        for (var i = 0; i < str.length; i++) {
                var ch = str.substring(i, i + 1)
                if ((ch < "0" || "9" < ch) && ch != '.') return false;
        }
        return true;
}

function calclinetotal() {
    var num = document.General_Requisition.elements.length;
    for (var i=0; i<num; i++) {
        if (document.General_Requisition.elements[i].name.substring(0,10) == "Unit_Cost_") {
            Unit_Cost_ = document.General_Requisition.elements[i].value;
            Quantity_ = document.General_Requisition.elements[i-4].value;
            if ((Unit_Cost_ != null && Unit_Cost_ != "") && (Quantity_ != null && Quantity_ != "")) {
                extcost = parseFloat(Unit_Cost_) * parseFloat(Quantity_);
                document.General_Requisition.elements[i+1].value = extcost.toString();
            }
        }
    }
    return;
}

function calcsubtotal() {
    var num = document.General_Requisition.elements.length;
    var myTotal = 0.0;
    for (var i=0; i<num; i++) {
        if (document.General_Requisition.elements[i].name.substring(0,11) == "Total_Cost_") {
            linecost = document.General_Requisition.elements[i].value
            if (linecost == null || linecost == "") {
                fieldvalue = 0.0;
            } else {
                fieldvalue = parseFloat(document.General_Requisition.elements[i].value);
            }
            myTotal = myTotal + fieldvalue;
        }
    }
    document.General_Requisition.Total.value = myTotal.toString();
    return;
}

// End hiding -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function requiredfields() {
    var form = document.General_Requisition;

    if (form.strHMISHealth.value == "") {
        alert("You must input a Health Value!");
        form.strHMISHealth.focus ();
        return false;
    }

    return true;
}
// End hiding -->
</SCRIPT>

</head>
<body onload="prepareForm()">

<SCRIPT LANGUAGE="JavaScript">
var codeArray1 = new Array("","1","2","3")
var nameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var ChemicalnameArray1 = new Array(""," ","Sulphuric Acid","Chloroform")
var HMISHealthArray1 = new Array(""," ","3","3")
var HMISFlammableArray1 = new Array(""," ","0","0")
var HMISReactiveArray1 = new Array(""," ","3","1")
var HMISpecificArray1 = new Array(""," ","0","0")
var HMISColorArray1 = new Array(""," ","White","Blue")

function displayInfo() {
   var tempIndex
   tempIndex=document.General_Requisition.strName.selectedIndex
   tempIndex = tempIndex + 1;
   document.General_Requisition.Description_1.value=ChemicalnameArray1[tempIndex]
   document.General_Requisition.strHMISHealth.value=HMISHealthArray1[tempIndex]
   document.General_Requisition.strHMISFlammable.value=HMISFlammableArray1[tempIndex]
   document.General_Requisition.strHMISReactive.value=HMISReactiveArray1[tempIndex]
   document.General_Requisition.strHMISpecific.value=HMISpecificArray1[tempIndex]
   document.General_Requisition.strHMISColor.value=HMISColorArray1[tempIndex]
}
</SCRIPT>

<table><tbody id="waitingRoom" style="display: none"></tbody></table>

<FORM NAME="General_Requisition" ACTION="#" METHOD="POST" onSubmit="return requiredfields()">

<center><table>
    <tr>
        <td align="middle"><b>Type</b></td>
        <td align="middle"><b>Quantity</b></td>
        <td align="middle"><b>Unit</b></td>
        <td align="middle"><b>Catalog #</b></td>
        <td align="middle"><b>Description</b></td>
        <td align="middle"><b>Unit Cost</b></td>
        <td align="middle"><b>Total</b></td>
    </tr>
    <tr>
        <td>
<SELECT NAME="ReqType_1">
   <OPTION VALUE="General" show="none">General</option>
   <OPTION VALUE="Computer" show="none">Computer</option>
   <OPTION VALUE="Chemical" show="chemical">Chemical</option>
</SELECT>

</td>
        <td><input size="3" type="text" name="Quantity_1" onBlur="validDecnum(this); calclinetotal(); calcsubtotal();"></td>
        <td>
            <SELECT NAME="Unit_1">
                <OPTION VALUE="each">each</option>
                <OPTION VALUE="dozen">dozen</option>
            </SELECT>
        </td>
        <td><input size="10" type="text" name="Catalog_1"></td>
        <td><input size="60" type="text" name="Description_1"></td>
        <td><input size="7" type="text" name="Unit_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
        <td><input size="8" type="text" name="Total_Cost_1" onChange="validDecnum(this);" onblur="calclinetotal(); calcsubtotal();"></td>
    </tr>

    <tr relation="chemical">
        <td colspan=6><b>Please select a chemical:</b>&nbsp;<SELECT NAME="strName" onChange="displayInfo()">
            <option value="0">Please select a Chemical...</option>
            <option value="1">Sulphuric Acid</option>
            <option value="2">Chloroform</option>
        </SELECT></td>
    </tr>
    <tr relation="chemical">
        <td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
        <td align="middle"><b>Health</b></td>
        <td align="middle"><b>Flammable</b></td>
        <td align="middle"><b>Reactive</b></td>
        <td align="middle"><b>Specific</b></td>
        <td align="middle"><b>Color Code</b></td>
    </tr>
    <tr relation="chemical">
        <td align="middle">&nbsp;</td><td align="middle">&nbsp;</td>
        <td><input size="3" type="text" name="strHMISHealth"></td>
        <td><input size="3" type="text" name="strHMISFlammable"></td>
        <td><input size="3" type="text" name="strHMISReactive"></td>
        <td><input size="3" type="text" name="strHMISpecific"></td>
        <td><input size="10" type="text" name="strHMISColor"></td>
    </tr>

    <tr><td colspan="5" align="right">TOTAL:&nbsp;</td><td align="right"><input size="10" type="text" name="Total"></td></tr>
</table></center>

    <br><br><center><INPUT TYPE="submit" Name="SelectButton" VALUE="Submit Requisition"></center>

</form>

</body></html>

Thanks again---all of your input really helped me think through the process!

Paul.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Reset Displayed Form Fields After Hiding Other Form Fields 2

fpwr

Programmer

kaht

Programmer

mwolf00

Programmer

fpwr

Programmer

fpwr

Programmer

kaht

Programmer

fpwr

Programmer

fpwr

Programmer

BillyRayPreachersSon

Programmer

fpwr

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

fpwr

Programmer

BillyRayPreachersSon

Programmer

fpwr

Programmer

Similar threads

Part and Inventory Search

Sponsor