按下提交按钮后更改表单值答案

【问题标题】：Change form values after submit button pressed按下提交按钮后更改表单值
【发布时间】：2010-12-23 09:23:10
【问题描述】：

[编辑] 经过大量挖掘，我发现问题在于我如何将 CKEditor 集成到我的页面中。在这种情况下确实工作的简单而明显的方式，如接受的答案中所述。

嗨，

我需要在按下提交按钮之后，但在实际提交发生之前更改表单的值。

我已经尝试连接到表单的“提交”事件，并手动更改文本字段的值，但看起来这实际上并没有更改提交的值。

有什么想法吗？

【问题讨论】：

这不是批评，只是我的好奇心，但是为什么你在用户的提交操作和你的服务器接收数据之间操纵数据？
@David Thomas - 我正在将 CKEditor 添加到某个（现有）项目中。问题是，我需要在 CKEditor 的输出前面加上一些东西，以使其与项目的其余部分配合得很好。我试过询问其他方法来做到这一点，但现在只捕获提交事件并手动添加代码是最简单的（而且我还没有得到其他问题的答案）。

标签： javascript jquery html ckeditor

【解决方案1】：

我很好奇您关于 submit 处理程序不适合您的说法。它对我有用。我多年来一直使用它来填写隐藏字段，然后再发送表格；应该也适用于其他表单字段。

示例 (live copy)：

HTML：

<form id='theForm'
    action='http://www.google.com/search'
    method='GET' target='_new'>
      <label>Search for:
        <input type='text' name='q' id='txtSearch'></label>
      <input type='submit' id='btnSearch' value='Search'>

JavaScript：

window.onload = function() {

  document.getElementById('theForm').onsubmit = function() {
    var txt = document.getElementById('txtSearch');
    txt.value = "updated " + txt.value;
  };
};

在 Windows 上的 IE6 和 IE7 以及 Linux 上的 Chrome、Firefox 和 Opera 上进行了测试和工作。

更新：根据您在下面的评论，您正在使用 jQuery。使用 jQuery 也可以正常工作：

$('#theForm').submit(function() {
  var txt = $('#txtSearch');
  txt.val("updated " + txt.val());
});

Live example 测试并在同一组浏览器上工作。 This version 使用更开放的搜索而不是 id，并且仍然有效。

【讨论】：

好的，我再次检查，您的代码可以正常工作。不同之处 - 我使用 jQuery 来获取和设置文本框（即$('.txtSearch').val(newval)）。将其更改为此解决了它：$(".txtSearch")[0].value = newval。知道有什么区别吗？
@Editorman：不，应该归结为同一件事。我将我的示例翻译为对所有内容都使用 jQuery，它仍然有效，见上文。
好的，请参阅问题中的更新。问题是，一半时间我用 CKEditor 测试，一半时间没有（显然没有意识到！），这意味着你的方法，我的方法，每个人的方法都有效，但只有一半的时间！无论如何感谢您的帮助..
您将遇到的一个问题：如果用户按下返回，他们将在表单中看到更改后的值，而不是他们输入的值。您可以通过在 onSubmit 事件中执行此操作来解决此问题： onsubmit = function() { var oldText = elem.value; elem.value = "更新" + elem.value; setTimeout(function() { elem.value = oldText; }, 0); }

【解决方案2】：

您需要阻止默认提交操作，然后自己手动重新提交表单：

$('form').submit(function(e) {
    e.preventDefault();

    // do your processing

    this.submit(); // call the submit function on the element rather than 
                   // the jQuery selection to avoid an infinite loop
});

【讨论】：

@David：表单元素上的submit 函数不会触发提交处理程序。（注意它是this.submit(); 而不是$(this).submit();'）。
@T.J.，是的，这可能是简单，但我不会想到这样做；所以它仍然值得 +1 教我一些我不知道的东西 =)
“您需要阻止默认提交操作，然后自己手动重新提交表单” 我认为您不会这样做。我认为 OP 对提交处理程序有误。我多年来一直使用它来填写隐藏字段，然后再发送表格。
我不知道为什么它对我不起作用。可能我只是做错了什么。但是使用 lonesomeday 的方法会产生与我工作前相同的代码，所以谢谢！
OK 忘记我之前的留言 - T.J. Crowder 是对的，可以在不重新提交表单的情况下执行此操作。此外，这个解决方案给我带来了问题（与 cookie 中的无效令牌有关 - 我不知道究竟是什么原因造成的。）

【解决方案3】：

您是否尝试在提交按钮上的单击 JavaScript 事件上添加功能并更改值？它可能会起作用，因为客户端脚本将首先执行

【讨论】：

如果用户通过单击按钮提交表单，这将起作用，但如果以其他方式提交（例如按 Enter），则不会。
hmm 没有考虑使用 enter 提交表单 :)