如何在Javascript中访问用户提交的表单数据？

Question

I'm relatively new to programming, but understand the basics of HTML, CSS, and Javascript (including jQuery). Due to my greenness, I'd appreciate it if answers contained both a simple solution and a reason as to why the solution works. Thanks!

So I've got a form, with a text input and a submit button:

<form>
<input type="text">
<button type="submit">Submit</button>
</form>

When the user types data into the text field and clicks submit, how do I gain access to this data? If a user inputs their name, how do I grab that information? I don't intend to store it or write it anywhere, just to hold onto it as a variable in javascript, which I'll assign to a jQuery cookie.

So how do I access the data that the user has submitted, preferably using only Javascript (with jQuery)? Thanks for the help!

Answer 1

You access the data on the server side (in PHP via $_POST['username'] for example). The form sends data to your sever for any named input, so you would probably have to change the input to:

<input type=text name=username>

If you want to access it on the client side (with JavaScript), you can do that too, but you have to prevent the form from submitting:

$("form").on('submit', function (e) {
    $.cookie('username', $(this).find('[name=username]').val());
    //stop form from submitting
    e.preventDefault();
});

Answer 2

say you had an html input tag such as:

<input id="textfield" type="text">

using javascript, you can store the value of that field in a variable like this:

var inputvalue = $('#textfield').val();

of course, you'll need something to run the script.

the reason this works is that the the textfield is an object. you might think of it as a tree trunk with different branches coming out. one of these "branches" is the value contained inside of it. since you know jquery, you know that $('#textfield') gets the element by a selector. the period says we're getting one of the branches, and "value" says we want the branch that tells what's in the textfield.

hope this helps.