在 HTML 中提交表单后重定向到页面

Question

我对 HTML 编码还很陌生。经过几个小时在互联网上搜索一种方法后，我失败了，所以我来到了这里。我在这里设置了一个 CSRF 概念验证页面，我希望它重定向到另一个页面，该页面将执行 CSRF 已实现的有效负载。

<html>
  <body>
    <form action="https://website.com/action.php?" method="POST">
      <input type="hidden" name="fullname" value="john" />
      <input type="hidden" name="address" value="street 2, 32 ave" />
      <input type="submit" value="Submit request" />
    </form>
  </body>
</html>

因此，使用提交此表单后，它所做的只是重定向到此页面

但我希望它重定向到另一个 URL 并提交该表单。

Answer 1

对于有同样问题的其他人，我自己解决了。

    <html>
      <body>
        <form target="_blank" action="https://website.com/action.php" method="POST">
          <input type="hidden" name="fullname" value="Sam" />
          <input type="hidden" name="city" value="Dubai&#32;" />
          <input onclick="window.location.href = 'https://website.com/my-account';" type="submit" value="Submit request" />
        </form>
      </body>
    </html>

我所要做的就是将 target="_blank" 属性添加到表单上的内联中，以在新页面中打开响应，并使用提交按钮上的 onclick 重定向其他页面。

Answer 2

您需要使用 jQuery AJAX 或 XMLHttpRequest() 将数据发布到服务器。数据发布后，您可以通过

window.location.href

将您的页面重定向到另一个页面。

示例：

 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      window.location.href = 'https://website.com/my-account';
    }
  };
  xhttp.open("POST", "demo_post.asp", true);
  xhttp.send();

Answer 3

如果您以编程方式生成表单，您可以在表单末尾添加此脚本

<script type="text/javascript">document.forms["FormId"].submit();</script>

Answer 4

您可以做的是验证值，例如：

如果fullanme输入的值大于某个值长度，并且如果address输入的值大于某个值长度则重定向到新页面，否则显示输入错误。

// We access to the inputs by their id's
let fullname = document.getElementById("fullname");
let address = document.getElementById("address");

// Error messages
let errorElement = document.getElementById("name_error");
let errorElementAddress = document.getElementById("address_error");

// Form
let contactForm = document.getElementById("form");

// Event listener
contactForm.addEventListener("submit", function (e) {
  let messageName = [];
  let messageAddress = [];
  
    if (fullname.value === "" || fullname.value === null) {
    messageName.push("* This field is required");
  }

  if (address.value === "" || address.value === null) {
    messageAddress.push("* This field is required");
  }

  // Statement to shows the errors
  if (messageName.length || messageAddress.length > 0) {
    e.preventDefault();
    errorElement.innerText = messageName;
    errorElementAddress.innerText = messageAddress;
  }
  
   // if the values length is filled and it's greater than 2 then redirect to this page
    if (
    (fullname.value.length > 2,
    address.value.length > 2)
  ) {
    e.preventDefault();
    window.location.assign("https://www.google.com");
  }

});

.error {
  color: #000;
}

.input-container {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
}

<html>
  <body>
    <form id="form" method="POST">
    <div class="input-container">
    <label>Full name:</label>
      <input type="text" id="fullname" name="fullname">
      <div class="error" id="name_error"></div>
      </div>
      
      <div class="input-container">
      <label>Address:</label>
      <input type="text" id="address" name="address">
      <div class="error" id="address_error"></div>
      </div>
      <button type="submit" id="submit_button" value="Submit request" >Submit</button>
    </form>
  </body>
</html>

Answer 5

对我来说这个效果非常好。

=> 将目标表单设置为空白（在新选项卡中打开）+ 在 Javascript 中识别输入 ID + 重定向脚本。

    <html>
      <body>
        <form target="_blank" action="https://website.com/action.php" method="POST">
          <input type="hidden" name="fullname" value="Sam" />
          <input type="hidden" name="city" value="Dubai&#32;" />
          <input type="submit" value="Submit request" id="submitBtn"/>  

    <script>
      document.getElementById("submitBtn").addEventListener("click", myFunction);  
      function myFunction() {  
        window.location.href="http://programminghead.com";  
      }
    </script>

        </form>
      </body>
    </html>

我在这里找到它：https://programminghead.com/submit-button-redirect-to-another-page-in-html

Answer 6

与 @Hardik Sanghavi AJAX 类似的另一个解决方案是使用 fetch() 并利用 FormData。更现代一点并精简代码。

form.addEventListener('submit', (event) => {
    event.preventDefault()

    fetch(form.action, {
        method: 'post',
        body: new FormData(form),
    }).then((res) => {
        if (!res.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`)
        }
            window.location.href = {Redirect URL}
        })
    }
})

关于带有 Fetch 的 FormData 的 MDN 文档

在 HTML 中提交表单后重定向到页面

问题描述投票：0回答：6

6个回答

最新问题

在 HTML 中提交表单后重定向到页面

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6