使用preventDefault（）提交表單，但保持瀏覽器自動完成功能

我使用ajax發送表單的數據，因此爲了覆蓋我使用的默認瀏覽器行爲preventDefault()，但我想保留瀏覽器功能以記住數據鍵入未來的自動填充。使用preventDefault（）提交表單，但保持瀏覽器自動完成功能

是否有可能做到這一點？

HTML

<form id="form-login" action="/padrao/Login/executaLoginAjax" method="post"> 
    <input type="text" id="usuario" name="usuario[email]" class="entradas" placeholder="Usuário" maxlength="80" required /> 
    <input type="password" id="senha" name="usuario[senha]" class="entradas" placeholder="Senha" maxlength="12" required /> 
    <input type="submit" id="btn-logar" value="Acessar o sistema" /> 
</form>

的Javascript

$('#form-login').submit(function(event){ 

    event.preventDefault(); 

    var action = $(this).attr('action'); 
    var dados = $(this).serialize(); 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: dados, 
     dataType: "json", 

     success: function(json){ 

      if(json.sucesso){ 
       window.location.href = 'http://' + location.host + '/home'; 
      }else{ 
       alert('fail'); 
      } 

     } 

    }); 

});

來源

2014-02-18 Marcio Mazzucato

使用AJAX提交表單 – MonkeyZeus

@MonkeyZeus時，這是不可能的，請張貼作爲回答您的評論，因爲這可能是最好的。謝謝！ –

嗯......你可以通過可能提交到隱藏的iframe，而不是使用AJAX（或除了使用AJAX） –

簡短的回答

從上面糾正我的意見。在收聽本機表單提交時使用preventDefault()方法時，這是不可能的。 AJAX無關這個除了是在第一個地方使用preventDefault()的一個常見原因。

龍答案

截至目前網頁瀏覽器的自動填充或自動完成數據存儲只有在形式實際上是要通過定期提交過程和觸發數據的序列化觸發。

使用event.preventDefault();阻止瀏覽器達到這種狀態下，因此從來不知道保存表單數據供日後使用。

可能的補救措施

設置一個var allowNativeSubmit = false;標誌，並在成功驗證和保存然後設置allowNativeSubmit = true;形式，調用手動提交觸發和建設中跳過AJAX提交，如果這個標誌是真實的邏輯。將表單數據發送到與數據無關的成功頁面。
每當一個表單成功提交，你可以將數據保存到本地存儲和執行一個jQuery UI自動完成模擬瀏覽器的自動填充功能。

我已經實現了＃1之前，它工作得很好。

＃1例

$(document).ready(function() { 

    var allowNativeSubmit = false; 

    $('#form-login').on('submit', function (e) { 

     if (!allowNativeSubmit) { 

      e.preventDefault(); 

      var formTarget = $(this); 

      $.ajax({ 
       type: formTarget.attr('method'), 
       url: formTarget.attr('action'), 
       data: formTarget.serialize(), 
       dataType: "json", 
       success: function (data) { 

        if (data.sucesso) { 

         // set the action to success page 
         formTarget.attr('action', 'success.html'); 

         // allow native browser submit 
         allowNativeSubmit = true; 

         // call the native browser submit 
         formTarget.submit(); 

        } else { 

         alert('form validation failed!'); 

        } 
       } 
      }); 
     } 
    }); 
});

來源

2014-02-19 13:42:23 MonkeyZeus

我遇到了同樣的問題，所以做了一點挖掘：他們已經修復它在谷歌金絲雀，計劃釋放爲M46 https://code.google.com/p/chromium/issues/detail?id=339927 – bitinn

-1

只要改變你的提交輸入到正規的按鈕，並刪除形式標記，在你的信息的。您將無法執行標準提交的能力，但如果你真的需要，可以重新進行添加這些標籤，或者使用一個按鈕，輸入需要它可以切換到一個提交輸入。

來源

2014-02-18 18:15:38

使用preventDefault（）提交表單，但保持瀏覽器自動完成功能

回答

相關問題