Question

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?

Answer 1

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