How do I post values obtained from an html form to an URL using javascript?

Question

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.

<form>
    <div>
        <label style="font-size:16px" for="title">Title:</label>
        <input type="text" id="title" maxlength="128"/>
    </div>
    <div>
        <label style="font-size:16px" for="description">Description:</label>
        <textarea id="description" maxlength="1999"></textarea>
    </div>
    <div>
        <label style="font-size:16px" for="idnumber">IDNumber:</label>
        <input type="number" id="idnumber"/>
    </div>
</form>

I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

Why Javascript? Why not just post the form using a submit button? — Diodeus - James MacFarlane, Jul 23 '13 at 20:12
[MDN - My first HTML form](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form?redirectlocale=en-US&redirectslug=HTML%2FForms%2FMy_first_HTML_form) — Derek 朕會功夫, Jul 23 '13 at 20:17

score 2 · Answer 1 · answered Jul 23 '13 at 20:13

2

You have to add an action to your form tag that points to a server side script.

<form action="myscript.php" method="post">

Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

answered Jul 23 '13 at 20:13

Collin Henderson

1,154
10
22

@MathSquared11235 Heh, just noticed that, fixed :) – Collin Henderson Jul 23 '13 at 20:14

score 2 · Accepted Answer · answered Jul 23 '13 at 20:13

2

You can use the action attribute:

<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

answered Jul 23 '13 at 20:13

ameed

1,132
6
25

score 1 · Answer 3 · edited May 23 '17 at 12:21

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")

That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:

jQuery - Send a form asynchronously

How do I post values obtained from an html form to an URL using javascript?

3 Answers3