Question

I have a web page that uses cross page posting to post to a different target page.

A new requirement has arisen that means that there could be 4 different target pages to post too depending on what data was entered on the client.

Is it possible to somehow change the cross page posting target dynamically on the client?

From looking at the source html I guess it would be possible to use jquery to manipulate the postback target on the submit button, but this seems a bit of a hack.

What are my alternatives, rewrite the pages to remove cross-page posting and do a response redirect passing the data in session?

Answer 1

Yes you can certainly change the action of the form. I’ll walk you through how to do it.

First, your form must have a name and an action URL specified in the HTML:

<form name="aformiam" method="post" action="/somewhere/to/go.php">

Next, you’re going to want to run some JavaScript on form submission, so you should set the onClick property of your submit button to a function, such as the following:

<input type="submit" value="Send Form" onClick="return submitForm();" />

Finally is your JavaScript function to actually change the form action and submit the form.

function submitForm() {
  // do anything here you need to determine which URL to post to
  // I am just making an example here
  var targetURL = '/some/url/to/post.php';

  // now we will change the form's action
  document.aformiam.action = targetURL;

  // finally, submit the form by returning true
  return true;
}

Note that in the last step where we return true, this submits the form because the input element’s type is submit and the function is triggered by the onClick event. If this were, for example, a button type input element, or an a tag or img then we would need to trigger the form to submit using something like the following:

document.aformiam.submit();

This solution will work to change the action and submit to a single URL. If you need to post to multiple URLs at once, you will have to make use of other methods such as XMLHttpRequest. If this is the case, post a comment indicating so and I’ll provide an example for that.