CODEWITHSUNDEEP
javascripthtml
macklin
macklin

Reputation: 375

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

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!

Upvotes: 0

Views: 97

Answers (3)

Katana314
Katana314

Reputation: 8610

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

Upvotes: 1

ameed
ameed

Reputation: 1160

You can use the action attribute:

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

Upvotes: 2

Collin Henderson
Collin Henderson

Reputation: 1154

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.

Upvotes: 2

Related Questions