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
– Diodeus - James MacFarlane, Commented Jul 23, 2013 at 20:12

ameed · Accepted Answer · 2013-07-23 20:13:29Z

2

You can use the action attribute:

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

answered Jul 23, 2013 at 20:13

ameed

1,1706 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Collin Henderson · Accepted Answer · 2013-07-23 20:13:10Z

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, 2013 at 20:13

Collin Henderson

1,15411 silver badges22 bronze badges

1 Comment

Collin Henderson Over a year ago

@MathSquared11235 Heh, just noticed that, fixed :)

Community · Accepted Answer · 2017-05-23 12:21:36Z

1

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 23, 2013 at 20:15

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related