How do I take input/output from a form and store it in a JS variable?

Question

I am creating the UI of a web app, and haven't done any back-end work yet.

For testing purposes, I want my forms to be able to work, so I want to take the input they have received and store it in javascript variables so I can access them, using jQuery.

Everything I have looked at, tells me how to pass js variables into the form, not the other way around.

Any ideas?

Thanks.

ig0774 · Accepted Answer · 2010-04-13T02:57:26.113

4

var variable = $('#myInput').val(). Or if your form is submitting using GET, you may want to look at the jQuery URL Parsing plugin to get access to the variables on the new page.

Edit:

Sample form (should be a simple text box):

<html>
    <body>
        <form action="#">
            <input type="text" id="myInput" name="myInput"/>
        </form>
    </body>
</html>

With that form you can use the above sample code. Incidentally, you can use the .val() method on any jQuery selector that returns form elements, e.g. $('input:text').val() will get you the value of all text input fields (as an array if there are multiple values).

edited Apr 13 '10 at 02:57

answered Apr 13 '10 at 00:10

ig0774

39,669
3
55
57

Where #myInput is what? The name of the form, the element in the 'action' attribute of the form? Or the name of the 'input' that has the submit button? – marcamillion Apr 13 '10 at 00:16
2

In this example, `myInput` is the id of the input element, hence the id selector `#`. – keithjgrant Apr 13 '10 at 00:21
Could you provide a code example of what the form might look like? Thanks. P.S. Not trying to be a pain, but I tried it and it doesn't work. – marcamillion Apr 13 '10 at 02:08
Almost there.....I am trying to view the info in the variable with this code: var comment_box = $("
").appendTo(tag_box).css({"position":"absolute"}); var input_var = $('#comment').val(); console.log(input_var); But for whatever reason, it won't output to the console of both Google Chrome on Mac or Firefox (Firebug) on Mac. Any ideas? – marcamillion Apr 13 '10 at 03:51
1

If you're code is exactly what you've shown, you're loading the value of your input before anything is in the input field, i.e. $('#comment').val() is always ''. Try adding the code to a submit handler for your form, e.g. $('form').submit(function() { var input = $('#comment').val(); console.log('Form value: ' + input); }); – ig0774 Apr 13 '10 at 13:32
console.log wasn't working...for whatever reason...in that code example above, so I changed it to produce an alert, and that works. I can now see the value stored in that variable. Thanks much. – marcamillion Apr 13 '10 at 16:28

score 0 · Answer 2 · edited May 23 '17 at 10:32

I ran across this pretty awesome question on how to serialize a form to JSON with jQuery which would be a good start.

You can also take a look at the jQuery Form plugin which provides the formSerialize method that

Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2

as well as a fieldSerialize method which

Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: name1=value1&name2=value2

How do I take input/output from a form and store it in a JS variable?

2 Answers2