Tự động gửi biểu mẫu bằng JavaScript không gửi nút gửi

Question

Tôi có biểu mẫu có hai nút gửi. Tôi muốn gửi biểu mẫu theo cách thủ công bằng JavaScript và có nút nhập được sử dụng để gửi biểu mẫu được đăng cùng với các yếu tố biểu mẫu khác, vì nó sẽ là nếu biểu mẫu được gửi tự động. Có khá nhiều trò chuyện về chủ đề này, nhưng tôi không thể tìm thấy câu trả lời.

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 

Khi biểu mẫu được gửi ở trên bằng cách sử dụng "Một Do" nút, các thông số đăng là field1="xxx", field2="yyy", sub1_name="Do One".

Nhưng tôi muốn gửi biểu mẫu bằng tay ...

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 
<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     return mySubmit(document.getElementById('form1'), ...); 
    } 
</script> 

nhưng làm một trình hướng dẫn sử của mẫu trong mySubmit chức năng không đăng các tham số sub1_name. Tôi có thể hiểu điều đó - Tôi đã bỏ qua bài nộp để biểu mẫu không được gửi bằng cách sử dụng các nút và do đó không có ý nghĩa gì khi đăng tham số đại diện cho nút được sử dụng để gửi biểu mẫu.

Khi tôi xem các phần tử của biểu mẫu trong trình xử lý onclick, tôi có thể thấy cả hai nút. Tôi không quá ngạc nhiên bởi điều đó, chúng là những yếu tố trên form, nhưng những gì tôi không nhận được là nếu tôi thêm một phần tử bên trong trình xử lý onclick thì phần tử tôi thêm IS được đăng và hai nút submit ban đầu không được đăng. Chỉ cần để hoàn thành bức tranh, đây là đoạn code mà bổ sung thêm các yếu tố:

<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     var f = document.getElementById('form1'); 
     var s = document.createElement("input"); 
     s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
     f.appendChild(s); 

     // s gets posted 
     return mySubmit(f, ...); 
    } 
</script> 

Thêm các yếu tố đầu vào có thể làm việc cho tôi, nhưng tôi đang bối rối như thế nào trình duyệt biết để gửi yếu tố bị như tôi và không phải là gốc hai đầu vào các yếu tố.

Cảm ơn bạn.

Answer 1

Các specification nói rằng bước đầu tiên để gửi mẫu là:

Bước một: Xác định các điều khiển thành công

"điều khiển thành công" được định nghĩa là:

Một kiểm soát thành công là "hợp lệ" để gửi. Mọi điều khiển thành công đều có tên điều khiển được ghép nối với giá trị hiện tại của nó như là một phần của tập dữ liệu biểu mẫu đã gửi. Điều khiển thành công phải được xác định trong phần tử FORM và phải có tên điều khiển.

Tuy nhiên:

...

• Nếu một hình thức có chứa nhiều hơn một nút gửi, chỉ có nút kích hoạt gửi là thành công.

Vì không có nút gửi nào được kích hoạt, không có nút nào được gửi. Mặt khác, các phần tử nhập ẩn có giá trị và sẽ được gửi cùng. Lưu ý rằng bạn thêm các phần tử ẩn trước khi gọi gọi mySubmit(), do đó tại thời điểm các bước trên được thực hiện (tức là trong khi gửi), phần tử ẩn chỉ là một phần kiểm soát thành công khác của biểu mẫu và do đó được gửi đi.

Answer 2

có thể sử dụng

var btn = document.getElementById('sub1_id'); 
btn.onsubmit=function() { 
    return false; 
} 

btn.onclick=function() { 
    var f = document.getElementById('form1'); 
    var s = document.createElement("input"); 
    s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
    f.appendChild(s); 

    f.submit() 
}