PDA

Click to See Complete Forum and Search --> : Retrieving Labels

ekempter
09-29-2003, 01:27 PM
Is it possible to retrieve a label from a form? I would like to retrieve the LABEL and parrot it back within the error message without having to hard code it. Here is part of the current form and javascript. Thanks in advance for any asistance.

<form method="get" name="addissue" onsubmit="return validate(this)">
<LABEL>Effective: </LABEL><input type="date" name="effDate" readonly size="10" border="0"></div>
<input type="submit" name="submitButtonName" value="Add" border="0">
<div ID="error" align="left">

function validate(thisForm) {
// Loop through form elements
for (counter2 = 0; counter2 < thisForm.elements.length; counter2++)
{
var e=thisForm.elements[counter2].name;
var fieldtype=thisForm.elements[counter2].type;

// If blank
if (thisForm.elements[counter2].value == "")
errormsg += thisForm.elements[counter2].name +" is blank.<br>";
fixThis(thisForm, errormsg);
...
}

function fixThis(thisForm, msg) {
error.innerHTML=msg;
error.style.color="Red";
}
Khalid Ali
09-29-2003, 01:32 PM
yes use

document.getElementsByTagName("label")

it will return an array of all labels
Charles
09-29-2003, 01:38 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
function require (f) {for (var i=0; i<f.elements.length; i++) {if (!/\S/.test(f.elements[i].value)) {alert (['Form field', f.elements[i].previousSibling.data, 'is required by the Geneova Prisoner of War Convention.'].join (' ')); f.elements[i].focus(); return false}}}
// -->
</script>

<form action="" onsubmit="require(this)">
<div>
<label>Name<input type="text"></label>
<label>Rank<input type="text"></label>
<label>Serial Number<input type="text"></label>
<button type="submit">Submit</button>
</div>
</form>
ekempter
09-29-2003, 03:04 PM
Charles,

Thanks for the script example . I integrated your code but am finding that the LABEL is not returned for checkbox and textarea types. The LABEL is returned for all text and selectName fields but not checkbox and textarea fields. Please see my HTML below.

<form method="get" name="addissue" onsubmit="return validate(this)">
<div class="tblborder">
<table border="0" cellspacing="2" cellpadding="10">
<tr align="left">
<td>
<div align="left">
<LABEL><font color="red">*</font>Medium:
<select name="selectName" size="1">
<option value="Land">Land</option>
<option value="Air">Air</option>
<option value="Water">Water</option>
</select></LABEL>
</div>
</td>
<td>
<div align="left">
<LABEL><font color="red">*</font>Effective: <input type="date" name="effDate" readonly size="10" border="0"></LABEL> <a href="javascript:cal1.popup();"><img src="images/calendar.bmp" alt="" height="20" width="20" border="0"></a>
</div>
</td>
</tr>
<tr align="left">
<td><LABEL><font color="red">*</font>Type: <select name="selectName" size="1">
<option value="Compliance">Compliance</option>
<option value="Service">Service</option>
</select></LABEL></td>
<td></td>
</tr>
<tr align="left">
<td>
<div align="left">
<LABEL><font color="red">*</font>Op Unit Type:<br>
<input type="checkbox" name="checkboxName" value="All" border="0"> All<br>
<input type="checkbox" name="checkboxName" value="Shop" border="0"> Shop<br>
<input type="checkbox" name="checkboxName" value="Land" border="0"> Land<br>
<input type="checkbox" name="checkboxName" value="Transfer" border="0"> Transfer<br>
<input type="checkbox" name="checkboxName" value="Office" border="0"> Office<br></LABEL>
</div>
</td>
<td valign="top">
<div align="left">
<LABEL><font color="red">*</font>Description:<br>
<textarea name="Description" rows="4" cols="40"></textarea></LABEL></div>
</td>
</tr>
<tr align="left">
<td valign="top"><input type="submit" name="submitButtonName" value="Add" border="0"></td>
<td valign="top"><div ID="error" align="left">

</td>
</tr>
</table>
</div>
</form>
Charles
09-29-2003, 03:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input, textarea {}
-->
</style>

<script type="text/javascript">
<!--
function require (f) {
for (var i=0; i<f.elements.length; i++) {
if (f.elements[i].type == 'text' || f.elements[i].type == 'select-one') alert (f.elements[i].previousSibling.data)
if (f.elements[i].type == 'textarea') alert (f.elements[i].previousSibling.data)
if (f.elements[i].type == 'checkbox') alert (f.elements[i].parentNode.parentNode.firstChild.firstChild.data)
}
return false;
}
// -->
</script>

<form action="" onsubmit="require(this)">
<div>
<label>Fee<input type="text"></label>
<label>Fie<textarea></textarea></label>
<fieldset>
<legend>Foe</legend>
<label><input type="checkbox" name="check">One</label>
<label><input type="checkbox" name="check">Two</label>
<label><input type="checkbox" name="check">Three</label>
<label><input type="checkbox" name="check">Four</label>
</fieldset>
<label>Fum
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</label>
<button type="submit">Submit</button>
</div>
</form>

And see http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/ and http://www.w3.org/TR/html4/.