Javascript: avoiding window to reload

Question

I have this form, that is never submitted: it just triggers a calcularplazas() function when pressing a non-submit button:

<form name="what" id="what" action="">   
  <input id="mat" type="text"/>
  <button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>                         
  <input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
  <p id="resultado"></p>
 </form>

When clicking on the button, function works properly but no result can be shown, as the window reloads. I do not understand this behaviour as there's nothing on the function making it reload, neither is a form submitting.

As consequence of this, the result text is exported to <p id="resultado"></p> but on miliseconds dissapears, as window reloads.

Why this behaviour?

function calcularplazas(){    

        var mensaje = "MENSAJE FINAL";
        document.getElementById("resultado").innerHTML = mensaje;
}

Why are you using a form then? Forms can be submitted by means other than a button click. Consider changing the button type to "submit", remove the click handler from the button. Hook into the form's submit event. Cancel the event in the handler. — spender, Dec 18 '15 at 11:39
possible dublicate of [prevent refresh of page when button inside form clicked](http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) — Volodymyr Synytskyi, Dec 18 '15 at 11:40

score 6 · Answer 1 · answered Dec 18 '15 at 11:38

6

You say "non-submit" button, but since you haven't given your <button> element a type attribute, it is a submit button by default. You need to tell the browser to treat it as a "normal" button:

<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>

Clicking this will now not submit the form, and not cause the page to reload.

answered Dec 18 '15 at 11:38

James Thorpe

31,411
5
72
93

1

I'm questioning the use of a form, if this is the advice to fix it. – spender Dec 18 '15 at 11:43
this won't prevent the form from being sent. It will only prevent the button to trigger the `submit` event. – Antoine Dec 18 '15 at 11:45
@spender Perhaps this is a minimal repro, and the form still needs to be submitted at some point with more information. There's not enough info here to know either way. – James Thorpe Dec 18 '15 at 11:45
@Antoine I never said it would prevent it being sent - the OP asks for it to not submit when the button is clicked. This fixes that. – James Thorpe Dec 18 '15 at 11:45
@JamesThorpe quote: "I have this form, that is never submitted" – Antoine Dec 18 '15 at 11:46
Hitting enter in one of the form fields will still trigger a submit. – spender Dec 18 '15 at 11:46
In which case, this looks like an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) - while this does fix the OPs problem, as you say he probably shouldn't be using a `
` in the first place.
– James Thorpe Dec 18 '15 at 11:48
@Abhitalks Not sure what you're showing with that - it has a js error when you click the button - "process is not defined" – James Thorpe Dec 18 '15 at 11:49
I agree with you. In this case, the answer has solved my problem. I'll also change this in order to preventDefault when submitting instead of not submitting. In this case, which answer should I tick? This one or the ones that explain how to fix this keeping the form submission? – Biomehanika Dec 18 '15 at 11:51
@Biomehanika Tick whichever one you feel has helped you the most, if any! – James Thorpe Dec 18 '15 at 11:52
Ok James. Thanks for your attention. I'll tick the one that explains how to keep a logic behaviour on this case (form must be submitted, but default behaviour must be prevented), as I feel is better for the community and for users with this same situation. I was making a wrong use of a form. – Biomehanika Dec 18 '15 at 11:55

Antoine · Accepted Answer · 2015-12-18T11:50:53.137

2

You can prevent submit event to be dispatched.

myForm.addEventListener('submit', function(e) {
  e.preventDefault();
  calcularplazas();

  // do anything else you want
})

And HTML

<form id="myForm">   
  <input id="input1" type="text"/>
  <button type="submit" id="myButton">SEND</button>                         
</form>

It will works for Return key to do as well

edited Dec 18 '15 at 11:50

answered Dec 18 '15 at 11:40

Antoine

403
4
10

This is the right answer and not "radical" at all... but you should mention removing the click handler on the button. – spender Dec 18 '15 at 11:41

score 0 · Answer 3 · answered Dec 18 '15 at 11:42

0

The button in the form, have you tried giving it type="button" ? Because in a form it gets type="submit" by default (or the form behaves like it would with a submit type).

answered Dec 18 '15 at 11:42

Redd Sanso

51
4

score 0 · Answer 4 · answered Dec 18 '15 at 11:48

You Need to make only 2 changes and the code will run .

Put return false in the javascript function.
when you call the function on onclick function write return calcularplazas.

check the below code for for your reference.

function calcularplazas(){    

        var mensaje = "MENSAJE FINAL";
        document.getElementById("resultado").innerHTML = mensaje;
        return false;
}

  <button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>

Javascript: avoiding window to reload

4 Answers4