2

Basically what I want to do is when the user types a number in to an HTML form input field then presses the submit button, the number is stored in a javascript variable.

<input type="number" min="1" name="number">

var number = ?

How would I do this with javascript or with jquery?

Thank you.

Sir
  • 8,135
  • 17
  • 83
  • 146
jdc987
  • 743
  • 3
  • 10
  • 20
  • Why do you want to do this, that might help giving a better answer to ^this question. How do you plan to use that `number` variable? – plalx Aug 10 '13 at 00:20

3 Answers3

3

A simple javascript solution is to do this.

var number = document.getElementById("number").value;

This saves the value of the text box under the name 'number'. If you know javascript you can then use it to do pretty much anything. Hope this helps.

Please note that to do this, you need to use id="number" , instead of name="number".

Complete code could be something like 

<input type="number" id="number" onchange="save()">

this means that as soon as the user inputs a number, the save() function will be called in the javascript file.

javascript 

function save() {
      var number;
      number = document.getElementById("number").value;
      // Do whatever you want with the value here.
}
  • This does not solve his question fully... – Sir Aug 10 '13 at 01:34
  • Why? What else do you want to do with the variable once it's saved? :) –  Aug 10 '13 at 01:37
  • He wants it based on events. – Sir Aug 10 '13 at 01:38
  • This works and is almost the same as what Connor wrote. – jdc987 Aug 10 '13 at 01:39
  • @Dave , not sure what you mean by based on events, but i've edited the answer to my best guess. That full code above should save the number, and allow you to do whatever it is your user wants to do with it. –  Aug 10 '13 at 01:44
  • 1
    If you want it to execute on click you use event listeners. I wouldn't recommend inline onclicks. Better to use `addEventListener`. But i got downvoted for suggested it which is hilarious so oh well. More info on what i mean here: http://stackoverflow.com/questions/6941483/onclick-vs-event-handler @jdc987 @tinkerbot – Sir Aug 10 '13 at 01:45
3

Here is a javascript solution, only use this until jQuery comes built into your browser ( it might aswell be, seeing as it's the savior )

<form id="form">
  <input id="number" type="number" min="1" name="number">
  <button>Submit</button>
</form>

var form = document.getElementById('form');
    number = document.getElementById('number');
form.onsubmit = function() {
   var variable = number.value;
   alert( variable );
};

Just assign a submit handler, and get the value of the input.

My advice is to you though, please do not download jQuery just so you can store a variable.

iConnor
  • 19,997
  • 14
  • 62
  • 97
2

Here's your html, 

<form id="form">
    <input type="number" min="1" name="number" />
    <input type="submit" value="submit">
</form>

With jQuery you can do this,

var number = 0;
var $form = $("#form");
var $input = $form.find("input[name=number]");

With some events you can add the value of the input to the number variable,

$form.submit(function(e){

    e.preventDefault();
    number = +($input.val()); 

    /* 
        takes value from input when the form is submitted. 
        This will work even when you hit "enter" on your keyboard.
    */

});

In summary,

<form id="form">
    <input type="number" min="1" name="number" />
    <input type="submit" value="submit">
</form>

<script>

    var number = 0;
    var $form = $("#form");
    var $input = $form.find("input[name=number]");

    $form.submit(function(e){

        e.preventDefault();

        number = +($input.val()); 

        /* 
            takes value from input when the form is submitted. 
            This will work even when you hit "enter" on your keyboard.
        */

        alert(number);

    });

</script>

Hope that helps!

Erik5388
  • 2,171
  • 2
  • 20
  • 29