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>

Answer 2

If you have button with attribute type="submit" , clicking on submit will send whole form. I think if you add attribute type="button" or just delete it. Form probably won't send if you click on button or push ENTER being in input.

Answer 3

Another option is to place the button element outside the FORM would help but it depends on your requirements. If you need to put that button inside the FORM then you've to mention type="button"