CODEWITHSUNDEEP
htmlformspost
Ons Ali
Ons Ali

Reputation: 821

Redirecting to a page after submitting form in HTML

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

which looks like this,

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

Upvotes: 38

Views: 250191

Answers (6)

Cassady lillstrom
Cassady lillstrom

Reputation: 11

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

Upvotes: 0

Gabriel Fagundes
Gabriel Fagundes

Reputation: 1

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

Upvotes: 0

hamza felix
hamza felix

Reputation: 39

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>

Upvotes: 1

alvarocastle
alvarocastle

Reputation: 9

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>

Upvotes: 0

Hardik Sanghavi
Hardik Sanghavi

Reputation: 290

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

Upvotes: 11

Ons Ali
Ons Ali

Reputation: 821

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.

Upvotes: 33

Related Questions