Redirecting to a page after submitting form in HTML

Asked 27/5, 2017 at 20:18 Answered 12/12, 2023 at 17:33

I'm fairly new to coding in HTML. After hours of searching the internet for a way to do this, I failed and so I'm here. I was setting up a CSRF Proof of concept page here, I want it to redirect to another page which will execute the payload that the CSRF had implemented.

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

So after this form is submitted using, all it does is redirect to this page

But instead of that, I want it to redirect to another URL as well as submit that form.

Ampereturn answered 27/5, 2017 at 20:18 Comment(2)

in your action I'm not sure you need the ?. Why not just go to action.php do what you want there and then from there redirect to the url you want – Ostend 27/5, 2017 at 20:25

I would, but that website is not owned by me, as I said this is a CSRF (Cross-site request forgery) proof of concept that I am reporting to the company. – Ampereturn 27/5, 2017 at 20:32

For anyone else having the same problem, I figured it out myself.

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

All I had to do was add the target="_blank" attribute to inline on form to open the response in a new page and redirect the other page using onclick on the submit button.

Ampereturn answered 28/5, 2017 at 10:57 Comment(5)

I'm curious where in the code does the new page in _blank close before leaving only the first page redirected to whatever I want? – Bangweulu 18/3, 2020 at 10:53

@Ons Ali I do have the same problem with you. And tried to solve my problem with your answer. The page is redirecting when I click the button. But the data from the form didn't saved in the API. Can you see mine, this is the link #62020218 – Gq 27/5, 2020 at 19:45

Yup, this answer is incorrect. The form doesn't submit the data to the API. – Underplay 10/4, 2021 at 9:54

this prevents the form from actually submitting – Apocynthion 27/1, 2023 at 14:8

Not sure why this was upvoted so many times when it doesn't work! – Prismoid 25/4, 2023 at 5:48

You need to use the jQuery AJAX or XMLHttpRequest() for post the data to the server. After data posting you can redirect your page to another page by window.location.href.

Example:

 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();

Sheerlegs answered 23/1, 2020 at 9:4 Comment(0)

in case you are generating the form programmatically you can add this script at the end of the form

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

Scriptwriter answered 29/9, 2022 at 18:10 Comment(0)

What you could do is, a validation of the values, for example:

if the value of the input of fullanme is greater than some value length and if the value of the input of address is greater than some value length then redirect to a new page, otherwise shows an error for the input.

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

Deloris answered 5/10, 2020 at 17:53 Comment(0)

For me this one worked pretty well.

=> form target to blank (opens in a new tab) + input id to be recognized in Javascript + script that redirects.

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

I found it here: https://programminghead.com/submit-button-redirect-to-another-page-in-html

Sorcha answered 19/10, 2022 at 4:51 Comment(0)

Another Solution similar to @Hardik Sanghavi AJAX is to use fetch() and leveraging FormData. A bit more modern and slims the code.

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)"
    })
})

MDN Docs on FormData with Fetch

Calandra answered 12/12, 2023 at 17:33 Comment(0)

Recommended topics

Hot tags