У меня есть эта форма, которая никогда не отправляется: она просто вызывает функцию calcularplazas() при нажатии кнопки без отправки:

<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>  

При нажатии на кнопку функция работает должным образом, но результат не отображается, так как окно перезагружается. Я не понимаю этого поведения, так как функция не выполняет перезагрузку, а также не отправляет форму.

Как следствие этого, текст результата экспортируется в <p id="resultado"></p>, но через миллисекунды исчезает при перезагрузке окна.

Почему такое поведение?

function calcularplazas(){    

        var mensaje = "MENSAJE FINAL";
        document.getElementById("resultado").innerHTML = mensaje;
}
4
Biomehanika 18 Дек 2015 в 14:36

4 ответа

Лучший ответ

Вы можете предотвратить отправку события submit.

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

  // do anything else you want
})

И HTML

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

Это будет работать и для Return ключа.

2
Antoine 18 Дек 2015 в 11:50

Вам нужно сделать только 2 изменения, и код будет работать.

  1. Поставьте return false в функцию javascript.
  2. когда вы вызываете функцию onclick, функция write возвращает calcularplazas.

Проверьте код ниже для вашей справки.

function calcularplazas(){    

        var mensaje = "MENSAJE FINAL";
        document.getElementById("resultado").innerHTML = mensaje;
        return false;
}
  <button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>                         
0
Ghanshyam sharma 18 Дек 2015 в 11:48

Кнопка в форме, вы пытались дать ей type = "button"? Потому что в форме она получает type = "submit" по умолчанию (или форма ведет себя так, как если бы она была с типом submit).

0
Redd Sanso 18 Дек 2015 в 11:42

Вы говорите «не отправить» кнопку, но, поскольку вы не дали своему элементу <button> атрибут type, по умолчанию является кнопкой отправки. Вы должны указать браузеру, чтобы он воспринимался как «обычная» кнопка:

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

Нажатие на это теперь не будет отправлять форму и не будет вызывать перезагрузку страницы.

6
James Thorpe 18 Дек 2015 в 11:38