I have a form, with a couple of <input> tags inside. I have a submit button (actually an <input> of type BUTTON, not SUBMIT) that is outside the form. I have the form set up similar to this —

<form name="testform" id="testform" action="test.jsp" onsubmit="return modify_value();" method="POST">
<input name="test1" id="test1" type="TEXT" value="A"/>
<input name="test2" id="test2" type="TEXT" value="B"/>
<input name="test3" id="test3" type="HIDDEN"/>
</form>

The submit button, which is outside the form, is defined this way —

<input type="BUTTON" id="_submit" onclick="document.forms[0].submit();"/>

And the modify_value() JavaScript method looks like this —

function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    return true;
}

When the submit button is clicked, I am trying to modify the value of the test3 element before the form gets submitted. For some reason, I can never read the new value in my servlet.

Alternate Method - (Doesn't Work Either) WORKS!

I have tried submitting the form in a slightly different way as well - by setting the button's onclick event to point to the modify_value() method and in the last line of that method, calling form.submit() instead of returning a value (EDIT: And of course, removing the onsubmit attribute in the form). This doesn't work either.

What am I doing wrong here?

I have a form, with a couple of <input> tags inside. I have a submit button (actually an <input> of type BUTTON, not SUBMIT) that is outside the form. I have the form set up similar to this —

<form name="testform" id="testform" action="test.jsp" onsubmit="return modify_value();" method="POST">
<input name="test1" id="test1" type="TEXT" value="A"/>
<input name="test2" id="test2" type="TEXT" value="B"/>
<input name="test3" id="test3" type="HIDDEN"/>
</form>

The submit button, which is outside the form, is defined this way —

<input type="BUTTON" id="_submit" onclick="document.forms[0].submit();"/>

And the modify_value() JavaScript method looks like this —

function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    return true;
}

When the submit button is clicked, I am trying to modify the value of the test3 element before the form gets submitted. For some reason, I can never read the new value in my servlet.

Alternate Method - (Doesn't Work Either) WORKS!

I have tried submitting the form in a slightly different way as well - by setting the button's onclick event to point to the modify_value() method and in the last line of that method, calling form.submit() instead of returning a value (EDIT: And of course, removing the onsubmit attribute in the form). This doesn't work either.

What am I doing wrong here?

• javascript
• dom

• did u try removing the onsubmit event in form tag first and calling the modify_value() on button's onlick as u have mentioned above.. i think that should work. – bipen Commented Oct 17, 2012 at 8:56
• @bipen: Oh yes, I did that. Still doesn't work. – GPX Commented Oct 17, 2012 at 9:01

4 Answers 4

When you call .submit() in JavaScript. The form's onsubmit event handler is not called.

I would put the button inside the form, and make it a submit button. Otherwise it's just a dead button (semantically, and when JavaScript is not available).

In HTML validation you're not allowed an INPUT element outside of a FORM element anyway. Weird, it seems you are! Ha ha I never knew that...

If you need to work within the restrictions specified within your answer, then remove the onsubmit attribute:

<form name="testform" id="testform" action="test.jsp" method="POST">
<input name="test1" id="test1" type="TEXT" value="A"/>
<input name="test2" id="test2" type="TEXT" value="B"/>
<input name="test3" id="test3" type="HIDDEN"/>
</form>

...and change the onclick attribute to modify the value...

<input type="BUTTON" id="_submit" onclick="modify_value()"/>

...and add the form submission to the end of the function, no need to return any value...

function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    document.forms[0].submit();
}

you can try this

<input type="BUTTON" id="_submit" onclick="modify_value()"/>
function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    document.getElementById("testform").Submit();
}

You can actually now do this entirely in HTML, see the form attribute for submit buttons all <input> elements — new with HTML5.

The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a <form> element in the same document. If this attribute is not specified, this <input> element must be a descendant of a <form> element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements.

Here's an example of how to use it:

<input type="submit" form="download" value="Download Selection" />

This button can then be placed anywhere on your page.

Obviously this only works on a limited number of browsers at the moment, but I figured it's worth a mention.

try this...

HTML

<form name="testform" id="testform" action="test.jsp" onsubmit="return false;" method="POST">  // onsubmit to return false
.....
<input type="submit" id="_submit" onclick="modify_value()"/> //call javascript function
</form>

JAVACRIPT

function modify_value()
{
   var hidden_field = document.getElementById('test3');
   hidden_field.value = 'new_test_value_set_on_clicking'; // do the things here
   document.getElementById('testform').Submit(); // submit the form
}