CODEWITHSUNDEEP
javascripthtml
Nicole
Nicole

Reputation: 3

How to store inputs from a textbox in array in Javascript

<!DOCTYPE html>

<html>

<head>


<form id="form1">


Beets:<input id="number1" type="integer" size = "5">

Artichokes: <input id="number2" type="integer" size = "5">

Carrots: <input id="number3" type="integer" size = "5">

</form>

<button id = "submitButton" onclick="RunApp()" > Submit</button>
<button id = "displayButton" onclick="getAllValues()" > Display</button>

<script>


var str = "";
 function getAllValues() {
     var input1, inputs;
	 input1 = document.getElementById("form1");

	 inputs = input1.elements["number1"].value;

     for (i = 0; i < inputs.length; i++) {
         str += inputs[i].value + "  ";
     }
     alert(str);
 }


function RunApp()

{

var beets, artichokes, carrots, input1, input2, input3;


// getting inputs into variables


input1 = document.getElementById("form1");

beets = input1.elements["number1"].value;


input2 = document.getElementById("form1");

artichokes = input1.elements["number2"].value;


input3 = document.getElementById("form1");

carrots = input1.elements["number3"].value;




if (beets == "" || carrots == "" || artichokes == "" || isNaN(beets) || isNaN(carrots) || isNaN(artichokes))

{

    document.getElementById("demo").innerHTML+= "not valid" + "<br>";

    document.getElementById("demo").innerHTML+= "--------------------------" + "<br>";

}

else

{


document.getElementById("demo").innerHTML+= "Beets = " + beets + "<br>";    document.getElementById("demo").innerHTML+= "Artichokes = " + artichokes + "<br>";
document.getElementById("demo").innerHTML+= "Carrots = " + carrots + "<br>";


}
}




</script>


<p id="demo"></p>


</head>

<body>


</body>
</html>

First, this is my first time learning JS.

So, I have a text-box, a submit button, and a display button. When I enter a number in the text-box, and click submit, it shows the number. I enter my second number and clicking the submit button shows me the second number. Then I click on the display button, it will shows the number 1 and number 2 in order. If I have more inputs in the text-box, the display button will show the entire list of all the inputs from the array.

Thank you!

Upvotes: 0

Views: 22325

Answers (2)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

Well, since it's your first time and you're learning I won't just give you the answer, but I'll point you in the right direction.

You want to attach a click event on the submit button to add the value to an array, and then print the array on click of the display button.

Upvotes: 2

caslaner
caslaner

Reputation: 413

i think first you must google for this. I write something and you can improve this. I only want to give an example.

HTML:

<input type="text" id="inputbox">
<br/>
<button type="button" id="submit">Submit</button>
<button type="button" id="display">Display</button>
<br/>
<div id="screen"></div>

JS:

var inputArray = [];
var input = document.getElementById('inputbox');
var screen = document.getElementById('screen');

document.getElementById('submit').onclick = function () {
    inputArray.push(input.value);
    screen.innerHTML = input.value;
};
document.getElementById('display').onclick = function () {
    screen.innerHTML = inputArray
};

http://jsfiddle.net/y9wL27y0/

Upvotes: 0

Related Questions