点击正常按钮提交表单 [英] Onclick on normal button is submitting form

问题描述

这工作很好。我可以通过在任何输入字段或提交按钮中按回车来提交表单。

新要求

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

我试过了什么

视图的一部分是以二进制创建的，因为行数取决于用户引入的数据，所以这部分创建每行：

  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] +'> +部分[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'><<< ; /跨度>< /按钮>中; 
 resultadoHTML + =< / div>; 
 resultadoHTML + =< / div>; 
  

按钮的结果HTML

 < button id =eCCC5class =btn btn-default>< span class =glyphicon glyphicon-plus-sign>< /跨度>< /按钮> 
  

问题
<当我使用 onclick 在新按钮中定义一个函数时，调用此函数，但在之后单击 >提交按钮的事件是 ALSO 调用，我不知道为什么...但是，正如你可以在代码中看到的，即使当我不要捕获任何事件点击按钮的事件按钮。

其他信息

表格/按钮定义

form：form class =form-horizo​​ntalrole =formmethod =post
commandName =contratMercanaction =../ contratos / contratosubmit
name =formularioid = edicionContrato >

< button type =submitclass =btn btn-primaryid =edicionContrato>
< / button>

提交功能

提交（函数（e）{
e.preventDefault（）;

var form = this;




$

//检查和解决方法...

form.submit（）;
}）;

任何想法为什么会发生？可能是通过dinamically引入的 HTML 代码存在一些错误和中断 javascript 或 html <按钮> 之后？

解决方案元素没有指定类型，它默认为类型= 提交 。您需要将其指定为 type =button以停止提交表单：

 < button type =buttonid =eCCC5class =btn btn-default> 
< span class =glyphicon glyphicon-plus-sign>< / span> 
< / button> 
  

SCENARIO

I have a java JSP view with a long form. This was working nice. I can submit my form by pressing enter in any input field or with submit button.

NEW REQUIREMENT

In a part, I must add buttons to replace some <label> for <input> to allow editing, nothing hard.

WHAT I TRIED

This part of the view is created dinamically, cause number of lines depends of the data introduced by user, this parts creates each line:

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>";

Resulting HTML of the button

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

PROBLEM

When I use onclick to define a function in the new button, this function is called, but after, the click event of the submit button is ALSO called and I dont know why... But as you can see in the code, even when i DON'T catch any event in the button the click event of the form is called.

OTHER INFO

FORM/BUTTON DEFINITION

<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>

SUBMIT FUNCTION

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

    var form = this;

    // checks and workarounds...

    form.submit();
});

Any idea why could happen? Maybe dinamically introduced HTML code has some mistake and brokes javascript or html after?

解决方案

When you use the <button> element without specifying a type, it defaults to type="submit". You need to specify it as type="button" to stop it submitting the form:

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

这篇关于点击正常按钮提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！