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

Question

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

javascriptjqueryhtmlckeditor

23

[编辑] 经过大量的查找，我发现问题出在如何将 CKEditor 集成到我的页面上。如已接受的答案所述，简单明了的方式确实在这种情况下起作用。

你好,

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

我尝试钩入表单的“submit”事件，并在那里手动更改文本字段的值，但似乎这并不会实际更改提交的值。

有什么想法吗？

- Editorman

2

这并非是批评，只是我的好奇心，但是你为什么要在用户提交操作和服务器接收数据之间操纵数据呢？ - David Thomas

1

@David Thomas - 我正在将CKEditor添加到某个（现有的）项目中。问题在于，我需要将CKEditor的输出前置一些内容，使其与项目的其余部分很好地配合。我已经尝试过询问其他如何做到这一点的方法，但目前最简单的方法就是捕获提交事件并手动添加代码（我还没有得到其他问题的答案）。 - Editorman

4个回答

14

你需要阻止默认的提交行为，然后手动重新提交表单：

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

- lonesomeday

1

@David：表单元素上的“submit”函数不会触发提交处理程序。（请注意，它是this.submit();而不是$(this).submit();）。 - T.J. Crowder

@T.J.，是的，它可能很“简单”，但我不会想到用那种方式做；所以它仍然值得 +1，因为教了我一些我不知道的东西 =) - David Thomas

1

“你需要阻止默认的提交操作，然后手动重新提交表单。” 我认为不需要这样做。我认为原帖作者对于提交处理程序存在误解。多年来，我一直在使用它来填写隐藏字段，然后发送表单。 - T.J. Crowder

我不确定为什么它对我不起作用。可能是我做错了什么。但使用lonesomeday的方法使我之前的代码能够工作，所以谢谢！ - Editorman

好的，忘记我的上一条消息 - T.J. Crowder 是正确的，可以在不重新提交表单的情况下完成这个操作。此外，这个解决方案给我带来了问题（与 cookie 中的无效令牌有关 - 我不知道具体是什么原因导致的）。 - Editorman

3

您可以使用formData事件。

formdata事件在表示表单数据的条目列表构建完成后触发。这发生在提交表单时，但也可以通过调用FormData()构造函数来触发。

formElem.addEventListener('formdata', (e) => {
  const formData = e.formData;
  //no need change document.getElementById().value = "";
  formData.set('field1', 'foo');
  formData.set('field2', 'bar');
  //updated formData
});

- Okan Karadag

1

你尝试在提交按钮上添加点击JavaScript事件并更改值了吗？这可能会起作用，因为客户端脚本将首先执行。

- Sreedhar K

2

如果用户通过点击按钮提交表单，那么这将起作用，但如果以其他方式提交（例如按Enter键），则不会起作用。 - T.J. Crowder

哦，没有考虑使用回车键提交表单 :) - Sreedhar K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

我对你所说的提交处理程序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，它仍然可以正常工作。