How to intercept form submission and change action with plain javascript

Question

Is it possible to intercept a form submission and change the action to a different URL before letting the submission proceed? All kinds of form submission should be intercepted (user clicking on button, javascript call, whatever).

Edit: all solutions using the onsubmit event aren't good because, as stated here, the event isn't triggered when calling submit():

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications.

So for example

document.forms["myform"].submit()

won't trigger the event.

The only method that I know of would not intercept a javascript form-submission call (but would catch the user-initiated submission methods). — Katana314
– Katana314, Commented Sep 21, 2015 at 17:21
Before helping someone with script injection.. what would you need this for? — DrunkWolf
– DrunkWolf, Commented Sep 21, 2015 at 17:26
@DrunkWolf, you do realize this is a public site, so even if I gave you an "innocent" explanation, there might be a million other users with malicious intentions? Besides, I read somewhere that "obscurity" is not "security" i.e. it's not by hiding knowledge that the world becomes a safer place. — xtian
– xtian, Commented Sep 22, 2015 at 10:04
@xtian Yes i do, i just honestly found it difficult to find a use case for this that wasn't at least a bit shady. So the question was more out of interest then anything else. That said, there's a difference between hiding knowledge and going out of your way to provide it. — DrunkWolf
– DrunkWolf, Commented Sep 22, 2015 at 10:08
I'm writing a web proxy and I want all form submissions to go to my proxy instead of the original server. — xtian
– xtian, Commented Sep 22, 2015 at 10:14

xtian · Accepted Answer · 2015-09-23 15:56:20Z

2

For handling user submission via the submit button, I have to intercept the onsubmit event as explained in other answers. I copy one here from psylogic:

<form onsubmit="changeAction(this);">
    ...
</form>

<script type="text/javascript">
    function changeAction(form) {
        form.action = "example.com";
    }
</script>

For handling javascript submission via the submit() method, I can override that method in the prototype, one way of doing it being the following:

HTMLFormElement.prototype.original = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function() {
    this.action = "example.com";
    this.original(arguments);
}

answered Sep 23, 2015 at 15:56

xtian

3,2274 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adrield · Accepted Answer · 2015-09-21 17:37:19Z

1

Depending on the URL you use, you may run into a cross-origin issue (read more: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy and https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). It's a security measure that prevents a page on a certain domain to make requests to another domain. The way to prevent this is to set CORs policy on the server side, if you have access to it.

It's possible to use JSOP for GET requests, but not for POST or UPDATE/PUT, which is the case when submitting a form.

answered Sep 21, 2015 at 17:37

adrield

6256 silver badges19 bronze badges

Comments

Rayon · Accepted Answer · 2015-09-21 17:28:16Z

0

Try this:

function onSubmitAction(elem) {
  var test = document.getElementById('test');
  if (test.value === 'aaa') {
    elem.setAttribute('action', 'bc.php');
  }
}

<form action="ac.php" onsubmit="onSubmitAction(this)">
  <input type="text" id="test">
  <input type="submit">
</form>

answered Sep 21, 2015 at 17:28

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

2 Comments

xtian Over a year ago

onsubmit is not triggered by document.forms["myform"].submit()

Rayon Over a year ago

myform has to be the name of the form

Collectives™ on Stack Overflow

How to intercept form submission and change action with plain javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related