Problem with multiple actions onclick

Question

I have a page with a form and navigation links. If you click on a navigation link I need to submit the form as well as follow the navigation request.

To do this I have a link who's href is pointing to the new page request and I have the onclick event bound to a function that submits the form on the page.

Could this scenario cause hard to reproduce problems of the form not submitting?

ex:

function submitForm(){
document.myform.submit();
}

<a href="page1.html" onclick="submitForm()">Back To page 1</a>
<form action="procsub" method="post"><input type="text" id="val1" /></form>

Answer 1

When you run the javascript to submit the form it's going to post to whatever the action url is of the form. That will redirect you and your javascript probably won't be run.

You could: a.) Change your submitForm() to post via AJAX and then do a javascript redirect with a window.location? --> More Info

b.) Do a redirect from whatever the action page is to wherever you want to go by:
  1.) passing a hidden field in the form with the destination url
  2.) having a fixed redirect from the action page either in the header or in javascript

Answer 2

Submitting a form basically means reloading the page (targeting the same page, or a different one, as defined in the form). following a link is also a means of reloading the page.

what you could do would be to modify your submitForm function like so:

function submitForm(a) {
    document.myform.action += '?redirectPage=' + a.href; // given that action doesn't already contain querystrings
    document.myform.submit();
}

and

<a href="page1.html" onclick="submitForm(this);">Back to page 1</a>

And then have the page that handles the form request, do the postback to whichever page was being passed as redirectPage.

A form submit is really not what the user expects when clicking 'back to page 1' tho. you may want to think this through one more time...