停止从DOM刷新提交

Question

Say I have a form like so on a page:

<form action="/add" method="post">
    <input name="first">
    <button type="submit">Submit</button>
</form>

The problem is when I click on the submit button the page tries to load http://localhost/add as a URL. All I want to do is simply make the HTTP post request from the form, and then not reload the page, is this even possible to do with HTML semantics, or will I have to use some javascript to prevent the default action somehow and then make the request?

I know there have been many question on the topic, but they all seem to be making the requests via a library or javascript, and not utilising the built in form methods as I am?

Answer 1

You have to use AJAX to achieve this effect:

The first thing you need to do is prevent the behavior your are talking about:

$("button[type='submit']").click(function(e){

    e.preventDefault(); 
    e.stopPropagation();

});

OK, so that question also uses that library you are likely referring to... that is called jQuery -- It will make your life much easier, but if you want to avoid it, then give your button an id, and do this:

document.getElementById("submitButton").onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();
}

Then, you have to make the ajax call --- which involves gathering the form data which you want to send...

data = {
first:    document.getElementByName("first").value;

}

and making the actual AJAX (aka XHR) request ---

Which looks like this:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

In jQuery, it is a bit simpler :

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: { first : $("input[name='first']").value() }
});

Answer 2

Have the server respond with HTTP status code 204 NO CONTENT . This prevents the browser from navigating.

Demo: http://jsfiddle.net/9r2e1n74/

(note: this fiddle contains no code of my own; it just points the form in the question to a service that returns the 204 response)

---

Alternatively, set a target attribute on the form to have it load the response in some hidden frame.

Demo: http://jsfiddle.net/p571jy78/

<form action="/add" method="post" target="formtarget">
    <input name="first">
    <button type="submit">Submit</button>
</form>
<iframe name="formtarget" style="display:none;"></iframe>

---

Alternatively, use JavaScript to handle the form submission with XMLHttpRequest .