www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Show and hide option

  1. #1
    Join Date
    Jan 2010
    Posts
    51

    Show and hide option

    Hi,

    I have created the following form, http://www.ruks.co.uk/form.html

    I want to hide the following section

    Untitled.png

    Until the user selects number of children they want to book from the drop down menu, for example, if they select one - only one the above section will appear on the form for the user to fill, if they select 2 then two of the section will appear and so on

    is this possible

    thanks
    Ruksana

  2. #2
    Join Date
    Oct 2013
    Posts
    556
    Changes to your code are in red

    Code:
    <label class="emf-label-desc" for="element_11">Number of Children <span>*</span></label>
    <div class="emf-div-field"><select id="element_11" name="element_11" class="validate[required]" my_choice_order_type="" onchange="documentGetElementById('details').style.display='block';">
    	<option value="" selected="selected" my_order_property="first">Please select</option>
    	<option value="1"  >1</option>
    	<option value="2"  >2</option>
    	<option value="3"  >3</option>
    	<option value="4"  >4</option>
    	<option value="5"  >5</option>
    </select></div>
    
    <div id="details" style="display:none;">
    <label class="emf-label-desc" for="element_12">Name <span>*</span></label>
    <div class="emf-div-field"><span style="width:60px">
    <input class="validate[required]" style="width:100%" value="" id="element_14" name="element_14" type="text" />
    <label for="element_14" class="emf-bottom-label emf-text-center">First</label>
    </span>
    <span style="width:100px">
    <input class="validate[required]" style="width:100%" value="" id="element_15" name="element_15" type="text" />
    <label for="element_15" class="emf-bottom-label emf-text-center">Last</label>
    </span></div>
    <div class="emf-clear"></div>
    </li><li id="emf-li-19" class="emf-li-field emf-field-select data_container   ">
    <label class="emf-label-desc" for="element_19">Age <span>*</span></label>
    <div class="emf-div-field"><select id="element_19" name="element_19" class="validate[required]" my_choice_order_type="">
    	<option value="" selected="selected" my_order_property="first">Please select</option>
    	<option value="2"  >2</option>
    	<option value="3"  >3</option>
    	<option value="4"  >4</option>
    	<option value="5"  >5</option>
    	<option value="6"  >6</option>
    	<option value="7"  >7</option>
    	<option value="8"  >8</option>
    	<option value="9"  >9</option>
    	<option value="10"  >10</option>
    </select></div>
    <div class="emf-clear"></div>
    </li><li id="emf-li-20" class="emf-li-field emf-field-select data_container   ">
    <label class="emf-label-desc" for="element_20">Date and Venue <span>*</span></label>
    <div class="emf-div-field"><select id="element_20" name="element_20" class="validate[required]" my_choice_order_type="">
    	<option value="" selected="selected" my_order_property="first">Please select</option>
    	<option value="Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ"  >Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ"  >Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Thursday May 29	- THE OLTON PROJECT, 745 Warwick Rd, B927HS "  >Thursday May 29	- THE OLTON PROJECT, 745 Warwick Rd, B927HS </option>
    	<option value="Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ"  >Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ</option>
    </select></div>
    <div class="emf-clear"></div>
    </li><li id="emf-li-21" class="emf-li-field emf-field-select data_container   ">
    <label class="emf-label-desc" for="element_21">Workshop Times <span>*</span></label>
    <div class="emf-div-field"><select id="element_21" name="element_21" class="validate[required]" my_choice_order_type="">
    	<option value="" selected="selected" my_order_property="first">Please select</option>
    	<option value="Foundations Stage (2-5 yrs) - 10:30-12PM"  >Foundations Stage (2-5 yrs) - 10:30-12PM</option>
    	<option value="Key Stage 1&2 (6-10 yrs) -1PM-3PM "  >Key Stage 1&amp;2 (6-10 yrs) -1PM-3PM </option>
    </select></div>
    </div>

  3. #3
    Join Date
    Jan 2010
    Posts
    51
    I did that but it didn't hide the section

    what i want is when a user clicks on any of the numbers from the number of children drop down menu, that many forms will appear so if 1 selected only one name, age, Date and Venue and Workshop Times and if 2 is selected then two lots will display

    http://www.ruks.co.uk/form.html

  4. #4
    Join Date
    Oct 2013
    Posts
    556
    First, my apologies for not reading your post thoroughly enough, not examining your page code very well, and having a typo in my first reply (documentgetElementById('details').style.display should have been document.getElementById('details').style.display).

    That out of the way, whatever you are using to build your form creates an invalid, unholy mess of HTML. Part of why my code above didn't work was due to tags not being nested correctly. <div>s were overlapping <li>s. In the interest of clarity I stripped your form to its absolute basics -- no CSS, no JQuery et al, no proprietary form attributes. Below is what you asked for in terms of making parts of your form appear based on the number of children to be registered. With the exception of a couple of ampersands in value attributes this validates as HTML5.

    Now ... You have some "required" inputs for the children. Using the JavaScript in my code you cannot make anything beyond the inputs for the first child "required". The reason is that the inputs are still there, they just aren't visible. So if a parent fills out the form for one child they would get errors for 4 other children they don't have, or at least want to register. Confusing to say the least.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Register</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    function display(el,d1,d2,d3,d4,d5){
    	switch(el){
    		case'1':
    			d1.style.display = 'block';
    			break;
    		case'2':
    			d1.style.display = 'block';
    			d2.style.display = 'block';
    			break;
    		case'3':
    			d1.style.display = 'block';
    			d2.style.display = 'block';
    			d3.style.display = 'block';
    			break;
    		case'4':
    			d1.style.display = 'block';
    			d2.style.display = 'block';
    			d3.style.display = 'block';
    			d4.style.display = 'block';
    			break;
    		case'5':
    			d1.style.display = 'block';
    			d2.style.display = 'block';
    			d3.style.display = 'block';
    			d4.style.display = 'block';
    			d5.style.display = 'block';
    			break;
    		default:
    			d1.style.display = 'none';
    			d2.style.display = 'none';
    			d3.style.display = 'none';
    			d4.style.display = 'none';
    			d5.style.display = 'none';
    			break;
    	}
    }
    </script>
    </head>
    <body>
    
    <form id="emf-form" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/Gw015y7Cb2">
    <div>Online Booking Form</div>
        <h3>Your Details</h3>
    
        <p>Name of Parent *</p>
        <div>
          <span style="width:60px">
          <label for="element_3">First</label>
          <input required id="element_3" name="element_3" type="text" />
          </span>
          <span style="width:100px">
          <label for="element_4">Last</label>
          <input id="element_4" name="element_4" type="text" />
          </span>
        </div>
        
        <p>Mobile number *</p>
        <div>
          <input maxlength="3" id="element_8_1" name="element_8[]" type="text" />-<input maxlength="3" id="element_8_2" name="element_8[]" type="text" />-<input maxlength="4" id="element_8_3" name="element_8[]" type="text" />
        </div>
        
        <label for="element_9">Email address *</label>
          <input id="element_9" name="element_9" class="validate[required,custom[email]]" value="" size="30" type="text" />
        <h3>Your Children Details</h3>
        <label for="element_11">Number of Children *</label>
        <select id="element_11" name="element_11" onchange="display(this.value,details1,details2,details3,details4,details5)">
    	<option value="" selected="selected">Please select</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
        </select>
    
    <div id="details1" style="display:none;">	<!-- begin details1 -->
      <hr>
      <p>Name *</p>
      <div>
        <span style="width:60px">
        <label for="element_14">First</label>
        <input id="element_14" name="element_14" type="text" />
        </span>
        <span style="width:100px">
        <label for="element_15">Last</label>
        <input id="element_15" name="element_15" type="text" />
        </span>
      </div>
    
      <label for="element_19">Age *</label>
      <select id="element_19" name="element_19">
    	<option value="" selected="selected">Please select</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
      </select>
    `<br>
      <label for="element_20">Date and Venue *</label>
      <select id="element_20" name="element_20">
    	<option value="" selected="selected">Please select</option>
    	<option value="Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ">Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ">Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS ">Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS</option>
    	<option value="Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ">Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ</option>
      </select>
    `<br>
      <label for="element_21">Workshop Times *</label>
      <select id="element_21" name="element_21">
    	<option value="" selected="selected">Please select</option>
    	<option value="Foundations Stage (2-5 yrs) - 10:30-12PM">Foundations Stage (2-5 yrs) - 10:30-12PM</option>
    	<option value="Key Stage 1&2 (6-10 yrs) -1PM-3PM ">Key Stage 1&amp;2 (6-10 yrs) -1PM-3PM </option>
      </select>
      `<br>
      <label for="element_34">Please enter any allergies this child has.</label>
      <div class="emf-div-field"><input id="element_34" name="element_34" value="" size="30" type="text" class="validate[optional]"/></div>
    
      </div>		<!-- end details1 -->
      
    <div id="details2" style="display:none;">	<!-- start details2 -->	<!-- repeat this section, renaming the id to "details3", etc. up to 5, along with appropriate name= and id= changes -->
      <hr>
      <p>Name *</p>
      <div class="emf-div-field">
        <span style="width:60px">
        <label for="element_25">First</label>
        <input id="element_25" name="element_25" type="text" />
        </span>
        <span style="width:100px">
        <label for="element_26">Last</label>
        <input id="element_26" name="element_26" type="text" />
        </span>
      </div>
    
      <label for="element_30">Age *</label>
      <select id="element_30" name="element_30">
        <option value="" selected="selected">Please select</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
      `<br>
      <label for="element_31">Date and Venue *</label>
      <select id="element_31" name="element_31">
        <option value="" selected="selected">Please select</option>
        <option value="Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ">Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ</option>
        <option value="Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ">Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ</option>
        <option value="Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS ">Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS </option>
        <option value="Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ">Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ</option>
      </select>
      `<br>
      <label for="element_32">Workshop Times *</label>
      <select id="element_32" name="element_32">
        <option value="" selected="selected">Please select</option>
        <option value="Foundations Stage (2-5 yrs) - 10:30-12PM">Foundations Stage (2-5 yrs) - 10:30-12PM</option>
        <option value="Key Stage 1&2 (6-10 yrs) -1PM-3PM ">Key Stage 1&amp;2 (6-10 yrs) -1PM-3PM </option>
      </select>
      `<br>
      <label for="element_43">Please enter any allergies this child has.</label>
      <input id="element_43" name="element_43" value="" size="30" type="text"/>
    
    </div>		<!-- end details2 -->
      
    <div id="details3" style="display:none;">
      <hr>
    	[[[ Repeat details3 code here. ]]]
    </div>
      
    <div id="details4" style="display:none;">
      <hr>
    	[[[ Repeat details4 code here. ]]]
    </div>
      
    <div id="details5" style="display:none;">
      <hr>
    	[[[ Repeat details5 code here. ]]]
    </div>
      <hr>
      <hr>
    <h4>Cost &pound;10 per child (Discount for 3+ siblings &pound;8 per child)</h4>
    <input  value="Submit" type="submit"/> 
    </form>
    
    </body>
    </html>
    I also moved the allergies input into each child's entry. One child may be allergic to nuts and another to chocolate. Also reworded the label since the answer to the original question is "yes" or "no". Not much help...

    As a "professional web designer" you should be able to work it out from here.
    Last edited by Kevin2; 05-06-2014 at 06:50 PM.

  5. #5
    Join Date
    Jan 2010
    Posts
    51
    Thanks so much Kevin, this is what i wanted, I can work out the rest

  6. #6
    Join Date
    Jan 2014
    Posts
    49
    nice tutorial kevin

  7. #7
    Join Date
    Aug 2008
    Posts
    40
    My thoughts exactly. . .

  8. #8
    Join Date
    Jan 2014
    Posts
    49
    its nice

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    or

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Register</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    function display(n){
       var d=['details1','details2','details3','details4','details5'],z0=0;
       for (;z0<d.length;z0++){
         document.getElementById(d[z0]).style.display=n&&n>z0?'block':'none';
       }
    }
    </script>
    </head>
    <body>
    
    <form id="emf-form" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/Gw015y7Cb2">
    <div>Online Booking Form</div>
        <h3>Your Details</h3>
    
        <p>Name of Parent *</p>
        <div>
          <span style="width:60px">
          <label for="element_3">First</label>
          <input required id="element_3" name="element_3" type="text" />
          </span>
          <span style="width:100px">
          <label for="element_4">Last</label>
          <input id="element_4" name="element_4" type="text" />
          </span>
        </div>
    
        <p>Mobile number *</p>
        <div>
          <input maxlength="3" id="element_8_1" name="element_8[]" type="text" />-<input maxlength="3" id="element_8_2" name="element_8[]" type="text" />-<input maxlength="4" id="element_8_3" name="element_8[]" type="text" />
        </div>
    
        <label for="element_9">Email address *</label>
          <input id="element_9" name="element_9" class="validate[required,custom[email]]" value="" size="30" type="text" />
        <h3>Your Children Details</h3>
        <label for="element_11">Number of Children *</label>
        <select id="element_11" name="element_11" onchange="display(this.value)">
    	<option value="0" selected="selected">Please select</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
        </select>
    
    <div id="details1" style="display:none;">	<!-- begin details1 -->
      <hr>
      <p>Name *</p>
      <div>
        <span style="width:60px">
        <label for="element_14">First</label>
        <input id="element_14" name="element_14" type="text" />
        </span>
        <span style="width:100px">
        <label for="element_15">Last</label>
        <input id="element_15" name="element_15" type="text" />
        </span>
      </div>
    
      <label for="element_19">Age *</label>
      <select id="element_19" name="element_19">
    	<option value="" selected="selected">Please select</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
      </select>
    `<br>
      <label for="element_20">Date and Venue *</label>
      <select id="element_20" name="element_20">
    	<option value="" selected="selected">Please select</option>
    	<option value="Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ">Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ">Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ</option>
    	<option value="Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS ">Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS</option>
    	<option value="Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ">Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ</option>
      </select>
    `<br>
      <label for="element_21">Workshop Times *</label>
      <select id="element_21" name="element_21">
    	<option value="" selected="selected">Please select</option>
    	<option value="Foundations Stage (2-5 yrs) - 10:30-12PM">Foundations Stage (2-5 yrs) - 10:30-12PM</option>
    	<option value="Key Stage 1&2 (6-10 yrs) -1PM-3PM ">Key Stage 1&amp;2 (6-10 yrs) -1PM-3PM </option>
      </select>
      `<br>
      <label for="element_34">Please enter any allergies this child has.</label>
      <div class="emf-div-field"><input id="element_34" name="element_34" value="" size="30" type="text" class="validate[optional]"/></div>
    
      </div>		<!-- end details1 -->
    
    <div id="details2" style="display:none;">	<!-- start details2 -->	<!-- repeat this section, renaming the id to "details3", etc. up to 5, along with appropriate name= and id= changes -->
      <hr>
      <p>Name *</p>
      <div class="emf-div-field">
        <span style="width:60px">
        <label for="element_25">First</label>
        <input id="element_25" name="element_25" type="text" />
        </span>
        <span style="width:100px">
        <label for="element_26">Last</label>
        <input id="element_26" name="element_26" type="text" />
        </span>
      </div>
    
      <label for="element_30">Age *</label>
      <select id="element_30" name="element_30">
        <option value="" selected="selected">Please select</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
      `<br>
      <label for="element_31">Date and Venue *</label>
      <select id="element_31" name="element_31">
        <option value="" selected="selected">Please select</option>
        <option value="Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ">Tuesday May 27 - HALL GREEN, 93B School Rd, B288JQ</option>
        <option value="Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ">Wednesday May 28 - HALL GREEN, 93B School Rd, B288JQ</option>
        <option value="Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS ">Thursday May 29 - THE OLTON PROJECT, 745 Warwick Rd, B927HS </option>
        <option value="Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ">Saturday May 31 - COVENTRY Iqra Centre, 178-184 Allesly Rd, Chapel Fields, CV58GJ</option>
      </select>
      `<br>
      <label for="element_32">Workshop Times *</label>
      <select id="element_32" name="element_32">
        <option value="" selected="selected">Please select</option>
        <option value="Foundations Stage (2-5 yrs) - 10:30-12PM">Foundations Stage (2-5 yrs) - 10:30-12PM</option>
        <option value="Key Stage 1&2 (6-10 yrs) -1PM-3PM ">Key Stage 1&amp;2 (6-10 yrs) -1PM-3PM </option>
      </select>
      `<br>
      <label for="element_43">Please enter any allergies this child has.</label>
      <input id="element_43" name="element_43" value="" size="30" type="text"/>
    
    </div>		<!-- end details2 -->
    
    <div id="details3" style="display:none;">
      <hr>
    	[[[ Repeat details3 code here. ]]]
    </div>
    
    <div id="details4" style="display:none;">
      <hr>
    	[[[ Repeat details4 code here. ]]]
    </div>
    
    <div id="details5" style="display:none;">
      <hr>
    	[[[ Repeat details5 code here. ]]]
    </div>
      <hr>
      <hr>
    <h4>Cost &pound;10 per child (Discount for 3+ siblings &pound;8 per child)</h4>
    <input  value="Submit" type="submit"/>
    </form>
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Oct 2013
    Posts
    556
    Nice! I knew there was a more elegant solution with lots less code.

  11. #11
    Join Date
    Jan 2010
    Posts
    51

    Show/Hide not working

    I have use the show/hide code, but for some reason its not working - any help

    http://www.ruks.co.uk/booking_forms/...ookingform.htm

    See attached code

    thanks

    Ruksana
    Attached Files Attached Files

  12. #12
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  13. #13
    Join Date
    Jan 2010
    Posts
    51
    Quote Originally Posted by vwphillips View Post
    Thanks that worked

    Ruksana

  14. #14
    Join Date
    Jan 2010
    Posts
    51
    Quote Originally Posted by ruks12 View Post
    Thanks that worked

    Ruksana
    http://www.ruks.co.uk/new_form.html - Show hide function works but not hiding the details before user selects the number of children - not sure what i have done wrong

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <meta http-equiv="content-language" content="en" />
      <title>Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    function display(n){
       var d=['details1','details2','details3','details4','details5'],z0=0;
       for (;z0<d.length;z0++){
         document.getElementById(d[z0]).style.display=n&&n>z0?'':'none';
       }
    }
    </script>
    <style>
    .robotext {font-weight: bold; font-size: 9pt; color: #999999; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    .robolink:link {font-weight: bold; font-size: 9pt; color: #999999; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    .robolink:hover {font-weight: bold; font-size: 9pt; color: #979653; font-family: Arial, Helvetica, sans-serif; text-decoration: underline}
    .robolink:visited {font-weight: bold; font-size: 9pt; color: #979653; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    </style>
    
    </head>
    
    <body>
    <script language="Javascript">
    //formnumber = 7435
    function validate(){
    var allok = true;
      if(htmlphpformgenerator1.Full_Name__1.value == ""){
        alert('Invalid input for Full Name');
        return false;
      }
      if(isNaN(htmlphpformgenerator1.Mobile_Number___2.value)){
        alert('Invalid input for Mobile Number , this must be a number')
        return false;
      }
      if(htmlphpformgenerator1.Email__3.value.indexOf("@") == -1){
        alert('Invalid input for Email, this must include "@" character(s)');
        return false;
      }
      if(htmlphpformgenerator1.Number_of_Children__4.selectedIndex == 0 ){
        alert('Invalid input for Number of Children');
        return false;
      }
      if(htmlphpformgenerator1.Full_Name__5.value == ""){
        alert('Invalid input for Full Name');
        return false;
      }
      if(htmlphpformgenerator1.Age__6.selectedIndex == 0 ){
        alert('Invalid input for Age');
        return false;
      }
      if(htmlphpformgenerator1.Time__7.selectedIndex == 0 ){
        alert('Invalid input for Time');
        return false;
      }
      if(htmlphpformgenerator1.Select_Payment__26.selectedIndex == 0 ){
        alert('Invalid input for Select Payment');
        return false;
      }
    document.htmlphpformgenerator1.Submit.disabled="disabled";
    return true;
    }
    </script>
    
    <form name="htmlphpformgenerator1" method="Post" action="htmlphpformgenerator1.php" onSubmit="return validate();">
    <table width="600" border="0" cellpadding="5" cellspacing="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__1" value="" size="30"></td></tr>
    <tr><td>Mobile Number </td><td><input type="edit" name="Mobile_Number___2" value="" size="20"></td></tr>
    <tr><td>Email</td><td><input type="edit" name="Email__3" value="" size="20"></td></tr>
    <tr><td>Number of Children</td><td><select name="Number_of_Children__4" onchange="display(this.value)">
    <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></td></tr></table>
    <table id="details1" width="600" border="0"  >
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__5" value="" size="30"></td></tr>
    <tr><td>Age</td><td><select name="Age__6"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__7"><option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__8" value="" size="30"></td></tr></table>
    <table id="details2" width="600" border="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__9" value="" size="30"></td></tr>
    <tr><td>Age </td><td><select name="Age___10"> <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__11"><option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__12" value="" size="30"></td></tr></table>
    <table id="details3" width="600" border="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__13" value="" size="30"></td></tr>
    <tr><td></td><td><input type="edit" name="__14" value="" size="20"></td></tr>
    <tr><td>Age</td><td><select name="Age__14"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__15"> <option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__16" value="" size="30"></td></tr></table>
    <table id="details4" width="600" border="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__17" value="" size="30"></td></tr>
    <tr><td>Age</td><td><select name="Age__18"> 
    <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__19">  <option value="Please Select" selected>Please Select</option><option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__20" value="" size="30"></td></tr></table>
    <table id="details5" width="600" border="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__21" value="" size="30"></td></tr>
    <tr><td>Age</td><td> 
    <select name="Age__22"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td>
    <select name="Time__23"> <option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__25" value="" size="30"></td></tr></table>
    <table width="600" border="0">
    <tr><td valign=top>Payment Method </td><td valign=top><input type="checkbox" name="Payment_By_Paypal__26" value="Yes">Payment By Paypal<br>
    <tr><td colspan=2><input type="submit" name="Submit" value="Submit Form"></td></tr>
    </table></form>
    </body>
    </html>
    thanks

    ruksana

  15. #15
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    each child table must have an initial display of none

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <meta http-equiv="content-language" content="en" />
      <title>Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    function display(n){
       var d=['details1','details2','details3','details4','details5'],z0=0;
       for (;z0<d.length;z0++){
         document.getElementById(d[z0]).style.display=n&&n>z0?'':'none';
       }
    }
    </script>
    <style>
    .robotext {font-weight: bold; font-size: 9pt; color: #999999; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    .robolink:link {font-weight: bold; font-size: 9pt; color: #999999; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    .robolink:hover {font-weight: bold; font-size: 9pt; color: #979653; font-family: Arial, Helvetica, sans-serif; text-decoration: underline}
    .robolink:visited {font-weight: bold; font-size: 9pt; color: #979653; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
    
    .hide {
      display:none;
    }
    
    </style>
    
    </head>
    
    <body>
    <script language="Javascript">
    //formnumber = 7435
    function validate(){
    var allok = true;
      if(htmlphpformgenerator1.Full_Name__1.value == ""){
        alert('Invalid input for Full Name');
        return false;
      }
      if(isNaN(htmlphpformgenerator1.Mobile_Number___2.value)){
        alert('Invalid input for Mobile Number , this must be a number')
        return false;
      }
      if(htmlphpformgenerator1.Email__3.value.indexOf("@") == -1){
        alert('Invalid input for Email, this must include "@" character(s)');
        return false;
      }
      if(htmlphpformgenerator1.Number_of_Children__4.selectedIndex == 0 ){
        alert('Invalid input for Number of Children');
        return false;
      }
      if(htmlphpformgenerator1.Full_Name__5.value == ""){
        alert('Invalid input for Full Name');
        return false;
      }
      if(htmlphpformgenerator1.Age__6.selectedIndex == 0 ){
        alert('Invalid input for Age');
        return false;
      }
      if(htmlphpformgenerator1.Time__7.selectedIndex == 0 ){
        alert('Invalid input for Time');
        return false;
      }
      if(htmlphpformgenerator1.Select_Payment__26.selectedIndex == 0 ){
        alert('Invalid input for Select Payment');
        return false;
      }
    document.htmlphpformgenerator1.Submit.disabled="disabled";
    return true;
    }
    </script>
    
    <form name="htmlphpformgenerator1" method="Post" action="htmlphpformgenerator1.php" onSubmit="return validate();">
    <table width="600" border="0" cellpadding="5" cellspacing="0">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__1" value="" size="30"></td></tr>
    <tr><td>Mobile Number </td><td><input type="edit" name="Mobile_Number___2" value="" size="20"></td></tr>
    <tr><td>Email</td><td><input type="edit" name="Email__3" value="" size="20"></td></tr>
    <tr><td>Number of Children</td><td><select name="Number_of_Children__4" onchange="display(this.value)">
    <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></td></tr></table>
    <table id="details1" width="600" border="0" class="hide" >
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__5" value="" size="30"></td></tr>
    <tr><td>Age</td><td><select name="Age__6"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__7"><option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__8" value="" size="30"></td></tr></table>
    <table id="details2" width="600" border="0" class="hide">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__9" value="" size="30"></td></tr>
    <tr><td>Age </td><td><select name="Age___10"> <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__11"><option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__12" value="" size="30"></td></tr></table>
    <table id="details3" width="600" border="0" class="hide">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__13" value="" size="30"></td></tr>
    <tr><td></td><td><input type="edit" name="__14" value="" size="20"></td></tr>
    <tr><td>Age</td><td><select name="Age__14"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__15"> <option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__16" value="" size="30"></td></tr></table>
    <table id="details4" width="600" border="0" class="hide">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__17" value="" size="30"></td></tr>
    <tr><td>Age</td><td><select name="Age__18">
    <option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td><select name="Time__19">  <option value="Please Select" selected>Please Select</option><option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__20" value="" size="30"></td></tr></table>
    <table id="details5" width="600" border="0" class="hide">
    <tr><td>Full Name</td><td><input type="edit" name="Full_Name__21" value="" size="30"></td></tr>
    <tr><td>Age</td><td>
    <select name="Age__22"><option value="Please Select" selected>Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td></tr>
    <tr><td>Time</td><td>
    <select name="Time__23"> <option value="Please Select" selected>Please Select</option>
    <option value="10.30am - 12.00pm - Foundation stage - (2-5years)">10.30am - 12.00pm - Foundation stage - (2-5years)</option>
    <option value="1.00pm - 3.00pm - Key stage 1&2 - (6-10years)">1.00pm - 3.00pm - Key stage 1&2 - (6-10years)</option>
    </select></td></tr>
    <tr><td>Please enter any allergies this child has</td><td><input type="edit" name="Please_enter_any_allergies_this_child_has__25" value="" size="30"></td></tr></table>
    <table width="600" border="0" class="hide">
    <tr><td valign=top>Payment Method </td><td valign=top><input type="checkbox" name="Payment_By_Paypal__26" value="Yes">Payment By Paypal<br>
    <tr><td colspan=2><input type="submit" name="Submit" value="Submit Form"></td></tr>
    </table></form>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles