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

IT技术 javascript jquery html ckeditor
2021-03-13 19:57:16

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

你好,

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

我试过挂钩表单的“提交”事件,并手动更改那里的文本字段值,但看起来这实际上并没有更改提交的值。

有任何想法吗?

3个回答

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

示例(实时复制):

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());
});

现场示例在同一组浏览器上测试和工作。此版本使用更开放的搜索而不是id,并且仍然有效。

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

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

$('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
});
@TJ,是的,这可能很简单,但我没想过这样做;所以教我一些我不知道的东西仍然值得 +1 =)
2021-04-19 19:57:16
@David:submit表单元素上函数不会触发提交处理程序。(注意它this.submit();不是$(this).submit();')。
2021-04-25 19:57:16
我不确定为什么它对我不起作用。可能我只是做错了什么。但是使用 lonesomeday 的方法可以生成与我之前工作相同的代码,所以谢谢!
2021-05-11 19:57:16
“您需要阻止默认提交操作,然后自己手动重新提交表单”,我认为您不会这样做。我认为 OP 对提交处理程序有误解。我多年来一直使用它来填写隐藏的字段,然后再发送表单。
2021-05-12 19:57:16
好吧,忘记我之前的消息 - TJ Crowder 是对的,无需重新提交表单即可执行此操作。此外,这个解决方案给我带来了问题(与 cookie 中的无效令牌有关 - 我不知道究竟是什么原因造成的。)
2021-05-15 19:57:16

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

嗯没有考虑使用回车提交表单:)
2021-04-26 19:57:16
如果用户通过单击按钮提交表单,这将起作用,但如果它以另一种方式提交(例如,按 Enter),则不会。
2021-05-14 19:57:16