2013-07-09 57 views
5

Tôi đang cố gắng gửi 2 biểu mẫu cùng một lúc, bằng cách sử dụng javascript. Tuy nhiên, dường như chỉ có lần gửi thứ 2 được mở và không phải là lần đầu tiên.Gửi 2 biểu mẫu cùng một lúc bằng cách sử dụng JavaScript

Mã này là khá đơn giản:

<html> 
<body> 
<form id="report_0" method="POST" target="_blank" action="https://www.google.com"> 
    <input type="hidden" name="test1" value="1"> 
    <input type="submit" value="report_0"> 
</form> 
<form id="report_1" method="POST" target="_blank" action="https://www.google.com"> 
    <input type="hidden" name="test2" value="2"> 
    <input type="submit" value="report_1"> 
</form> 
<script> 
    document.getElementById("report_0").submit(); 
    document.getElementById("report_1").submit(); 
    </script> 
</body> 
</html> 

tôi không thể ajax sử dụng hoặc tương đương như nó phải là 'mẹ đẻ' POST (do các vấn đề CORS)

Tôi đã đọc ở đâu đó rằng bạn không thể gửi 2 biểu mẫu cùng một lúc, điều này không có ý nghĩa với tôi. Tôi đã thử thay đổi mục tiêu từ "_blank" thành "form1" & "form2" nhưng vẫn không có gì.

hỗ trợ của bạn sẽ được đánh giá cao :)

EDIT

Dưới đây là những gì tôi thực sự sử dụng:

for (....) { 
     var form = document.createElement("form"); 
     form.setAttribute("name", "report_"+i); 
     form.setAttribute("method", "POST"); 
     form.setAttribute("target", "_blank"); 
     form.setAttribute("action", action); 

     for (var key in parms) { 
      var field = document.createElement("input"); 
      field.setAttribute("type", "hidden"); 
      field.setAttribute("name", key); 
      field.setAttribute("value", parms[key]); 
      form.appendChild(field); 
     } 
     console.log(form); 
     document.body.appendChild(form); 
     form.submit(); 
     document.body.removeChild(form); 
} 
+3

Chỉ vì bạn muốn gửi hai biểu mẫu cùng một lúc không có nghĩa là bạn có thể làm điều đó. Thêm nút "gửi cả hai" gửi cả hai biểu mẫu "hoạt động" trong Firefox và IE. – RobG

+1

RobG, còn Chrome thì sao? – natiz

Trả lời

1

Bạn không thể làm điều đó theo cách này. Khi biểu mẫu được gửi, toàn bộ trang bị "hủy" và phản hồi của biểu mẫu được tải dưới dạng trang mới.

Mã JavaScript chạy đơn luồng nên về cơ bản bạn đang kích hoạt sự kiện gửi trên hai biểu mẫu cùng một lúc và chỉ khi JS của bạn được thực hiện, trình duyệt sẽ tiếp tục và cố gắng thực hiện hàng đợi tác vụ bạn đã cung cấp.

Vì vậy, nếu bạn muốn gửi cả hai hình thức "bình thường" trong một cách phi AJAX, bạn phải:

  1. Store giá trị của hình thức thứ hai trên máy khách bằng cách nào đó (cookie, localStorage , bạn đặt tên cho nó)
  2. Gửi biểu mẫu đầu tiên dẫn đến một trang trông giống hệt nhau ở đâu đó trong nội dung có số kích hoạt một số mã của bạn để xem biểu mẫu đầu tiên đã được gửi.
  3. Khôi phục các giá trị cho biểu mẫu thứ hai (máy chủ không biết các giá trị đó vì chúng chưa được gửi)
  4. Gửi biểu mẫu thứ hai.
+0

Tôi đang thực sự làm theo một cách khác. – natiz

+0

... xem ở trên EDIT. Tôi không thể làm theo cách của bạn vì tôi không thể kiểm soát trang nơi POST đang được thực hiện. – natiz

0

Gửi biểu mẫu là cuộc gọi đồng bộ tới máy chủ (HttpRequest). Do đó, không thể gửi biểu mẫu thứ hai. Bạn đang mong đợi để gửi nhiều biểu mẫu mà không phụ thuộc vào một biểu mẫu không đồng bộ. Vì vậy, API như AJAX sẽ giải quyết vấn đề, nhưng bạn không tìm kiếm điều đó.

Nếu thiết kế của bạn cho phép bạn giữ nhiều khung/khung nội tuyến trong trang của mình, hãy giữ các biểu mẫu đó trong các khung/khung nội tuyến khác nhau. Với cách tiếp cận này, bạn có thể gửi nhiều biểu mẫu từ trang gốc.

Nếu bạn có thể giải thích yêu cầu gửi nhiều biểu mẫu cùng một lúc và các giới hạn của bạn, bạn có thể nhận được phản hồi tốt hơn.

+0

Tôi hy vọng bạn có nghĩa là hình thức đầu tiên .. bởi vì đó là hành vi. chỉ người thứ hai được gửi (= người cuối cùng) – natiz

0

chúng tôi có thể đạt được với cả hai cách đồng bộ/asyn, vui lòng tham khảo liên kết bên dưới với ví dụ mẫu .... tôi hy vọng điều này sẽ giúp bạn.

http://yogendrakrsingh.blogspot.in/2010/03/javascript-trick-submitting-multiple.html

hoặc

với sự giúp đỡ của serialize qua ba ẩn cho MWe có thể đạt được. này đã được đăng tải, xin vui lòng bên dưới liên kết

Is to possible to submit two forms simultaneously?

3

Không phải là cách đẹp nhất để làm việc đó, nhưng tôi nghĩ rằng nó sẽ được tốt đẹp để chia sẻ nó anyways. Tôi đã kết thúc giải quyết nó bằng cách sử dụng setTimeout:

var requestDelay = 2000; 
document.getElementById("form-a").submit(); 

setTimeout(function() { 
    document.getElementById("form-b").submit(); 
}, requestDelay); 

Bằng cách này, nó chờ đợi cho đến khi form A (lẽ, với ước tính 2 giây) đã được gửi đi, và sau đó nộp form B. Bạn có thể cần phải chơi xung quanh với requestDelay để phù hợp với nhu cầu của bạn.

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