SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form label value

    Hi all,

    I have a form (which has a text and submit button):

    <form action="" method="" Onclick="validate();">

    <label for="firstName">First Name</label><br />
    <input type="text" name="firstName" id="firstName" value="" size="28" maxlength="255" />

    <input type="submit" />

    </form>

    Is there any way that i could print the value between lable tags(i.e. First Name) if the firstname field left blank or for error msg?

    i think document.getElementById("").value does not work here even if i specify an id to the lable tag.

    Please help me out.

    Thank you,

    KKG.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you structured your html like:
    Code:
    <label for="firstName">First Name<br />
    <input type="text" name="firstName" id="firstName" value="" size="28" maxlength="255" /></label>
    Then from your validation function:
    Code:
    var firstNameField = document.getElementById("firstName");
    if (firstNameField.value == "") {
      var theLabel = firstNameField.parentNode;
      var theLabelText;
      for (var i=0; i < theLabel.childNodes.length; i++) {
        if (theLabel.childNodes[i].nodeType == 3) { // text node
          theLabelText = theLabel.childNodes[i].nodeValue;
          break;
        }
      }
      alert("Error in " + theLabelText + " field");
    }

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The following should help you out here.

    Code javascript:
    function validate() {
    	var isValid = true;
    	function isEmpty(id) {
    		return document.getElementById(id).value === '';
    	}
    	function getLabelContent(id) {
    		var labelContent = '';
    		var labels = document.getElementsByTagName('label');
    		for (var i = 0; i < labels.length; i++) {
    			if (labels[i].getAttribute('for') === id) {
    				labelContent = labels[i].firstChild.nodeValue;
    			}
    		}
    		return labelContent;
    	}
    	var fields = ['firstName'];
    	var id;
    	for (var i = 0; i < fields.length; i++) {
    		id = fields[i];
    		el = document.getElementById(id);
    		if (isEmpty(id)) {
    			el.value = getLabelContent(id);
    			if (isEmpty(id)) {
    				isValid = false;
    			}
    		}
    	}
    	return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •