"Quiet" Form Submission with Ajax

Question

My intention is to submit data from a form to the server and not have the page reload. It does not even need to display updated data. I am developing using Firefox and I'm looking at two paths to get what I want:

I've discovered that if I place a button inside a form, the form will be submitted with the name of the page containing it as a "GET" request. The form tag in this case has not method attribute and the action tag is empty. I can input the function that I want into the action attribute, and the browser will apply the rest of the form fields to the request. I find the formulation of the form convenient, but the browser goes ahead and replaces the page with whatever the response is from the server, taking me away from the original page.
Taking the button out of the form and wiring it exclusivly to a javascript function allows me to register a function to the onreadystatechange event. This has the effect of running a function rather than reloading the page when the server responds. The down side of this seems to be that it is necessary for the function to formulate the "GET" request on it's own.

It seems to me that there should be a way for the javascript function to tell the form to submit using it's own devices, and then be ready to process the the response. Being new at this I am unfamiliar with what "Best Practice" would be for this requirement.

All this time I've been googling ajax form submission, which did not get me what I required. — 2NinerRomeo, Jan 31 '13 at 22:56

score 1 · Answer 1 · answered Jan 31 '13 at 23:00

1

You can just use a <button> to post your details.

function ajaxPage(postPage, paramList) {
    xmlhttp.open("POST",postPage,false);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(paramList);
    return xmlhttp.responseText;
}

In this case your postPage is a address to a piece of relevant code and paramList is a list of & delimited name value pairs.

Kind regards, Westie

answered Jan 31 '13 at 23:00

Paul

4,160
3
30
56

Pardon my ignorance, but are postpage and paramList a keywords that will be what they need to be, or do they need to be passed into the call to the function. – 2NinerRomeo Jan 31 '13 at 23:05
They're the parameters of the function that you call, so you'd call something like: `ajaxPage('myPage.asp', 'val1=value&val2=value');`. I've used this frequently in Classic ASP pages and it works well. – Paul Jan 31 '13 at 23:08
PS: You'll need to ratify the parameters that you pass, ensuring that they're sanitised for URL encoding. – Paul Jan 31 '13 at 23:09
Is it possible for the browser to format the paramLilst and then supply it to the function without me needing to duplicate the field names in the function call? Thanks – 2NinerRomeo Jan 31 '13 at 23:15
You can `escape()` the sequence from the parameter, but you'll need to pull them from the controls (`document.getElementById('ctrl')`). – Paul Jan 31 '13 at 23:21

score 0 · Answer 2 · answered Jan 31 '13 at 22:49

You can add an "onsubmit" function to your form.

It is important to return false or call event.preventDefault() in that function in order to prevent the browser from posting the form.

HTML:

<form onsubmit="javascript:myFunction()">
    ...
</form>

Script:

function myFunction(evt) {
    // do your ajax call...
    evt.preventDefault();
}

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

Not really need the "Submit" you can search for autocomplete suggestions implementation with ajax:

Onfocus On..Even you will send all form data to server side, you you want autocomplete with server side response than it a pus and you can explain for the user for that you need.

This link may help you a bit.

edited May 23 '17 at 10:24

Community

1
1

answered Jan 31 '13 at 22:55

score 0 · Accepted Answer · edited May 23 '17 at 11:55

This is what I've Ended up with, going forward with pathway number 2 as described in the original question, The button invoking the script is outside the form, so there is no submit event. Data from the form is harvested by the script as described in this answer to a related question:

https://stackoverflow.com/a/589100/747544

From there, the "get" request is formulated by the script

XMLHttpRequest.open("GET", "/myCommand?"+queryString ,true);
XMLHttpRequest.send(null);

The form is in effect "scanned" by the script without ever having been submitted, so there is no need to prevent the default behavior with an onSubmit event returning false. or preventDefault().

"Quiet" Form Submission with Ajax

4 Answers4