Forms

Forum Moderators: open

Message Too Old, No Replies

Forms

jeffturl

8:44 pm on Jan 31, 2007 (gmt 0)

I have been having ago at forms today, i want to enter data into an array and then output it to a form. below is my current code, i wonder if someone can help he get the data back out of the array which contains 3 elements, I would like it so the user has to press display button to be able to see the contents of the array - they would need to press it 3 times to display each element in the array! i assume i would have to do some sort of count to do this?

var list1 = ['98','AB','16'];

</script>

</head>

Current array holds
<BR><BR>
<INPUT NAME = "list1"
"TYPE = "text"
VALUE = '' >
<BR><BR>
Press button to display contents of variable....
<BR><BR>
<INPUT TYPE = "button"
VALUE = "Display"
ONCLICK = list1(0)>
</FORM>

</body>

</html>

Fotiman

9:28 pm on Jan 31, 2007 (gmt 0)

Tips:
1. Avoid intermingling HTML and JavaScript. Attach behaviors in an unobtrusive way.
2. Avoid capitalized tags... use lowercase
3. Don't use the language attribute on the script tag. Use type.


<html> 
<head> 
<title> Form Test </title> 
<script type="text/javascript"> 
var list1 = ['98','AB','16']; 
var currentIndex = 0; 
function showNext() { 
 var listInput = document.getElementById('list1'); 
 if( listInput ) { 
 listInput.value = list1[currentIndex++]; 
 if( currentIndex == list1.length ) currentIndex = 0; 
 } 
} 
function init() { 
 // Attach event listeners 
 var displayBtn = document.getElementById('displayBtn'); 
 if( displayBtn ) { 
 displayBtn.onclick = showNext; 
 } 
} 
window.onload = init; 
</script> 
</head> 
<body> 
<form name="testform"> 
<div> 
 Current array holds 
 <input name="list1" id="list1" type="text" value='' ><br> 
 Press button to display contents of variable... 
 <input type="button" id="displayBtn" value="Display"> 
 <noscript>This will not work without JavaScript enabled.</noscript> 
</div> 
</form> 
</body> 
</html>

[edited by: Fotiman at 9:32 pm (utc) on Jan. 31, 2007]

jeffturl

9:49 pm on Jan 31, 2007 (gmt 0)

Thanks for that, it is very interesting to see how you tackle the question. I certainly learnt some new code!

I really appreciate that Thank you!

jeffturl

9:11 pm on Feb 1, 2007 (gmt 0)

Is there a way to get the 3 values displayed in 3 seperate boxes instead of one?

Fotiman

3:56 pm on Feb 2, 2007 (gmt 0)

Here's a method that will work no matter how many items your array has (try adding elements to the list1 array and you'll see it add fields automatically). This method is also more 'progressive enhancement'... since you can't do anything without JavaScript enabled, there's no point including the button in the content.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html>  
<head>  
<title> Form Test </title>  
<script type="text/javascript">  
var list1 = ['98','AB','16'];  
function showNext() { 
 for( var i = 0; i < list1.length; i++ ) 
 { 
  var inputI = document.getElementById('list' + i); 
  if( inputI ) 
  { 
   inputI.value = list1[i]; 
  } 
 } 
}  
function init() {  
 // Create input boxes for each item in the list 
 var inputContainer = document.getElementById('inputContainer'); 
 var infoText = document.createTextNode( list1.length > 0? "Current array holds:" : "Array is empty." ); 
 inputContainer.appendChild(infoText); 
 for( var i = 0; i < list1.length; i++ ) 
 { 
  var inputField = document.createElement("input"); 
  inputField.id = "list" + i; 
  inputContainer.appendChild(inputField); 
 } 
 // Create the button for displaying the values 
 if( list1.length > 0 ) 
 { 
  var btnLabel = document.createElement('div'); 
  btnLabel.appendChild( document.createTextNode("Press button to display contents of variable...") ); 
  var displayBtn = document.createElement('input'); 
  displayBtn.type = "button"; 
  displayBtn.id = "displayBtn"; 
  displayBtn.value = "Display"; 
  displayBtn.onclick = showNext; 
  btnLabel.appendChild(displayBtn); 
  inputContainer.appendChild(btnLabel); 
 } 
}  
window.onload = init;  
</script>  
</head>  
<body>  
<form name="testform"> 
<div id="inputContainer"> 
 <noscript>This will not work without JavaScript enabled.</noscript> 
</div> 
</form>  
</body>  
</html>

jeffturl

8:16 pm on Feb 5, 2007 (gmt 0)

Thanks for that, if i want to return the values in my array, but instead of listing them next to each other kinda format them so it says test1 contains and return element0 and so on and so forth, i am trying to get my head around what should appear where in the program and what i can and can't do - if that makes sense!

Fotiman

9:09 pm on Feb 5, 2007 (gmt 0)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title> Form Test </title>  
<script type="text/javascript">  
var list1 = ['98','AB','16'];  
function showNext() {  
 for( var i = 0; i < list1.length; i++ )  
 {  
 var inputI = document.getElementById('list' + i);  
 if( inputI )  
 {  
 inputI.value = list1[i];  
 }  
 }  
}  
function init() {  
 // Create input boxes for each item in the list  
 var inputContainer = document.getElementById('inputContainer');  
 var infoText = document.createTextNode( list1.length > 0? "Current array holds:" : "Array is empty." );  
 inputContainer.appendChild(infoText); 
 var ul = null; 
 if( list1.length > 0 ) ul = document.createElement("ul"); 
 for( var i = 0; i < list1.length; i++ )  
 { 
 var li = document.createElement("li"); 
 var labelText = document.createElement("label"); 
 labelText.appendChild( document.createTextNode("Test " + i + " = ") ); 
 li.appendChild(labelText);  
 var inputField = document.createElement("input");  
 inputField.id = "list" + i; 
 li.appendChild(inputField);  
 ul.appendChild(li);  
 } 
 if( ul ) inputContainer.appendChild(ul); 
 // Create the button for displaying the values  
 if( list1.length > 0 )  
 {  
 var btnLabel = document.createElement('div');  
 btnLabel.appendChild( document.createTextNode("Press button to display contents of variable...") );  
 var displayBtn = document.createElement('input');  
 displayBtn.type = "button";  
 displayBtn.id = "displayBtn";  
 displayBtn.value = "Display";  
 displayBtn.onclick = showNext;  
 btnLabel.appendChild(displayBtn);  
 inputContainer.appendChild(btnLabel);  
 }  
}  
window.onload = init;  
</script>  
</head>  
<body>  
<form name="testform">  
<div id="inputContainer">  
 <noscript>This will not work without JavaScript enabled.</noscript>  
</div>  
</form>  
</body>  
</html>

[edited by: Fotiman at 9:10 pm (utc) on Feb. 5, 2007]

jeffturl

8:27 pm on Feb 6, 2007 (gmt 0)

Thanks for your help, if i wanted to squeeze a bit of text i guess for the label of the box, what would be different for each of the boxes such as "random message" followed by displaying list[0], and next "different message 2" followed by displaying list[1]. How would i go about this, as at the moment the for loop controls the labels for the boxes. I am trying to find the easiest way to do things without making the code immensly long.

Regards

Fotiman

9:42 pm on Feb 6, 2007 (gmt 0)

You could put the corresponding text into an array of it's own with the indexes corresponding to the values in the first array:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title> Form Test </title>  
<script type="text/javascript">  
var list1 = ['98','AB','16']; 
var listLabels = ["Label 1", "Label 2", "Label 3"]; 
function showNext() {  
 for( var i = 0; i < list1.length; i++ )  
 {  
 var inputI = document.getElementById('list' + i);  
 if( inputI )  
 {  
 inputI.value = list1[i];  
 }  
 }  
}  
function init() {  
 // Create input boxes for each item in the list  
 var inputContainer = document.getElementById('inputContainer');  
 var infoText = document.createTextNode( list1.length > 0? "Current array holds:" : "Array is empty." );  
 inputContainer.appendChild(infoText);  
 var ul = null;  
 if( list1.length > 0 ) ul = document.createElement("ul");  
 for( var i = 0; i < list1.length; i++ )  
 {  
 var li = document.createElement("li");  
 var labelText = document.createElement("label");  
 labelText.appendChild( document.createTextNode(listLabels[i] + " = ") );  
 li.appendChild(labelText);  
 var inputField = document.createElement("input");  
 inputField.id = "list" + i;  
 li.appendChild(inputField);  
 ul.appendChild(li);  
 }  
 if( ul ) inputContainer.appendChild(ul);  
 // Create the button for displaying the values  
 if( list1.length > 0 )  
 {  
 var btnLabel = document.createElement('div');  
 btnLabel.appendChild( document.createTextNode("Press button to display contents of variable...") );  
 var displayBtn = document.createElement('input');  
 displayBtn.type = "button";  
 displayBtn.id = "displayBtn";  
 displayBtn.value = "Display";  
 displayBtn.onclick = showNext;  
 btnLabel.appendChild(displayBtn);  
 inputContainer.appendChild(btnLabel);  
 }  
}  
window.onload = init;  
</script>  
</head>  
<body>  
<form name="testform">  
<div id="inputContainer">  
 <noscript>This will not work without JavaScript enabled.</noscript>  
</div>  
</form>  
</body>  
</html>

Forms

jeffturl

Fotiman

jeffturl

jeffturl

Fotiman

jeffturl

Fotiman

jeffturl

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week