Question

我正在尝试在表单提交后重定向，但即使代码看起来是正确的，它也不会重定向。可能是什么问题？

以下是片段。我尝试运行此代码时，我的控制台中没有错误。有什么帮助吗？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CHECK BOX</title>
    <link rel="stylesheet" href="confirmation.css">
</head>
<body>
<script>
    function confirm(){
        if(document.getElementById('agree').checked) {
            alert('Registration Successful');
            setTimeout(function() {              //This function set the time for redirecting to 2 seconds after user click ok
                window.location("dashboard.html");
                //            window.location.href = "dashboard.html";
            }, 3000);
            return true;
        } else {
            alert('Please read and agree to the Terms and Conditions and Privacy Policy');
            return false;
        }

    }

</script>


<form action="#" method="post" onsubmit="confirm()">
    <label>Username</label><br />
    <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Username"  maxlength="30" required="" />
    <br />
    <label>Phone Number</label><br />
    <input type="number" class="form-control" name="phone" id="phoneNumber"  placeholder="Enter your Phone Number"  maxlength="14" required="" />
    <br />
    <input type="checkbox" name="checkbox" value="check" id="agree" /> I have read and agree to the Terms and Conditionsand Privacy Policy
    <br />
    <input type="submit" name="submit" value="submit" />

</form>


</body>
</html>

＆＃13;

Answer 1

这不是提交表单后重定向的正确方法。目前，即使您的重定向确实有效，表单数据也不会在任何地方传输。 form元素有一个action属性，用于指示应重定向的位置并将表单数据发送到。

您的代码似乎只提供了一些表单验证，其处理方式与您尝试的不同。

这是应该如何设置的。（请务必阅读所有HTML和JavaScript评论）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CHECK BOX</title>
    <link rel="stylesheet" href="confirmation.css">
</head>
<body>
  <!-- The action attribute is where you set the location of the redirect. -->
  <!-- Don't use HTML event attributes to set up events. Do it in JavaScript. -->
  <form action="dashboard.html" method="post">
    <!-- A label should have a for attribute that points to the id of the element it is for. -->
    <label for="username">Username</label><br>
    <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Username"  maxlength="30" required="" />
    <br>
    <label for="phoneNumber">Phone Number</label><br />
    <input type="number" class="form-control" name="phone" id="phoneNumber"  placeholder="Enter your Phone Number"  maxlength="14" required="" />
    <br>
    <input type="checkbox" name="checkbox" value="check" id="agree"> I have read and agree to the Terms and Conditionsand Privacy Policy
    <br>
    <!-- Don't name any form elements "submit" as it will overwrite the form.submit() function -->
    <input type="submit" name="btnSubmit" value="submit">

  </form>
  
  <!-- It's generally a best-practice to place script elements just before
       the closing body tag so that the page doesn't get blocked while loading
       and to ensure that the DOM will have been parsed by the time the script runs. -->
  <script>
    let frm = document.querySelector("form");
    frm.addEventListener("submit", confirm);
  
    // Event handling functions will always be passed a reference to the event
    // they are handling. You should set up a function argument to capture that reference.
    // Once you have captured the reference, you can cancel the event if needed.
    function confirm(evt){
        
        // Normally, we only want to cancel the form's submit event if validation fails
        // but, since you want a delay, we need to do it.
        evt.preventDefault();
        
        if(document.getElementById('agree').checked) {
            alert('Registration Successful');
            setTimeout(function() {
              frm.submit(); // Submit the form, which will allow it to redirect to the action
            }, 3000);
        } else {
            alert('Please read and agree to the Terms and Conditions and Privacy Policy');
        }
    }
  </script>  
</body>
</html>

如何在javascript中提交表单后重定向页面也有警报

1 个答案: