以 HTML 格式提交表单后重定向到页面答案

【问题标题】：Redirecting to a page after submitting form in HTML以 HTML 格式提交表单后重定向到页面
【发布时间】：2017-10-28 12:13:03
【问题描述】：

我对 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 并提交该表单。

【问题讨论】：

在您的操作中，我不确定您是否需要 ?。为什么不直接去 action.php 做你想做的事，然后从那里重定向到你想要的 url
我愿意，但该网站不归我所有，正如我所说，这是我向公司报告的 CSRF（跨站点请求伪造）概念证明。

标签： html forms post

【解决方案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 重定向另一个页面。

【讨论】：

我很好奇 _blank 中的新页面在代码中的哪个位置关闭，然后仅将第一页重定向到我想要的任何页面？
@Ons Ali 我确实和你有同样的问题。并试图用你的回答解决我的问题。当我单击按钮时，页面正在重定向。但是表单中的数据没有保存在 API 中。你能看到我的吗，这是链接stackoverflow.com/questions/62019718/…
是的，这个答案不正确。表单不向 API 提交数据。

【解决方案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();

【讨论】：

【解决方案3】：

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

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

【讨论】：