Onclick on normal button is submitting form

Question

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?

Answer 1

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>