23

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

Editorman
  • 319
  • 1
  • 2
  • 7
  • 2
    This isn't intended as criticism, merely my curiosity, but *why* are you manipulating the data between the user's submit action and your server's receipt of the data? – David Thomas Dec 23 '10 at 09:31
  • 1
    @David Thomas - I'm adding CKEditor to a certain (existing) project. Problem is, I need the output of the CKEditor to be prepended with something to make it play nice with the rest of the project. I've tried asking for other methods of how to do this, but just catching the submit event and adding the code manually is easiest right now (and I haven't gotten answers to my other questions). – Editorman Dec 23 '10 at 11:09

4 Answers4

23

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • OK I checked again, with your code it works. The difference - I was using jQuery to get and set the text box (i.e., `$('.txtSearch').val(newval)`). Changing it to this solved it: `$(".txtSearch")[0].value = newval`. Any idea what the difference is? – Editorman Dec 23 '10 at 11:02
  • @Editorman: Nope, it should come down to the same thing. I translated my example to use jQuery for everything and it still works, see above. – T.J. Crowder Dec 23 '10 at 11:14
  • OK, see the update in the question. The problem was, half the time I tested with the CKEditor, and half the time without (obviously without realizing it!), which meant that your methods, my methods, everyone's methods worked, but only half the time! Thanks for the help in any case.. – Editorman Dec 23 '10 at 13:07
  • 1
    One issue you'll have: if the user presses back they will see the altered value in the form instead of the value they entered. You can get around this by doing this in the onSubmit event: onsubmit = function() { var oldText = elem.value; elem.value = "updated" + elem.value; setTimeout(function() { elem.value = oldText; }, 0); } – Matt Wonlaw Sep 20 '11 at 23:25
14

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
});
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • 1
    @David: The `submit` function on form elements doesn't trigger the submit handler. (Note it's `this.submit();` not `$(this).submit();`'). – T.J. Crowder Dec 23 '10 at 09:39
  • @T.J., yeah, it might be *simple*, but I wouldn't have thought of doing it that way; so it's still worth the +1 for teaching me something I didn't know =) – David Thomas Dec 23 '10 at 09:41
  • 1
    *"You need to prevent the default submit action and then resubmit the form yourself manually"* I don't think you do. I think the OP is mistaken about the submit handler. I've used it for years to fill in hidden fields before sending forms in. – T.J. Crowder Dec 23 '10 at 09:45
  • I'm not sure why it doesn't work for me. Likely I'm just doing something wrong. But using lonesomeday's method makes the same code I had before work, so thanks! – Editorman Dec 23 '10 at 10:52
  • OK forget my previous message - T.J. Crowder is right, it's possible to do this without resubmitting the form. Also, this solution caused me problems (something to do with an invalid token in the cookies - I have no idea what exactly caused it.) – Editorman Dec 23 '10 at 11:04
2

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
});
Okan Karadag
  • 2,542
  • 1
  • 11
  • 23
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

  • 2
    That will work if the user submits the form by clicking the button, but if it's submitted another way (pressing Enter, for instance), it won't. – T.J. Crowder Dec 23 '10 at 09:44
  • hmm did not think about submitting the form using enter :) –  Dec 23 '10 at 09:45