javascript – 正常按钮上的Onclick正在提交表单

前端之家收集整理的这篇文章主要介绍了javascript – 正常按钮上的Onclick正在提交表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
情景

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

新要求

在一个部分,我必须添加按钮来替换一些< label> for< input>允许编辑,没什么难的.

我做了什么

视图的这一部分是以dinamically方式创建的,因为行数取决于用户引入的数据,这部分创建了每一行:

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();
});

知道为什么会发生吗?也许dinamically介绍HTML代码有一些错误,并打破javascript或html之后?

解决方法

当您使用< button>时如果没有指定类型,则为 defaults to type="submit".您需要将其指定为type =“button”以停止提交表单:
<button type="button" id="eCCC5" class="btn btn-default">
    <span class="glyphicon glyphicon-plus-sign"></span>
</button>
原文链接:https://www.f2er.com/js/155792.html

猜你在找的JavaScript相关文章