SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: form validation

  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form validation

    This is a snippet of code from a form I have. When a user clicks any of the radio buttons I want the select element to become enabled. How can I code this without assigning event handlers to the id's in the radio group? In other words, what can I use as a hook to begin the function to enable the select element?

    Code:
    <fieldset id="count">
    <legend>Form Count</legend>
    	<p>How many forms do you think are available?</p>
    	<div>
    	     <input type="radio" name="survey" id="seven" class="radio">
            <label for="seven">7</label>
    	</div>
    	<div>
    	<input type="radio" name="survey" id="twelve" class="radio">
                 <label for="twelve">12</label>
    	</div>
    	<div>
    	<input type="radio" name="survey" id="three" class="radio">
                 <label for="three">3</label>
    	</div>
    	<div>
    	<input type="radio" name="survey" id="seventeen" class="radio">
                 <label for="seventeen">17</label>
    			</div>
    </fieldset>
    <fieldset>
    	<legend>Pick A Form</legend>
    	<label for="whatform">View Form:</label> 
    	<select id="whatform" name="whatform" disabled="disabled">
    		<option value="form1.html">Form 1</option>
    		<option value="form2.html">Form 2</option>
    		<option value="form3.html">Form 3</option>
    	</select>
    </fieldset>

  2. #2
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you want to do it without assigning even handler for the radio group? I don't think there is any other way?

  3. #3
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you mean in you don't want to assign even handlers by embedding JS snippet directly into the HTML of radio group? Of course, you don't need to do that. You can register event handlers from radio buttons from the external JavaScript file.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can use an identifier on the form itself, or the fieldset. The other identifiers aren't even required because you can implicitly associate the label with the input field as follows:

    Code html4strict:
    <label><input type="radio" name="survey" class="radio"> 7</label>

    By using the id of the fieldset you can perform the required task by using just the field names of the elements.

    Code javascript:
    var form = document.getElementById('count').form,
    	els = form.getElementsByTagName('input'),
    	el,
    	i;
    for (i = 0; i < els.length; i += 1) {
    	el = els[i];
    	if (el.type === 'radio') {
    		el.onclick = enableWhatForm;
    	}
    }
    function enableWhatForm() {
    	var form = document.getElementById('count').form;
    	form.elements.whatform.removeAttribute('disabled');
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks.


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
  •