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:signup@mydomain.com?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:signup@mydomain.com?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>
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:
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).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:test@example.com?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.
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:signup@mydomain.com" 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>