Làm cách nào để gửi biểu mẫu HTML với JavaScript?

Có cách nào để gửi biểu mẫu HTML sử dụng JavaScript được đảm bảo hoạt động trong mọi tình huống không?Làm cách nào để gửi biểu mẫu HTML với JavaScript?

Tôi xây dựng. Cách tiếp cận thông thường có vẻ là:

formElement.submit()

Tất cả đều tốt và tốt ngoại trừ một điều. Các trường của biểu mẫu có sẵn dưới dạng thuộc tính của formElement, vì vậy nếu có trường có tên hoặc id "text1", nó có thể được truy cập là formElement.text1.

Điều này có nghĩa rằng nếu một yếu tố được gọi là "submit" (có thể là tên của nó hoặc id của nó), sau đó formElement.submit() sẽ không hoạt động. Điều này là do formElement.submit sẽ không phải là một phương thức của biểu mẫu, nhưng trường có tên đó. Thật không may, nó khá phổ biến mà các nút gửi có một "gửi" tên hoặc id.

Hai ví dụ để minh họa quan điểm của tôi. Đầu tiên, các phần sau sẽ KHÔNG hoạt động, bởi vì phần tử của biểu mẫu có tên "submit":

<form name="example" id="example" action="/"> 
    <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Sau đây sẽ làm việc. Điểm khác biệt duy nhất là tôi đã xóa tên "gửi" khỏi biểu mẫu:

<form name="example" id="example" action="/"> 
    <button type="button" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Vì vậy, có cách nào khác để gửi biểu mẫu HTML bằng JavaScript không?

Nguồn

2010-01-04 pablobm

khá khó chịu ... Tôi đã cùng một vấn đề với "chiều dài" tài sản của các hình thức (số kiểm soát) được thay thế bằng giá trị của một kiểm soát có tên là "chiều dài". Cuối cùng tôi đã thay đổi tên của điều khiển. –

Xem http://stackoverflow.com/questions/876243/why-does-naming-your-html-form-submit-button-submit-break-things –

Tôi có ngốc không nếu tôi đề xuất chỉ cho nó một cái tên khác. .? Ví dụ. '" action "' hoặc '" run "'. – BalusC

Tạo một hình thức trong JavaScript, và áp dụng phương pháp submit() nó vào mẫu ban đầu của bạn:

<html> 
    <script> 
     function hack() { 
      var form = document.createElement("form"); 
      var myForm = document.example; 
      form.submit.apply(myForm); 
     } 
    </script> 

    <form name="example" id="example" method="get" action=""> 
     <input type="hidden" value="43" name="hid"> 
     <button 
      type="button" 
      name="submit" 
      onclick="hack();return false;" 
     >Submit</button> 
    </form> 
</html>

form.submit là tham chiếu đến một tươi và sạch sẽ phương pháp gửi, và sau đó bạn sử dụng apply(myForm) để thực hiện nó với hình thức ban đầu.

Nguồn

2010-01-04 14:56:40 Jerome

Vì vậy, có cách nào khác để gửi biểu mẫu HTML bằng JavaScript không?

Cập nhật: Làm theo lời khuyên của Jerome (ở nơi khác trong chủ đề này). Tôi sẽ để lại câu trả lời này vì lợi ích lịch sử, nhưng nó không tốt hay đáng tin cậy như giải pháp của Jerome.

Cách tiếp cận sau là xấu, nhưng hoạt động.

var x = document.forms.example; 
    var f = document.createElement('form'); 
    f.action = x.action; 
    f.method = x.method; 
    f.enctype = x.enctype; 
    for (var i = 0; i < x.elements.length; i++) { 
     var el = x.elements[i]; 
     if (el.name !== "submit") { 
      f.appendChild(el); 
     } 
    } 
    x.parentNode.replaceChild(f,x); 
    f.submit();

Nguồn

2010-01-04 14:50:26 Quentin

Trong Firefox

formElement.constructor

lợi nhuận "HTMLFormElement".Vì vậy, bạn có thể gửi biểu mẫu bằng cách sử dụng:

HTMLFormElement.prototype.submit.call(formElement)

Bạn có thể mở rộng này để các trình duyệt khác cũng như:

formElement.constructor.prototype.submit.call(formElement)

Nguồn

2010-01-04 14:56:43 Alsciende

Tuy nhiên, không phải tất cả trình duyệt đều hiển thị 'constructor' trên các phần tử biểu mẫu (hoặc bất kỳ đối tượng host nào khác, cho vấn đề đó). – kangax

Rõ ràng đây không phải là trình duyệt chéo –

Ý tưởng tốt nhất là không đặt tên cho một nút submit 'submit', nhưng bạn có thể có được xung quanh nó-

function reallysubmitform(n){ 
n= n || 0; 
var f= document.forms[n]; 
f.onsubmit= function(){ 
    return true 
}; 
var sub= f.elements['submit']; 
if(sub && sub.type== 'submit') sub.click(); 
else f.submit(); 
}

reallysubmitform()

Nguồn

2010-01-04 15:06:57 kennebec

Nó thực sự giải quyết một trong những vấn đề của tôi, nơi tôi không thể thay đổi tên của nút gửi mặc dù tôi có dạng HTML trong tệp của tôi, vì tôi phải gửi trên máy chủ bên ngoài và họ đã kiểm tra nếu biểu mẫu được gửi có phần tử SUBMIT hay không. –

Gửi biểu mẫu bằng cách sử dụng JavaScript không thể thiết kế an toàn.

Người dùng của bạn có thể duyệt trang web của bạn trên điện thoại của họ, đã tắt JavaScript, tinh chỉnh nguồn trang của bạn hoặc sử dụng Lynx.

Trong mọi trường hợp, vì mục đích trợ năng, bạn sẽ cần nút gửi HTML cũ tốt và một số kiểm tra đầu vào ở phía máy chủ.

Nguồn

2010-01-04 15:08:33

Tất nhiên, nhưng vẫn có thể thêm các cải tiến hợp lý để tận dụng các tính năng này. Đối với "an toàn", tôi đã không yêu cầu nó: đó là độ tin cậy mà tôi muốn, dưới hình thức của một giao diện ổn định – pablobm

Đối với biểu mẫu có tên gửi, chỉ cần gọi chức năng nhấp nút của nút đó sẽ hoạt động đối với tôi.

document.forms[0].submit.click(); //where submit here is just the name of the button/input tied to the form.

Nguồn

2012-12-09 15:09:12 Jonathon

Khi tôi ban đầu hỏi câu hỏi, tôi đã phát triển một thư viện JS. Tôi phải giả định càng ít càng tốt về môi trường. Do đó, giải pháp này sẽ không có tác dụng đối với tôi, vì tôi sẽ phải giả định rằng người dùng sẽ sử dụng đánh dấu chính xác. – pablobm

Chỉ cần sử dụng onsubmit ...

<form name="example" id="example" action="/" onsubmit="document.example.submit();"> 
    <button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Nguồn

2016-07-07 06:29:00 Zigri2612

Làm cách nào để gửi biểu mẫu HTML với JavaScript?

Trả lời

Các vấn đề liên quan