Stop submit from refreshing from the 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?

possible duplicate of [Submit a Form without redirecting](http://stackoverflow.com/questions/20813627/submit-a-form-without-redirecting) — Qantas 94 Heavy, Nov 25 '14 at 23:35
Figured a way to do it from the server. I am using the Express library with node, and you simply need to do `res.sendStatus(204)`. This sets the response header to 'No-content' and means the page won't refresh. — Edward-Lombe, Nov 25 '14 at 23:38

rm-vanda · Answer 1 · 2014-11-25T23:42:09.183

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() }
});

score -1 · Accepted Answer · answered Nov 25 '14 at 23:37

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.

This is the solution I ended up going with, note if you are using express this can be done with `res.sendStatus(204)`. Documentation [here](http://expressjs.com/4x/api.html#res.sendStatus) — Edward-Lombe, Nov 25 '14 at 23:41

Stop submit from refreshing from the DOM

2 Answers2