onclick vào nút bình thường được tiến hành với mẫu

Question

SCENARIO

Tôi có một JSP xem java với một hình thức dài. Điều này đã làm việc tốt đẹp. Tôi có thể gửi biểu mẫu của mình bằng cách nhấn enter trong bất kỳ trường nhập liệu nào hoặc bằng nút gửi.

MỚI YÊU CẦU

Trong một phần, tôi phải thêm các nút để thay thế một số <label> cho <input> để cho phép chỉnh sửa, không có gì khó khăn.

GÌ Tôi cố gắng

Phần này của view được tạo ra dinamically, số nguyên nhân của dòng phụ thuộc của các dữ liệu được giới thiệu bởi người sử dụng, các bộ phận này tạo ra mỗi dòng:

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

Kết quả HTML của nút

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

VẤN ĐỀ

Khi tôi sử dụng onclick để xác định một chức năng trong nút mới, chức năng này được gọi, nhưng sau đó, sự kiện click của nút gửi là CŨNG gọi và tôi không biết tại sao ... Nhưng khi bạn có thể thấy trong mã, ngay cả khi tôi KHÔNG HOÀN THÀNH bắt bất kỳ sự kiện nào trong nút, sự kiện click của biểu mẫu được gọi.

KHÁC INFO

MẪU/NÚT ĐỊNH NGHĨA

<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 CHỨC NĂNG

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

    var form = this; 

    // checks and workarounds... 

    form.submit(); 
}); 

Bất cứ ý tưởng tại sao có thể xảy ra? Có thể mã số HTML đã bị giới thiệu theo kiểu dinamically có một số lỗi và brokes javascript hoặc html sau?

Answer 1

Khi bạn sử dụng phần tử <button> mà không chỉ định loại, nó defaults to type="submit". Bạn cần phải xác định nó như type="button" để ngăn chặn nó trình có dạng:

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

Answer 2

Nếu bạn có nút với thuộc tính type="submit", nhấp vào gửi sẽ gửi toàn bộ mẫu. Tôi nghĩ rằng nếu bạn thêm thuộc tính type="button" hoặc chỉ cần xóa thuộc tính đó. Biểu mẫu có thể sẽ không gửi nếu bạn nhấp vào nút hoặc đẩy ENTER đang ở trong đầu vào.