Question

我有这个表单，从未提交过：它只是在按下非提交按钮时触发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;
}

Answer 1

您说“未提交”按钮，但由于您没有为<button>元素提供type属性，因此默认情况下是一个提交按钮。您需要告诉浏览器将其视为“正常”按钮：

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

单击此按钮现在不会提交表单，也不会导致页面重新加载。

Answer 2

您可以阻止调度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键

Answer 3

表单中的按钮，您是否尝试过给它type =“button”？因为在表单中默认情况下它会获得type =“submit”（或者表单的行为与提交类型一样）。

Answer 4

您只需进行2次更改，代码就会运行。

在javascript函数中输入false。
当您在onclick函数上调用函数时，返回calcularplazas。

请查看以下代码供您参考。

function calcularplazas(){    

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

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

Javascript：避免重新加载窗口

4 个答案: