Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change form values after submit button pressed

Tags:

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

like image 260
Editorman Avatar asked Dec 23 '10 09:12

Editorman


People also ask

How do I reset form values after submitting?

The reset() method resets the values of all elements in a form (same as clicking the Reset button). Tip: Use the submit() method to submit the form.

How do I change the submit button value?

The value of the button don't change because the jquery you use style the basic submit input by applying a span over it. So on click You will have to change the text in this span.

Can you change text on submit button?

The attribute that changes the name shown on the Submit Button is the Value attribute. You can change the text that appears on the Submit Button by setting the Value attribute to the desired name you want.

How do you change the text of a submit button in a form?

Input value attribute The value attribute can be used to change the text of the form submit button. Use value attribute within <input> of type="submit" to rename the button.


1 Answers

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.

like image 116
T.J. Crowder Avatar answered Oct 16 '22 04:10

T.J. Crowder