4 Replies - 8600 Views - Last Post: 08 April 2013 - 07:59 AM

#1 glopez810  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 05-April 13

how to get multiple values from a single textbox and store in array?

Posted 05 April 2013 - 03:26 PM

i have single text box, i would like to use it to first determine the array size, then the user inputs data through the same text box to fill the array. i just can't seem to get it right... here's what i've tried so far, might be some lines in there that i used to test and see my array.


<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>exercise 4 part 1</title>
    <script type="text/javascript">
    
	var myArray = [];
	
      //start function
		function start()
			{
				var button = document.getElementById("submitButton"); 
				button.addEventListener("click", calculations, false); 
		
			}	//end start
     
      //calculate stuff
     function calculations()
        {
			
		
          //capture value amount for array size
          var inputValue = document.getElementById("valueField");
          
        
	
		  //clear input and change label
          label.innerHTML = "Enter values to be calculated: ";
		  
          for (var i = 0; i < inputValue.value; ++i)
            {
              inputValue.innerHTML = ""; 
              myArray[i] = document.getElementById("valueField").value;
            }
          
         
          
          
        
		  
          result.innerHTML = myArray.length;
        
          result2.innerHTML = myArray;
      
		
          
        }
      
    //specify start function to load first
		window.addEventListener("load", start, false);
     
    </script>
  </head>
  <body>
    <form id="firstForm" action="#">
      <p><label id="label">Enter number of values: </label><input id="valueField" type="number"><input id="submitButton" value="Submit" type="button"></p>
    </form>
    <p id="result"></p>
    <p id="result2"></p>
  </body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: how to get multiple values from a single textbox and store in array?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3095
  • View blog
  • Posts: 10,361
  • Joined: 12-December 12

Re: how to get multiple values from a single textbox and store in array?

Posted 05 April 2013 - 03:43 PM

This code:

          for (var i = 0; i < inputValue.value; ++i)
            {
              inputValue.innerHTML = ""; 
              myArray[i] = document.getElementById("valueField").value;
            }

won't wait for the user to enter values, it will just read whatever is (still) in the input.

If you are just starting out then you could use a window.prompt to request values from the user, although this feature should not be used in a published web-site.

Alternatively, you might use two inputs: one for the number of values, and the other for the values themselves, perhaps separated by spaces. Otherwise, you might use separate buttons that the user can click on to progress through various stages of your code.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3095
  • View blog
  • Posts: 10,361
  • Joined: 12-December 12

Re: how to get multiple values from a single textbox and store in array?

Posted 05 April 2013 - 03:49 PM

BTW If you are just starting out then your code is quite neat :smartass:, although it is recommended (specifically for Javascript) that the opening bracket should appear at the end of the (previous) line:

function wibble() {
    // your function code
}

if (something == whatever) {
    //
}

This post has been edited by andrewsw: 05 April 2013 - 03:51 PM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3470
  • View blog
  • Posts: 9,973
  • Joined: 08-June 10

Re: how to get multiple values from a single textbox and store in array?

Posted 06 April 2013 - 12:42 AM

View Postandrewsw, on 05 April 2013 - 11:49 PM, said:

although it is recommended (specifically for Javascript) that the opening bracket should appear at the end of the (previous) line

the reason being JSs automatic semicolon insertion, which can produce unexpected results on some structures.

// example
function test(a) 
{
    // return an object literal with a name property
    return
    {
        name: a
    }
}

var foo = test("foo");
console.log(foo);
// expected result: { name: "foo" }
// actual result  : undefined

Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 126
  • View blog
  • Posts: 824
  • Joined: 25-October 08

Re: how to get multiple values from a single textbox and store in array?

Posted 08 April 2013 - 07:59 AM

Alternate possible solution:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>exercise 4 part 1</title>
<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

var myArray = [];
	
//start function
function start() {
  var button = $_("submitButton"); 
  button.addEventListener("click", calculations, false); 
} //end start
     
//calculate stuff
function calculations() {
//capture value amount for array size
  var inputValue = $_("valueField").value;
  myArray = inputValue.split(',');	

// would be good idea to check for entry of ' ' or the like
  if ((inputValue=='') || ((myArray.length-1) < 0)) { alert('No entries available'); } else {	  
    $_('result1').innerHTML = myArray.length;
    $_('result2').innerHTML = myArray.join('<br>');
  }
}
      
//specify start function to load first
window.addEventListener("load", start, false);
     
</script>
</head>
<body>
<form id="firstForm" action="#" onsubmit="return false">
 <p>
  <label id="label">Enter values (separated by commas): </label>
  <input id="valueField" type="number">
  <input id="submitButton" value="Submit" type="button">
 </p>
</form>
<p id="result1"></p>
<p id="result2"></p>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1