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

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="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>

An the JavaScript code I have is:

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

CodePudding user response：

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.

CodePudding user response：

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:

You can redirect wherever you like from the server (or just return the confirmation HTML directly).
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).

CodePudding user response：

pass event to redirect on onsubmit :

<form
  id="signUpForm"
  action="mailto:[email protected]?Subject=User Sign Up"
  onsubmit="redirect(event)"
  method="post"
  enctype="text/plain"
>

then on redirect function use event.preventDefault()

function redirect (event) {
event.preventDefault()
window.location.href = 'successfulSignUp.html'
}