CODEWITHSUNDEEP
javascripthtmlforms
r0dr1
r0dr1

Reputation: 79

How do I redirect to another page when a user successfully submits a form?

I tried a onsubmit="return redirect()" and onsubmit="redirect()" where it calls a function that has a window.location.href = 'successfulSignUp.html'; inside the HTML code below in the <script> area. No luck with it.

Tried too the same but in the <input type="submit"> field but no luck either.

I do have an action="mailto:[email protected]?Subject=User Sign Up" inside the form because I want the user to fill the form and then open a new Mail tab to make the user send it.

I'm not looking for implementing a database, neither a php file where it sends it.

In every way, the webpage is absolutely ignoring the redirect() function I created whenever the user clicks it after the form being filled with the input criteria.

Here's my code:

<form id="signUpForm" action="mailto:[email protected]?Subject=User Sign Up" onsubmit="return redirect()" method="post" enctype="text/plain">
    <input type="text" id="name" name="Name" placeholder="Name *" required>
    <input type="text" id="surnames" name="Surnames" placeholder="Surnames *" required><br><br>
    <input type="email" id="emailForm" name="Email" placeholder="Email">
    <input type="tel" id="phoneNumber" name="Phone number" placeholder="Phone number *" required minlength="9"><br><br>
    <input type="text" id="username" name="Username" placeholder="Username *" required>
    <input type="password" id="password" name="Password" placeholder="Password*" required>
    <p id="requiredFields"><span style="color: red">|</span> Fields marked with a * are required.</p>
    <input id="registerNow" type="submit" value="Register"><br><br
</form>

An the JavaScript code I have is:

<script type="text/javascript">
function redirect(){
    window.location.href = 'successfulSignUp.html';
}
</script>

Upvotes: 0

Views: 2681

Answers (3)

r0dr1
r0dr1

Reputation: 79

SOLVED! (kinda)

I found out the way, but not exactly the right way. With this I mean people will be redirected to the successful sign up page whenever they click the button but if they fill the form, they will too be redirected to the successful sign up page AND to the default mail app to be sended with all the data inside.

Here's the final code (which it kind of solves it):

<form id="signUpForm" action="mailto:[email protected]" method="post" enctype="text/plain">
<input id="registerNow" type="submit" value="Register" onclick="redirectFun()";>

<script type="text/javascript">
function redirectFun(){
    setTimeout(function () { window.location = "successfulSignUp.html" }, 1);
};
</script>

Upvotes: 0

thie
thie

Reputation: 11

Just send email in JavaScript funciton:

<form id="signUpForm" onsubmit="redirect(event)">
    <input type="text" id="name" name="Name" placeholder="Name *" required>
    <input type="text" id="surnames" name="Surnames" placeholder="Surnames *" required><br><br>
    <input type="email" id="emailForm" name="Email" placeholder="Email">
    <input type="tel" id="phoneNumber" name="Phone number" placeholder="Phone number *" required
        minlength="9"><br><br>
    <input type="text" id="username" name="Username" placeholder="Username *" required>
    <input type="password" id="password" name="Password" placeholder="Contraseña *" required>
    <p id="requiredFields"><span style="color: red">|</span> Fields marked with a * are required.</p>
    <input id="registerNow" type="submit" value="Register"><br><br>
</form>

and redirect function:

function redirect(e) {
   e.preventDefault();
   window.open('mailto:[email protected]?subject=subject&body=body'); //example email
   window.location.replace('https://www.google.com'); // example url
}

For sending email I use this: How to send an email from JavaScript, but you can use some library if you want.

Upvotes: 0

Quentin
Quentin

Reputation: 943214

You can't cause the browser to navigate to two URLs at once (short of opening popup windows / frames).

You can navigate to mailto:... or to successfulSignup.html.

Now, you said:

I'm not looking for implementing a database, neither a php file where it sends it.

However, you should look to using a server-side solution (be it written in PHP or some other programming language). Any server-side approach can be set up to send the data via email.

This will solve two problems:

  1. You can redirect wherever you like from the server (or just return the confirmation HTML directly).
  2. It avoids using mailto: which is highly unreliable (I would never use it outside of a controlled Intranet, and even there a server side approach would be easier most of the time).

Upvotes: 1

Related Questions