在不使用 JQuery 和输入类型 =“提交”的情况下阻止提交表单 [重复]答案

【问题标题】：Block submit of a form without using JQuery and with input type="submit" [duplicate]在不使用 JQuery 和输入类型 =“提交”的情况下阻止提交表单 [重复]
【发布时间】：2016-04-12 20:32:33
【问题描述】：

我想在这种情况下阻止提交表单：

1) 没有 JQuery；

2) 使用输入 type="submit"（而不是 type="button"），因为这是（我认为）使用 Enter 键提交表单的唯一方法

这是我的代码：

<form name="form_ricerca" action="trova_hotels.htm" id="top_form_ricerca" method="post">        
   <fieldset style="margin: 10px;text-align: center;">
     <input id="top_ric_strutt" type="text" name="ricerca" size="40"
     <input onclick="return top_controlla_ricerca();" >
   </fieldset>
</form>

这就是函数：

function top_controlla_ricerca() {
  var nome_codice = document.getElementById("top_ric_strutt").value;
  SOME_CODE
  if (SOME_CONDITIONS) {
   document.getElementById("top_form_ricerca").submit();
   return true;
  } else {
   alert('MY_ALERT');
   return false;
  }
}

【问题讨论】：

而不是使用onclick的按钮使用onsubmit形式的事件-<form name="form_ricerca" action="trova_hotels.htm" id="top_form_ricerca" method="post" onsubmit="return top_controlla_ricerca();">然后<input type="submit" value="Save" >
已经在stackoverflow.com/questions/8664486/…回复

标签： javascript html forms button submit

【解决方案1】：

1.) 在表单元素而不是输入元素上添加 onsubmit 监听器

<form onsubmit="return top_controlla_ricerca();" name="form_ricerca" action="trova_hotels.htm" id="top_form_ricerca" method="post">        
   <fieldset style="margin: 10px;text-align: center;">
     <input id="top_ric_strutt" type="text" name="ricerca" size="40"
     <input type="text" />
   </fieldset>
</form>

2.) 在此函数中手动删除提交（提交处理程序）

function top_controlla_ricerca() {
  var nome_codice = document.getElementById("top_ric_strutt").value;
  SOME_CODE
  if (SOME_CONDITIONS) {
   //document.getElementById("top_form_ricerca").submit();  <-- Remove this line
   return true;
  } else {
   alert('MY_ALERT');
   return false;
  }
}

【讨论】：