Tại sao nút "chuyển đổi" của jQuery kích hoạt nút Gửi trên biểu mẫu?

Question

Tôi đã xây dựng một biểu mẫu khá phức tạp bao gồm một phần ẩn mà người dùng có thể chuyển đổi mở để nhập thêm thông tin nếu cần. Tuy nhiên, khi bạn nhấp vào nút chuyển đổi này có nhãn Tôi có nhiều Nativities, nó kích hoạt nút gửi và gửi sớm biểu mẫu.

Biểu mẫu này hiện đang được phát hành, nhưng nó có thể được tìm thấy here.

Mã Tôi đang sử dụng cho nút bật tắt là:

<script type="text/javascript"> 
    $(function() { 
     $("#schedule").accordion({ header: "h5", collapsible: true }); 
     $("#more-nativities").hide(); 
     $("#toggle").click(function() { 
      $("#more-nativities").slideToggle("slow"); 
     }); 
    }); 
    </script> 

Mã cho nút gửi là khá cơ bản:

<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/> 

Mã cho nút bật tắt là:

<button id="toggle">I have more nativities</button> 

Bất kỳ ý tưởng nào về lý do tại sao nút chuyển đổi kích hoạt gửi? Và quan trọng hơn là làm thế nào để giải quyết vấn đề?

Cảm ơn!

Answer 1

Hãy thử thêm một loại, tức là .:

<button type="button" id="#toggle">Text</button> 

http://www.w3schools.com/tags/tag_button.asp nói này cần được luôn luôn được xác định. Có thể trình duyệt mặc định là nút gửi.

Answer 2

Hãy thử

return false; 

sau khi chuyển đổi trượt vào chức năng nhấp chuột fro nút bật tắt.

Answer 3

Từ W3Schools:

Luôn xác định thuộc tính type cho nút. Loại mặc định cho Internet Explorer là "nút", trong khi trong các trình duyệt khác (và trong đặc tả W3C ), đó là "gửi".

http://www.w3schools.com/tags/tag_button.asp

Hãy chắc chắn để xác định type="button"

Answer 4

Esteban có một giải pháp. Mô tả tốt hơn được mô tả trong số jQuery tutorial:

$(document).ready(function(){ 
    $("a").click(function(event){ 
    alert("As you can see, the link no longer took you to jquery.com"); 
    event.preventDefault(); 
    }); 
});