点击普通按钮会提交表单。

Question

情境

我有一个包含长表单的 java JSP 视图。一切都很顺利，我可以通过在任何输入字段中按下回车键或使用提交按钮来提交表单。

新需求

在某个部分中，我必须添加按钮来替换一些 <label> 以允许编辑，这并不难。

我尝试过的方法

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

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 事件也会被调用，我不知道为什么...但是你可以看到代码中，即使我没有在按钮中捕获任何事件，表单的 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出现问题？

- Jordi Castilla

---

你可以使用 ('＃yourbutton').on('click'，function（）{ your code }）避免这个问题，你知道我的意思吗？如果需要，我可以在提交中打出一个合适的回答。 - gon250

它不会阻止表单提交。你必须使用.on('click', function(e){ e.preventDefault(); /* rest of the code */ })。 - Jeremy Thille

我无法使用 on('click'，因为如您所见，名称是动态创建的... 这是一个愚蠢的错误，没有定义按钮的类型。 - Jordi Castilla

Answer 1

当您使用未指定类型的<button>元素时，它会默认为type="submit"。您需要将其指定为 type="button" 以停止提交表单：

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

- James Thorpe

---

天哪，我从来不知道这个……所以如果我们有3个按钮，它们都必须设置为type="button"。这真的很啰嗦。我猜它本来可以默认为type="button"，但显然在表单内，默认为type="submit"。 - undefined

Answer 2

如果您有一个带有属性type="submit"的按钮，点击提交将发送整个表单。如果您添加属性type="button"或仅删除它，我认为当您点击按钮或在输入中按下ENTER时，表单可能不会被发送。

- hywak

---

很棒的答案。我点了赞，但是因为 James 的回答早了几秒钟，我接受了他的。谢谢 Mike，;) - Jordi Castilla

Answer 3

另一个选择是将按钮元素放在FORM之外，这可能有所帮助，但这取决于您的要求。如果您需要将该按钮放在FORM内，则必须指定type="button"。

- San4musa