HTML form submits values and stores all of them in a new array(javascript)

Question

I am trying to make a form with one text input and a submit button. What I want the script to do is take the text after I click submit and store it as a value. After that, if I type something else (without refreshing the page) and click submit store the input as another value. This process can be done one hunded times so I will have 100 different values. What I also want to do with this values is put them in a new array.So: var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];. The code I have managed to write untill now is this but it won't actually help you:

<!DOCTYPE html>
<html>
<body>

<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {

}
function myFunction2() {
 var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
  document.getElementById("demo").innerHTML = AllValues;  
}
</script>

</body>
</html>

I am asking this question after trying a lot of things which didn't worked and I know that the script will work only if I use HTML local storage but I don't have the knowledge to do it even if I did a lot of research on this topic. I dont want to only store the values but I want to get them inside a new Array. I am making the question a bit more general as always in order to help as many as possible. Could you please help me? Thanks in advance.

Thomas Weglinski · Accepted Answer · 2015-06-04 22:06:55Z

2

You had several issues, the main is that you have to provide the "id" attribute for the input text named "fname". Next you have to store the AllValues array in context visible by two declared functions (in this case, the global context).

<!DOCTYPE html>
<html>
<body>

<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
    var fname = document.getElementById("fname").value;
    AllValues.push(fname);
}
function myFunction2() {
  document.getElementById("demo").innerHTML = AllValues;  
}
</script>

</body>
</html>

Try also the immediate function to avoid storing variables in global context. The code that I paste is not very clean of course, but working :)

edited Jun 4, 2015 at 22:06

answered Jun 4, 2015 at 20:53

Thomas Weglinski

1,0941 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen P Over a year ago

One fix you and the original question need is the handler declaration. onclick="myFunction()" assigns the click handler to the result of calling myFunction — while onclick="myFunction" assigns the function named myFunction as the handler.

darshanags · Accepted Answer · 2015-06-04 21:05:40Z

1

For a very basic way of doing this, try the following:

HTML:

<form id="form1">Type the words here:
    <input type="text" name="fname">
    <br>
    <input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>

JS:

var values = new Array();

$(".submit").on("click", function () {
    values.push($('input[name="fname"]').val());
});

$(".show-button").on("click", function () {
    $("#demo").html(values.join("<br>"));
});

Fiddle here: http://jsfiddle.net/5z4g04js/2/

answered Jun 4, 2015 at 21:05

darshanags

2,5271 gold badge15 silver badges19 bronze badges

2 Comments

Oluderi Over a year ago

Thanks for your help. It really helped me a lot. Do you know how can I make a button which clears the array(deletes all the values stored)?

darshanags Over a year ago

use array_name.length = 0. I updated the fiddle: jsfiddle.net/5z4g04js/3

Mario · Accepted Answer · 2015-06-04 21:41:28Z

1

My answer:

<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');

btnSubmit.onclick = function() {
  var words = document.getElementById('words').value;
  arrWords = words.split(' ');
  console.log(arrWords);
}

btnPrint.onclick = function() {
  for(var i = 0; i < arrWords.length; i++) {
     demo.innerHTML += arrWords[i]+"<br>";
  }
}

</script>

</body>
</html>

edited Jun 4, 2015 at 21:41

answered Jun 4, 2015 at 21:19

Mario

113 bronze badges

Comments

cs04iz1 · Accepted Answer · 2015-06-04 22:13:08Z

1

You could use jquery to do that:

var all_values =[];

    function myFunction() {
    var temp_val = $("#fname").val();
        alert(temp_val);
        all_values.push(temp_val);
    }


    function myFunction2() {
    alert(all_values);
    }

<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>

working demo

p.s. edited jquery answer with more changes. working demo

edited Jun 4, 2015 at 22:13

answered Jun 4, 2015 at 20:56

cs04iz1

1,8251 gold badge20 silver badges30 bronze badges

3 Comments

Stephen P Over a year ago

If you're using jQuery to do that you ought to attach the click handlers the "right" way. Inline onclick="function" handlers are not the way to go.

cs04iz1 Over a year ago

At this point there is an already writen code, and i make only the necessary changes. If it was mine i would use the .click() handler. Either way plz elaborate on the right way, after all we are on a learning site :)

Stephen P Over a year ago

Yes, I meant jquery .click() or .on("click", ...) and just thought if you were going from the OP plain JS to jQuery you might want to use a full jquery solution. I would have said the same thing on Thomas Weglinski's answer but that had very minimal changes and stayed with plain JS.

John S. · Accepted Answer · 2015-06-05 01:07:29Z

1

Using this getAllValues(name) function, you can return the values of any element with the name of 'name'.

function getAllValues(name) {
  var nameMatches=document.getElementsByName(name);
  var AllValues=[];
  for (var i=0; i<nameMatches.length; i++) {
    AllValues.push(nameMatches[i].name);
    AllValues.push(nameMatches[i].value);
  }
  return AllValues;
}

To call this you would use getAllValues('fname').

answered Jun 5, 2015 at 1:07

John S.

6461 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

HTML form submits values and stores all of them in a new array(javascript)

5 Answers 5

1 Comment

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related