ansaurus

Question

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

Answer 1

+3 A:

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).

ig0774 2010-04-13 00:10:08

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 2010-04-13 00:16:31

In this example, `myInput` is the id of the input element, hence the id selector `#`.

keithjgrant 2010-04-13 00:21:54

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 2010-04-13 02:08:48

Almost there.....I am trying to view the info in the variable with this code: var comment_box = $("<form action='#'><input id='comment' type='text' name='comment'></form>").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 2010-04-13 03:51:25

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 2010-04-13 13:32:00

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 2010-04-13 16:28:07

Answer 2

A:

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

R0MANARMY 2010-04-13 03:03:11

ansaurus

tags:

views:

answers:

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

related questions