Submitting jQuery posts without having to add form field values values

Arnold Layne
Arnold Layne used Ask the Experts™
on
<form id="restaurantForm">
            <input type="text" id="name" class="req" placeholder="Restaurant Name" />
            <input type="text" id="address" class="req" placeholder="Address" />
            <input type="text" id="suite" placeholder="Suite"/>
            <button type="button" onclick="sendForm()">Done</button>
            <button type="button">Cancel</button>
</form>


I have this code doing an ajax post in jQuery

const sendForm = () => {
const name = document.querySelector('#name');
const address = document.querySelector('#address');
const suite = document.querySelector('#suite');
   
$.post('AddRestaurant.aspx', { name: name.value, address: address.value, suite: suite.value }, () => {
    $("#dbContent").html(html); } );

Since it's a post, how can I automatically grab the form field values like a normal form post submittal without having to add all of the form field values to the second arg of $.post? Basically, I want to put one value as the second arg of $.post, that will have all form fields and their values Do I have to make the button of type "submit" and then e.preventDefault() and then have to serialize the form results somehow and add the result as the second arg?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Arnold,


I think you need to check out FormData, it let's you post the entire form as it is.


https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

Regards,
Chinmay.
Arnold LayneDeveloper

Author

Commented:
Does it have to use input type="submit" before it can gather those values or can it use a button of type button like I have and still gather those values? Does it have to do a submit and then have e.preventDefault() intercept it?
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Arnold,

First off, a couple of notes about your HTML. All of your form fields should have their name attribute set. I would also suggest using event binding instead of inlining an onclick method. I would also suggest hooking into the form's submit event, instead of the button's click event - that will give you easier access to the form itself:

//HTML
<form id="restaurantForm">
            <input type="text" name="name" class="req" placeholder="Restaurant Name" />
            <input type="text" name="address" class="req" placeholder="Address" />
            <input type="text" name="suite" placeholder="Suite"/>
            <button type="submit">Done</button>
            <button type="button">Cancel</button>
</form>

Open in new window

As for the jQuery, there are a couple of ways of doing this. Usually, the easiest way is to hook into the Submit event of a form, prevent the default action and then AJAX your form's data by serialising it

//jQuery
$('#restaurantForm').submit(function(e) {
    e.preventDefault();

    $.post('AddRestaurant.aspx', $(this).serialize(), function(response) {
        $("#dbContent").html( response );
    });
});

Open in new window

Chief Technology Ninja
Distinguished Expert 2018
Commented:
Please look at the example code given on the page. You will simply write the following in Javascript.

let myForm = document.getElementById('myForm');
let formData = new FormData(my Form) ;

Once this formData variable is ready, it totally depends on your design. If you want to use Submit and PreventDefault, you can use that. If you don't want to use any button at all. You can just manually trigger form post on user interaction. You can use a simple button and submit the Form on it's click event.
Arnold LayneDeveloper

Author

Commented:
Thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial