提交表单前更改数据

Question

我希望能在提交 Facebook 表单之前加密文本框中的文本。我尝试使用 beforeSerialize 或 beforeSubmit 的 ajaxFORM 插件进行加密，但加密并没有发生。在下面的代码中，为了调试目的，加密函数被替换为 alert。警报在运行脚本后立即出现，而不是在按下 Facebook 提交按钮时出现。此外，当我按下提交按钮时，它会要求刷新页面，我不想这样做。

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
document.body.appendChild(s);


var f = document.createElement('script');
f.setAttribute('src', 'http://malsup.github.com/jquery.form.js');
document.body.appendChild(f);

var c = document.createElement('script');
c.setAttribute('src', 'http://malsup.github.com/chili-1.7.pack.js');
document.body.appendChild(c);



s.onload=function(){


$(document).ready(function() { 
    // bind form using ajaxForm 
    $(document.activeElement).closest("form").ajaxForm( { 
    beforeSerialize:         alert($(document.activeElement).val()) } ); 
});


};

- vkefallinos

Answer 1

您可以通过在提交按钮上调用click事件来控制提交之前发生的事情：

$("#submit_button").click(function(event) {
    event.preventDefault();

    alert("Encrypting...");
});

如果你希望在处理完点击事件后，按钮可以像平常一样运作，你也可以不使用event.preventDefault();。但是，如果你想自己触发提交事件，我建议使用event.preventDefault();

注意:

我知道执行不同事件的顺序（如点击、更改等）存在差异；例如，在同一复选框上进行更改和点击事件会导致Firefox中的（点击，然后更改），或Chrome中的（更改，然后点击）。如果按钮的点击和提交事件也是如此，请使用preventDefault，这样当表单准备好提交时，你就可以自己触发提交。这样，它将在任何浏览器中都可以使用。

- Flater

---

我不知道提交按钮的ID或名称，所以我不能使用$(#submit_button)。而且在Facebook上，只有第一个文本框有一个提交按钮。所有其他文本框都是通过按“Enter”键提交的。谢谢你的帮助。 - vkefallinos

那么，我有没有办法绕过上述问题？ - vkefallinos

如果它们是通过回车键提交的，仍然会附加一个“submit”处理程序，只是没有按钮而已 :) 因此，.submit() 仍将触发事件。(请记住，您需要像 $("#id_of_form or .class_of_forms").submit(); 这样触发它。此外，您可以通过在DOM中深入挖掘来找到按钮：$("body>div>form>input[type=submit]") (语法不确定，请查看Google，但这是基本思路。例如，您还可以挖掘：$("#id_of_element_inside").parent().parent() :-) - Flater