如何在用戶成功提交表單后重定向到另一個頁面？

Question

我嘗試了onsubmit="return redirect()"和onsubmit="redirect()" ，它調用了一個 function ，它有一個window.location.href = 'successfulSignUp.html'; 在<script>區域下面的 HTML 代碼中。 沒有運氣。

也嘗試過相同但在<input type="submit">字段中但也沒有運氣。

我在表單中確實有一個action="mailto:signup@mydomain.com?Subject=User Sign Up"因為我希望用戶填寫表單然后打開一個新的郵件選項卡讓用戶發送它。

我不是在尋找實現數據庫，也不是在發送它的 php 文件。

在任何方面，該網頁都完全忽略了我在填寫輸入條件后用戶單擊它時創建的 redirect() function 。

這是我的代碼：

<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

您不能讓瀏覽器同時導航到兩個 URL（沒有打開彈出窗口 windows / 幀）。

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

現在，你說：

我不是在尋找實現數據庫，也不是在發送它的 php 文件。

但是，您應該考慮使用服務器端解決方案（用 PHP 或其他一些編程語言編寫）。 可以設置任何服務器端方法以通過 email 發送數據。

這將解決兩個問題：

1. 您可以從服務器重定向到任何您喜歡的位置（或者直接返回確認 HTML）。
2. 它避免使用非常不可靠的mailto:我永遠不會在受控的 Intranet 之外使用它，即使在大多數情況下，服務器端的方法也會更容易）。

Answer 2

只需在 JavaScript 功能中發送 email 即可：

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

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
}

為了發送 email 我使用這個： 如何從 JavaScript 發送 email ，但如果你願意，你可以使用一些庫。

Answer 3

解決了！ （有點）

我找到了方法，但不是完全正確的方法。 有了這個，我的意思是人們在點擊按鈕時將被重定向到成功的注冊頁面，但如果他們填寫表格，他們也將被重定向到成功的注冊頁面和默認郵件應用程序以發送所有數據里面。

這是最終的代碼（它可以解決它）：

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

在提交時傳遞事件以重定向：

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

然后在重定向 function 使用 event.preventDefault()

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