Onclick on normal button 正在提交表单答案

【问题标题】：Onclick on normal button is submitting formOnclick on normal button 正在提交表单
【发布时间】：2015-03-05 11:35:11
【问题描述】：

场景

我有一个长格式的java JSP 视图。这很好用。我可以通过在任何输入字段中按 Enter 或使用提交按钮来提交我的表单。

新要求

在一部分中，我必须添加一些按钮来替换一些 <label> 为 <input> 以允许编辑，没什么难的。

我尝试了什么

这部分视图是动态创建的，因为行数取决于用户引入的数据，这部分创建每一行：

resultadoHTML += "  <div class='row col-lg-12 col-xs-12' style='margin-bottom: 30px;text-align: left;'>";
resultadoHTML += "      <label class='col-lg-3 col-xs-12 control-label' >" + nomCalidad + "</label>";
resultadoHTML += "      <div class='col-lg-5 col-xs-8'>";
resultadoHTML += "          <input type='text' class='form-control' value='"+valor+"' id='calidadCatId' maxlength='30' required='true' />";
resultadoHTML += "      </div>";

resultadoHTML += "      <div class='col-lg-2 col-xs-3' id='ccc" + parts[1] + "'>";
resultadoHTML += "          <label class='control-label' id='unidadCCC" + parts[1] + "' >" + parts[4] + "</label>";
resultadoHTML += "      </div>";
resultadoHTML += "      <div class='col-lg-2 col-xs-1'>";
resultadoHTML += "          <button id='eCCC" + parts[1] + "' class='btn btn-default'><span class='glyphicon glyphicon-plus-sign'></span></button>";
resultadoHTML += "      </div>";
resultadoHTML += "  </div>";

按钮生成的 HTML

 <button id="eCCC5" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>

问题

当我在新按钮中使用onclick定义一个函数时，调用了这个函数，但是之后，提交按钮的click事件被ALSO调用了，我不知道为什么...但正如您在代码中看到的那样，即使我 DON'T 捕获按钮中的任何事件，也会调用表单的 click 事件。

其他信息

表单/按钮定义

<form:form class="form-horizontal" role="form" method="post"
    commandName="contratMercan" action="../contratos/contratosubmit"
    name="formulario" id="edicionContrato">

<button type="submit" class="btn btn-primary" id="edicionContrato">                               
    <spring:message ... />  // omitted info 
</button>

提交函数

$("#edicionContrato").submit(function(e){
    e.preventDefault();

    var form = this;

    // checks and workarounds...

    form.submit();
});

知道为什么会发生吗？也许动态引入的HTML 代码有一些错误并在javascript 或html 之后中断？

【问题讨论】：

你可以使用 ('#yourbutton').on('click', function(){ your code }) 来避免这个问题，你知道我的意思吗？如果您需要，我可以在提交时输入正确的答案
它不会阻止表单提交。你必须使用.on('click', function(e){ e.preventDefault(); /* rest of the code */ })
我不能使用on('click' 名称是动态创建的，如您所见......这是一个愚蠢的错误，没有定义按钮的类型

标签： javascript jquery html forms

【解决方案1】：

当您使用<button> 元素而不指定类型时，它是defaults to type="submit"。您需要将其指定为 type="button" 以阻止它提交表单：

<button type="button" id="eCCC5" class="btn btn-default">
    <span class="glyphicon glyphicon-plus-sign"></span>
</button>

【讨论】：

【解决方案2】：

如果您有属性为type="submit" 的按钮，点击提交将发送整个表单。我想如果你添加属性type="button" 或者只是删除它。如果您单击按钮或按下输入中的ENTER，表单可能不会发送。

【讨论】：

很好的答案。我投了赞成票，但我接受了詹姆斯，原因是几秒钟前...谢谢迈克，;)

【解决方案3】：

另一种选择是将按钮元素放在 FORM 之外会有所帮助，但这取决于您的要求。如果您需要将该按钮放在 FORM 中，那么您必须提及 type="button"

【讨论】：