JavaScript function is not running after form submission

Question

I was trying to submit the form data to https://wallpapersforandroid.com/wallpaper-4/" in new tab and redirect the parent page to "https://www.youtube.com" after submission. I do success to open the action page in new tab but the parent page is not redirecting The code I used:

<form action="https://wallpapersforandroid.com/wallpaper-4/" method="post" target="_blank">
Type Password From Below Image: <input name="pass" type="text" />
<input id="myForm" type="submit" /><br />
<script>
  document.getElementById("myForm").onsubmit = function() {
    window.location.href = "https://www.youtube.com";    
  };
</script>

You're trying to send the user to two different places. One is the form's action, the other is YouTube. Which one do you want to send the user to? If the latter then you'll need to submit the form via AJAX instead of directly and then perform your redirect after that operation completes. — David
– David, Commented May 29, 2020 at 14:53
@Doc-Han: That would fail the same way and for the same reason. — David
– David, Commented May 29, 2020 at 14:55

T.J. Crowder · Accepted Answer · 2020-05-29 14:57:51Z

1

If you submit the form, the current page is torn down and replaced with the result from submitting the form. If you set a new location, the current page is torn down and replaced with the page from that location. You can't do both at once; one of them wins and the other will lose.

You can submit your form via ajax and then do the redirect:

document.getElemntById("myForm").addEventListener("submit", function(e) {
    // Prevent the default form submission
    e.preventDefault();

    // Get the form data
    const data = new FormData(this);

    // Do the ajax
    fetch(this.action, {
        method: this.method,
        body: data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        window.location.href = "https://www.youtube.com";
    })
    .catch(error => {
        // ...handle/report error...
    });
});

answered May 29, 2020 at 14:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Ashish Sah Over a year ago

can't i do this via html and java script only. I don't know anything about AJAX.

T.J. Crowder Over a year ago

@AshishSah - The only other way would be for the page returned by the form submission to do the redirect, instead of this page. But note that there's nothing special about the above, it's all stuff built into all modern browsers (except that fetch isn't on IE; you can polyfill it, though, or use XMLHttpRequest instead). And your server part is unchanged.

Collectives™ on Stack Overflow

JavaScript function is not running after form submission

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related