Question

我们大多数使用表单结合ajax的人可能会注意到用户提交的输入在以后的会话中不会被浏览器保存/建议。当涉及到“登录”页面时，这是一个垮台。浏览器通常提供保存用户名/密码，这非常方便，但提交了ajax表单....好吧，你知道，这不会发生。

我在这里两次看过这个问题但仍然没有答案。自被问及约9个月后，我知道周围有很多聪明人。所以......我决定复活这个问题。

我们可以做些什么来解决这个问题？我们能以某种方式欺骗浏览器吗？

我愿意在这个问题上来回工作，因为我知道为我们所有人提供一个有效的解决方案会很好。

最终解决方案基于 slashingweapon 的答案（谢谢男！）

HTML - 使用自定义按钮提交，不使用任何形式的“操作”或“方法”，仅使用ajax

<form id="signin">

    <label for="username">Username</label>
    <input type="text" id="username" name="username" />

    <label for="password">Password</label>
    <input type="password" id="password"  name="password" />

    //Custom Styled Submit Button
    <img id="submit" class="form_button" src="btn_txt_sign_in.png" alt="Sign In" tabindex="3" />

    //Hidden Standard Form Submit Button
    <input id='trigger' type='submit' style='display:none;' />

</form>

JQuery的

// Bind a click to the Custom Submit Button
$('#submit').click( function() {
    //Trigger a Click on the Hidden Standard Form Submit 
    $('#trigger').click();
});

// Detect when the form attempts to be submitted
$('#signin').submit( function(e){
    // Prevent Standard Form Submission
    e.preventDefault();
    // Perform Function containing Ajax Submission instead
    submit_signin();
});

// Ajax Submission
function submit_signin() {
    //My Ajax Call....
}

Answer 1

如果点击任何提交类型的按钮，则会提交附上表格。您可以选择处理提交事件而不是按钮的单击事件。这是一个例子：

$('#demoForm').submit(function(evt) {
    evt.preventDefault();
    var data = $(this).serialize();
    alert(data);
});

你也有Fiddle。

通过捕获后一个事件，您将确保至少某些浏览器有机会存储表单数据以供将来自动填充。

标准表单提交与Ajax表单提交 - 浏览器自动保存/建议用户输入

1 个答案: