Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    42
    Thanks
    13
    Thanked 0 Times in 0 Posts

    JS array output recognition

    Hi,

    I have 3 functions. I do not know how to have 2 functions recognize the output of an array from the other function. All of this revolves around input(text boxes). What is the array's output? In other words, how do I get the newly added textboxes recognized by the initial functions - what are they called? I have tried adding names like "No. of Hours[1]"; "No. of Hours(1)"; or,"No. of Hours1"; but none of that works.
    For example, one of the inputs is called "No. of Hours". That is the input textbox on the web page. When the add new rows array is invoked it adds new input textboxes and the new element is

    Code:
    el.type = 'text';          
    el.name = 'No. of Hours' + iteration;          
    el.id = 'No. of Hours' + iteration;          
    el.size = 7;         
    cellRight.appendChild(el);
    What is this new input/element called so that I can refer to it for the coded function shown below?

    The first function provides validation for user input.

    Code:
    function checkQuarters( fld )
    {
        var val = parseFloat(fld.value);
        if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
        {
            alert("Value must be a numeric and a multiple of 0.25");
            return false;
        }
        return true;
    }
    </script>
    The input for the above function is

    Code:
    <td>
    <form style="width: 5px; height: 1px;">
    <input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" />
    </form></td>
    The array outputs added textboxes thusly,

    Code:
    new_rows[row_count]['cell3']=sel;
      var cellRight = row.insertCell(3);          
      var el = document.createElement('input');          
        el.type = 'text';          
        el.name = 'No. of Hours' + iteration;          
        el.id = 'No. of Hours' + iteration;          
        el.size = 7;         
        cellRight.appendChild(el);
            new_rows[row_count]['cell']=el;
            row_count++;
    The other function uses a JQuery for a datepicker.

    Code:
    <script type="text/javascript">
    $(function() {
      $("#startdate").datepicker();
      $("#enddate").datepicker();
           }); </script>
    The input is this.

    Code:
    <td><input style="width: 70px" type="text" id="startdate"></td> 
    <td><input style="width: 70px" type="text" id="enddate"></td>
    I am lost on this and could really use some help and guidance.

    Thanks,

    John

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    el.id = 'No. of Hours '

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). But NOT spaces.

    However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks. jQuery has problems with ids that contain periods and colons.

    You can avoid these problems by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern.


    He thought he saw a Bufffalo
    Upon the chimney-piece:
    He looked again, and found it was
    His Sister's Husband's Niece.
    "Unless you leave this house," he said,
    "I'll send for the Police!"
    - Lewis Carroll

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    42
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Phillip,

    I appreciate the information and I changed the name of the input/element to "No_of_Hours".

    However, I still could use some help with the problem I have. How do I get the functions to recognize the added rows iteration. I am allowing the users to add three more rows, each row mirroring the default row, containing text type input boxes and one select list. The select list propagates to each added row with the option values listed. The input text boxes do not. In the first row the first two boxes contain a link to a JQuery datepicker calendar. That calendar does not appear in the added text boxes. The fourth input textbox I call a function that validates the users' numeric input so that it must be divisible by 4, if not then an alert appears. That works for the first row but not for the added rows.
    Any idea how I can get that to work?

    Thank you,

    John

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    John:

    It's not a good idea to use tables for page layout. CSS is the "best practice" for layout. It's probably too late though, for you to change.

    You should eliminate assigning an id to the form elements. Only a name is needed. Id's must be unique, names can be duplicated. When you assign a name this way: name = "someName[]" they are treated as an array. When validating, you can step through the array. They will also POST as an array.

    So, first, here's how to step through form elements assigned a name, as suggested:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function validate(){
    
    		var eduInput = document.getElementsByName('edu[]');
    		for (i=0; i<eduInput.length; i++)
    			{
    			 if (eduInput[i].value == "")
    				{
    			 	 alert('Complete all the fields');
    				 eduInput[i].focus();		 
    			 	 return false;
    				}
    			}
    	}
    
    </script>
    </head>
    	<body>
    		<form action="" method="post" onsubmit="return validate()">
    		Education:<br>
    			<input type="text" name="edu[]" size="24"/><br>
    			<input type="text" name="edu[]" size="24"/><br>
    			<input type="text" name="edu[]" size="24"/><br>
    			<input type="submit" value="Submit">
    		</form>
    	</body>
    </html>

    Next, you should be using cloneNode to create new "rows," not using document.createElement. So, here's how to use cloneNode to clone a table row:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    	
    	function addRow(){
    
    		var nForm = document.forms[0];
    		var nClone = nForm.getElementsByTagName('table')[0].cloneNode(true);
    		var nFloor = document.getElementById('floor');					
    		nForm.insertBefore(nClone,nFloor);
    		var nTable = document.getElementsByTagName('table');
    		nTable[nTable.length-1].getElementsByTagName('td')[0].firstChild.data = nTable.length;
    		var nField = nTable[nTable.length-1].getElementsByTagName('input');
    		for (i=0; i<nField.length; i++)
    			{
    			 nField[i].value = "";
    			}		
    	}
    
    	function removeRow(){
    
    		var nTable = document.forms[0].getElementsByTagName('table');
    		var lastTable = nTable[nTable.length-1];
    		if (nTable.length > 1)
    			{
    			 document.forms[0].removeChild(lastTable);	
    			}	
    	}
    
    </script>
    </head>
    	<body>
    		<form action="" method="post">	  
    			<table>	
    				<tr>
    					<td>1</td>
    					<td><input type="text" name="student[]" size="20" /></td>
    					<td><input type="text" name="address[]" size="20" /></td>
    					<td><input type="text" name="email[]" size="20" /></td>
    					<td><input type="text" name="complete[]" size="20" /></td>
    					<td><input type="text" name="remediation[]" size="20" /></td>
    				</tr>						
    			</table>
    			<input type="button" id="floor" value="Add" onclick="addRow();" />
    			<input type="button" value="Remove" onclick="removeRow();" />
    			<input type="submit" name="submit" value="Submit" /> 			
    		</form>
    	</body>
    </html>
    Finally, here's an example which uses cloneNode and does not use tables, but uses the "best practice" of using CSS for page layout.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    /* 	Copyright 2007, Michael J. Hill. www.javascript-demos.com    All rights reserved.		*/
    /* 	This notice must be kept intact, and is your license to use and share this code for free.	*/
    
    	var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_month[]","number_in_party"];
    	var listOpts = ["31","31","31","12","12","12","14"];  // the last integer is the maximum number of guests;
    	var prevGuests = 1;
    	var lastGuest = 1;
    	
    	function updateGuests(nGuests){
    
    		if (nGuests == 0)
    			{
    			 return; 
    			}	
    		var desiredGuests = nGuests-prevGuests;	
    		if (desiredGuests > 0)
    			{
    			 for (i=0; i<desiredGuests; i++)
    				{
    				 var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
    				 var nClone = document.forms[0].getElementsByTagName('div')[1].cloneNode(true);				 
    				 var nFloor = document.getElementById('submit');		
    		 	 	 nFields.insertBefore(nClone,nFloor);
    				 if (lastGuest < 9)
    					{
    				 	 nClone.firstChild.data = nClone.firstChild.data.replace(/\d{1,}/,Number(lastGuest + 1));
    					 var nGuest = document.getElementsByName('guest_name[]');
    					 nGuest[nGuest.length-1].value = "";	 	 	
    					} 
    				 else 	{
    					 nClone.firstChild.data = nClone.firstChild.data.substring(0,11).replace(/\d{1,}/,Number(lastGuest + 1));
    					 var nGuest = document.getElementsByName('guest_name[]');
    					 nGuest[nGuest.length-1].value = "";	 					 	 
    					}
    				 lastGuest = Number(nClone.firstChild.data.match(/\d{1,}/)[0]);	
    				}
    			}
    		else 	{
    			 desiredGuests = Math.abs(desiredGuests);
    			 for (i=0; i<desiredGuests; i++)
    				{
    				 var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
    				 nFields.removeChild(nFields.lastChild.previousSibling.previousSibling);
    				 lastGuest--;
    				}
    			}
    		prevGuests = nGuests;
    		document.body.focus();
    	}
    
    	function fillSelect(nList){
    
    		for (n=0; n<listOpts[i]; n++)
    			{
    			 var nOption = document.createElement('option'); 
    			 if (n < 9 && nList != "number_in_party")
    				{
    				 var nData = document.createTextNode("0"+(n+1)); 
    				 nOption.setAttribute("value","0"+(n+1)); 
    				}
    		 	 else 	{
    			 	 var nData = document.createTextNode(n+1); 
    				 nOption.setAttribute("value",n+1); 
    				}		 	 
    		 	 nOption.appendChild(nData); 
    			 document.forms[0][nList].appendChild(nOption); 
    			}
    	}
    	
    	function init(){
    		
    		for (i=0; i<listNames.length; i++)
    			{
    			 fillSelect(listNames[i])
    			}
    		for (i=2007; i>1906; i--)
    			{
    			 var nOption = document.createElement('option'); 
    		 	 var nData = document.createTextNode(i); 
    		 	 nOption.setAttribute('value',i); 
    		 	 nOption.appendChild(nData); 
    			 document.forms[0]['birth_year[]'].appendChild(nOption); 
    			}			
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    	
    </script>
    <style type="text/css">
    
    	 body {background-color: #f0f8ff; margin-top: 60px; margin-bottom: 60px;}
    	 form {width: 520px; margin:auto; font-family: arial; font-size:  12pt;}
    	 fieldset {width: 520px; background-color: #ffffe0; border: 1px solid #000000; padding-left: 8px; padding-bottom: 8px;}
    	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;}
    	 select {font-family: arial; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px;}
    	.input_field {font-family: arial; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;}
    	.input_textarea {font-family: arial; font-size: 10pt; width: 238px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;}
    	.submitBtn {font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; padding-top: 2px; padding-bottom: 2px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 5px; background-color: #ffffff; border: solid 1px #000000;}
    	.label_1 {margin-right: 90px;}
    	.label_2 {position: relative; top: -25px; margin-right: 175px;}
    	.label_3 {margin-right: 158px; }
    	.label_4 {margin-right: 113px;}
    	.label_5 {margin-right: 185px;}
    	.label_6 {margin-right: 191px;}
    	.label_7 {margin-right: 149px;}
    	.label_8 {margin-right: 122px;}
    	.label_9 {margin-right: 118px;}
    	.label_10 {margin-left: 115px; margin-top: 9px;}
    	.label_11 {margin-right: 5px; margin-top: 5px;}
    
    </style>
    </head>
    	<body>
    		<form method="post" action="">
    		   <fieldset>
    			<legend>Registration Form</legend>
    				<label class="label_1">Party / Group Leader:</label>
    				<input type="text" name="group_leader" size="35" class="input_field">
    
    				<br>
    				<label class="label_2">Address:</label>
    				<textarea name="postal_address" class="input_textarea"></textarea>
    
    				<br>
    				<label class="label_3">Post Code:</label>
    				<input type="text" name="postal_code" size="35" class="input_field">
    
    				<br>
    				<label class="label_4">Home Telephone:</label>
    				<input type="text" name="home_phone" size="35" class="input_field">
    
    				<br>
    				<label class="label_5">Mobile:</label>
    				<input type="text" name="mobile_phone" size="35" class="input_field">
    
    				<br>
    				<label class="label_6">Email:</label>
    				<input type="text" name="email_address" size="35" class="input_field">
    	
    				<br>
    				<label class="label_7">Arrival Date:</label>
    				<select name="arrival_day">
    					<option value="">dd</option>
    				</select>
    				<select name="arrival_month">
    					<option value="">mm</option>
    				</select>
    				<select name="arrival_year">
    					<option value="">yyyy</option>
    					<option value="2007">2007</option>
    					<option value="2008">2008</option>
    					<option value="2009">2009</option>
    					<option value="2010">2010</option>					
    				</select>
    
    				<br>
    				<label class="label_8">Departure Date:</label>
    				<select name="departure_day">
    					<option value="">dd</option>
    				</select>
    				<select name="departure_month">
    					<option value="">mm</option>
    				</select>
    				<select name="departure_year">
    					<option value="">yyyy</option>
    					<option value="2007">2007</option>
    					<option value="2008">2008</option>
    					<option value="2009">2009</option>
    					<option value="2010">2010</option>	
    				</select>
    				
    				<br>
    				<label class="label_9">Number in Party:</label>
    				<select name="number_in_party" onchange="updateGuests(this.value)">
    					<option value="0">&nbsp;&nbsp;&nbsp;?</option>
    				</select>
    
    				<div class="label_10">Guest Details - Name &amp; Date of Birth:</div>		
    				
    				<div class="label_11" id="guest_info">Guest&nbsp;1:&nbsp;&nbsp;&nbsp;&nbsp;
    					<input type="text" name="guest_name[]" size="35" class="input_field">
    					<select name="birth_day[]">
    						<option value="">dd</option>
    					</select>
    					<select name="birth_month[]">
    						<option value="">mm</option>
    					</select>
    					<select name="birth_year[]">
    						<option value="">yyyy</option>
    					</select>
    				</div>
    
    				<input type="submit" name="submit" id="submit" value="Submit" class="submitBtn">
    		   </fieldset>
    		</form>
    	</body>
    </html>
    That should help you along.


  •  

    Posting Permissions

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