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

时间:2021-10-25 07:28:18

[EDIT] After a lot of digging around, I found out that the problem was in how I integrated the CKEditor into my page. The simple and obvious way does work in this case, as laid out in the accepted answer.

[编辑]经过大量的挖掘,我发现问题出在我如何将CKEditor集成到我的页面中。在这种情况下,简单明了的方法就可以解决,如公认的答案所示。

Hi,

嗨,

I need to change the values of a form, after the submit button has been pressed, but before the actual submission has taken place.

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

I've tried hooking into the "submit" event of the form, and changing the text field values there manually, but it looks like that doesn't actually change the values submitted.

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

Any ideas?

有任何想法吗?

3 个解决方案

#1


18  

I'm curious about your statement that the submit handler didn't work for you. It does for me. I've used it for years to fill in hidden fields before sending forms in; should work for other form fields as well.

我很好奇你的声明提交处理程序不适合你。它对我有用。我已经用它多年来填写隐藏的字段,然后再发送表格;也适用于其他表格领域。

Example (live copy):

示例(实时复制):

HTML:

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:

JavaScript的:

window.onload = function() {

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

Tested and working on IE6 and IE7 on Windows, and Chrome, Firefox, and Opera on Linux.

在Windows上测试并使用IE6和IE7,在Linux上测试Chrome,Firefox和Opera。


Update: Based on your comment below, you're using jQuery. Works fine using jQuery for everything as well:

更新:根据您的评论,您正在使用jQuery。使用jQuery也可以正常工作:

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

Live example Tested and working on the same set of browsers. This version uses a more open search rather than an id, and also still works.

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

#2


12  

You need to prevent the default submit action and then resubmit the form yourself manually:

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

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

#3


1  

Did you try adding function on click JavaScript event on the submit button and changing the values? It may work because client script will execute first

您是否尝试在提交按钮上单击JavaScript事件添加功能并更改值?它可能有效,因为客户端脚本将首先执行

#1


18  

I'm curious about your statement that the submit handler didn't work for you. It does for me. I've used it for years to fill in hidden fields before sending forms in; should work for other form fields as well.

我很好奇你的声明提交处理程序不适合你。它对我有用。我已经用它多年来填写隐藏的字段,然后再发送表格;也适用于其他表格领域。

Example (live copy):

示例(实时复制):

HTML:

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:

JavaScript的:

window.onload = function() {

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

Tested and working on IE6 and IE7 on Windows, and Chrome, Firefox, and Opera on Linux.

在Windows上测试并使用IE6和IE7,在Linux上测试Chrome,Firefox和Opera。


Update: Based on your comment below, you're using jQuery. Works fine using jQuery for everything as well:

更新:根据您的评论,您正在使用jQuery。使用jQuery也可以正常工作:

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

Live example Tested and working on the same set of browsers. This version uses a more open search rather than an id, and also still works.

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

#2


12  

You need to prevent the default submit action and then resubmit the form yourself manually:

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

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

#3


1  

Did you try adding function on click JavaScript event on the submit button and changing the values? It may work because client script will execute first

您是否尝试在提交按钮上单击JavaScript事件添加功能并更改值?它可能有效,因为客户端脚本将首先执行