2012-02-08 10 views
27

Tôi đã nhận thấy rằng các trình duyệt không lưu trữ các giá trị biểu mẫu cho đến khi biểu mẫu được gửi, có nghĩa là nếu bạn đang sử dụng AJAX thay vì biểu mẫu chuẩn gửi, tính năng tự động điền của trình duyệt của bạn không bao giờ được điền. Có cách nào để buộc các trình duyệt của bạn tự động điền/tự động hoàn tất để tôi có thể có sự tiện lợi này với các biểu mẫu được gửi qua AJAX không? Thật khó chịu khi truy cập trang AJAX của tôi và phải nhập vào những thứ tương tự trong các trường biểu mẫu mọi lúc bởi vì trình duyệt không nhớ chúng.Cách lưu trữ để tự động hoàn tất/tự động điền của trình duyệt khi sử dụng các cuộc gọi AJAX

Câu hỏi của tôi khá giống với this one, ngoại trừ việc chỉ một công việc trong FireFox được cung cấp làm câu trả lời được chấp nhận cho câu hỏi đó. Tôi đang tìm một giải pháp hoạt động trong tất cả các trình duyệt chính (ít nhất là Chrome, FF và IE), nếu có.

Lưu ý: Tôi không nói về các plugin tự động hoàn thành AJAX, đây là những gì hầu như luôn bật lên khi googling câu hỏi này. Tôi đang nói về tính năng tự động hoàn thành hoặc tự động điền của trình duyệt giúp bạn điền biểu mẫu bằng cách ghi nhớ những gì bạn đã nhập trong quá khứ.

+0

Bạn có thể gửi đến javascript: URI không? –

+3

Đây là một vấn đề lớn trong các biểu mẫu AJAX và tôi thấy thật đáng kinh ngạc khi có ít thông tin về nó trên web hoặc bất kỳ giải pháp trình duyệt chéo nào đang hoạt động. Ai biết được, có thể có tài nguyên trên đó nhưng như bạn đã đề cập, rất khó để lội qua tất cả các công cụ plugin tự động hoàn thành mà các từ khóa tương tự như vậy. EDIT: Chỉ cần nhìn thấy điều này đã được đăng trong năm 2012. Ở đây chúng tôi là 2 năm sau đó với không có tiến bộ – Andy

+0

Trả lời ở đây ... https://stackoverflow.com/questions/15462991/trigger-autocomplete-without-submitting-a-form/ 30584602 # 30584602 –

Trả lời

1

Bạn đã thử câu trả lời cho câu hỏi của mình mà bạn đề cập đến chưa? Câu trả lời là sử dụng iframe ẩn nhưng có vẻ như anh cho rằng ý tưởng này không hoạt động trên IE và Chrome vào thời điểm đó.

Cố gắng thực hiện ý tưởng và thay vì sử dụng iframe ẩn, chỉ cần đặt tên người dùng/mật khẩu/gửi phần tử đầu vào hiển thị trong biểu mẫu POST, trong khung nội tuyến. Vì vậy, người dùng sẽ nhập chi tiết đăng nhập trực tiếp vào khung nội tuyến. Với Javascript thích hợp, bạn có thể đặt hình ảnh tải, thành công hoặc bị từ chối từ máy chủ và cập nhật phụ huynh hoặc toàn bộ trang. Tôi tin rằng nó sẽ hoạt động trên bất kỳ trình duyệt nào.

Hoặc nếu bạn vẫn muốn sử dụng AJAX vì có thể bạn đã triển khai API ở phía máy chủ. Bạn có thể làm cho iframe chỉ gửi một POST giả cùng một lúc gửi người dùng/pass thực tới URL AJAX.

Hoặc quay lại để sử dụng khung nội tuyến ẩn, không ẩn nó, nhưng di chuyển nó đến khu vực vô hình như top: -1000px.

+0

Tôi có cùng một vấn đề, bạn có tìm thấy giải pháp nào không? – Mango

+0

Tôi không thử nghiệm, nhưng có vấn đề gì khi sử dụng khung nội tuyến không? hãy chia sẻ vấn đề của bạn với người đọc. – CallMeLaNN

+0

Chrome 46 đã khắc phục hành vi sai của nó - không cần xử lý 'iframe' nữa. Xem https://stackoverflow.com/a/33113374/810109 – mkurz

3

Tôi cũng đã gặp phải điều này; có vẻ không phải là một giải pháp tuyệt vời, chắc chắn không phải là một trình duyệt chéo một, nhưng đây là một trong cho IE Tôi chưa thấy ai đề cập đến:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<SCRIPT> 
function subForm() 
{ 
window.external.AutoCompleteSaveForm(f1); 
f1.submit(); 
} 
</script> 
</HEAD> 
<BODY> 
<FORM id=f1> 
User ID : <input type=text name=id></input><br> 
Password :<input type=password name=pw></input><br> 
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br> 
<input type=button value=submit onclick="subForm()"> 
</FORM> 
</BODY> 
</HTML> 

Từ: http://support.microsoft.com/kb/329156

1

Sử dụng phương pháp này:

AutoCompleteSaveForm = function(form){ 
    var iframe = document.createElement('iframe'); 
    iframe.name = 'uniqu_asdfaf'; 
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px'; 
    document.body.appendChild(iframe); 
    var oldTarget = form.target; 
    var oldAction = form.action; 
    form.target = 'uniqu_asdfaf'; 
    form.action = '/favicon.ico'; 
    form.submit(); 
    setTimeout(function(){ 
     form.target = oldTarget; 
     form.action = oldAction; 
     document.body.removeChild(iframe); 
    }); 
} 

thử nghiệm với IE10, ff mới nhất, chrome mới nhất

thử nghiệm bản thân: http://jsbin.com/abuhICu/1

+0

Điều này sẽ tiêu thụ băng thông như địa ngục và trao đổi dữ liệu thậm chí không hữu ích. –

+0

Tôi nghĩ đây là giải pháp duy nhất. Và có nó sẽ gửi toàn bộ hình thức, nhưng trong nền. –

+0

Bất kể là một nhiệm vụ ẩn hay không, nó không làm cho nó ít hơn một yêu cầu chết tràn ngập máy chủ. Tôi hy vọng giải pháp tốt hơn sẽ đến với Ajax mọi lúc. –

1

Sau vài giờ tìm kiếm, tôi tìm thấy một giải pháp tại Trigger autocomplete without submitting a form.

Về cơ bản, nó sử dụng khung nội tuyến ẩn trong cùng một trang, đặt hành động biểu mẫu của bạn thành 'src' của khung nội tuyến và thêm nút gửi ẩn bên trong biểu mẫu, khi người dùng nhấp vào nút của bạn. , bạn nên lập trình nhấp vào nút ẩn trước khi gửi yêu cầu AJAX.xem ví dụ dưới đây:

Trong trang hình của bạn:

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe> 
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal"> 
    <input type="text" name="name"> 
    <input type="text" name="age"> 
    .... 
    <button id="submit_button" type="submit" class="hidden"></button> 
    <button id="go_button" type="submit" class="hidden">Go</button> 
</form> 

Sau đó, java script:

$('#go_button').click(function(event){ 
    //submit the form to the hidden iframe 
    $('#submit_button').click(); 
    //do your business here 
    $.ajax(function(){ 
     //whatever you want here 
    }}) 
); 

Hope this helps.