0

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>
r0dr1
  • 79
  • 8
  • What does "no luck" mean? You've to describe the behaviour you're getting. "No luck" is too vague. – xyres Dec 18 '21 at 10:21
  • Oops, sorry. With "no luck" I meant no errors on the JavaScript console and no redirections to the previously indicated HTML page. It's not doing anything besides filling the form correctly. – r0dr1 Dec 18 '21 at 10:24
  • I think you need to return also from the redirect() function. Just try to put a "return true" after the window.location.href. Put also the onsubmit attribute before the action attribute in the form tag. – Fabrizio Dec 18 '21 at 10:28

3 Answers3

1

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).
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

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.

thie
  • 1
  • 6
  • Ok, I'm now realizing the email is not filled up by the data that the user entered in the form... Is there a workaround for this? Could you do it without a server side environment? – r0dr1 Dec 18 '21 at 17:15
  • You can get form data and create body in JavaScript. – thie Dec 19 '21 at 12:49
  • Nevermind. Solved it. Waiting 20 hours to mark my answer as solution because of some Stackoverflow thing I don't understand. – r0dr1 Dec 19 '21 at 13:13
0

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>
r0dr1
  • 79
  • 8