フォームを提出しないクロム自動入力

Question

<form>と<input type='submit'>をjQueryに置き換えました。ページをリロードするのではなく、Ajaxを使用して入力データを送信できます。

これは素晴らしいですが、Chromeの自動入力が機能しなくなりました。私の現在のコードの

簡体字版：jQueryので

<input type="text" id="field1"> 
<input type="button" id="send" value="Save"> 

をhandeled：

$("#send").click(function() { 
    $.post('my.php', { 
     field1: field1 
    }); 
}); 

がどのように私はGoogleがfield1に入力した値を覚えてもらうことができますか？

Answer 1

送信ボタンが付いたフォームを使用すると、chromeがフォームを自動入力できるようになり、JavaScriptを有効にしていないブラウザでフォールバックを行うことができます。これは、X-Requested-Withヘッダーの値がXMLHttpRequestの場合に確認できます。

たとえば、ajaxリクエストのjsonレスポンスと、XHR経由でページをリクエストしなかった古いブラウザのhtmlレスポンスを送信できます。

例jQueryの-コード：

$("#myForm").on("submit",function(e) { 
    if(everythingIsFine) { 
    // Send form via ajax to the backend 
    sendMyForm(); 
    } else { 
    doSomeWarningsForUser(); 
    } 

    // Prevent browser from submitting form 
    e.preventDefault(); 
} 

そして、このようなあなたのhtml：

<form method="POST" action="/myAction/" id="myForm"> 
    <input type="text" id="field1"> 
    <button type="submit">Save</button> 
</form>