Change form values after submit button pressed

[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.

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?

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:

<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;
  };
};​

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

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

$('#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.

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

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

You could use formData event.

The formdata event fires after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor.

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