当用户成功提交表单时，如何重定向到另一个页面？

Question

我尝试了onsubmit="return redirect()" 和onsubmit="redirect()"，它调用了一个函数，该函数在<script> 区域下面的HTML 代码中具有window.location.href = 'successfulSignUp.html';。运气不好。

也尝试过相同的方法，但在 <input type="submit"> 字段中，但也没有运气。

我在表单中确实有一个action="mailto:signup@mydomain.com?Subject=User Sign Up"，因为我希望用户填写表单，然后打开一个新的“邮件”选项卡让用户发送它。

我不是在寻找实现数据库，也不是在它发送它的 php 文件。

从各个方面来说，当用户在填写了输入条件后点击它时，网页绝对会忽略我创建的 redirect() 函数。

这是我的代码：

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

我的 JavaScript 代码是：

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

Answer 1

解决了！（有点）

我找到了方法，但不完全是正确的方法。我的意思是人们在点击按钮时将被重定向到成功的注册页面，但如果他们填写表格，他们也将被重定向到成功的注册页面和到默认邮件应用程序与里面的所有数据一起发送。

这是最终的代码（它可以解决它）：

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

Answer 2

只需使用 JavaScript 功能发送电子邮件：

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

和重定向功能：

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
}

为了发送电子邮件，我使用这个：How to send an email from JavaScript，但如果你愿意，你可以使用一些库。

Answer 3

您不能让浏览器同时导航到两个 URL（没有打开弹出窗口/框架）。

您可以导航到mailto:...或到successfulSignup.html。

现在，你说：

我不是在寻找实现数据库，也不是在它发送它的 php 文件。

但是，您应该考虑使用服务器端解决方案（无论是用 PHP 还是其他一些编程语言编写的）。任何服务器端方法都可以设置为通过电子邮件发送数据。

这将解决两个问题：

1. 您可以从服务器重定向到任何您喜欢的位置（或直接返回确认 HTML）。
2. 它避免使用mailto:，即highly unreliable（我永远不会在受控的 Intranet 之外使用它，即使在大多数情况下，服务器端的方法也会更容易）。

Answer 4

传递事件以在 onsubmit 上重定向：

<form
  id="signUpForm"
  action="mailto:signup@mydomain.com?Subject=User Sign Up"
  onsubmit="redirect(event)"
  method="post"
  enctype="text/plain"
>

然后在重定向功能上使用 event.preventDefault()

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