/    Sign up×
Community /Pin to ProfileBookmark

Retrieving Labels

Copy linkTweet thisAlerts:
Sep 29.2003

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”;
}

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliSep 29.2003 — yes use

document.getElementsByTagName("label")

it will return an array of all labels
Copy linkTweet thisAlerts:
@CharlesSep 29.2003 — [font=monospace]<!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>[/font]
Copy linkTweet thisAlerts:
@ekempterauthorSep 29.2003 — 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>
Copy linkTweet thisAlerts:
@CharlesSep 29.2003 — [font=monospace]<!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>[/font]



[font=georgia]And see http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/ and http://www.w3.org/TR/html4/.[/font]
×

Success!

Help @ekempter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...