Logo - ProgrammingHead

How to Make Submit button redirect to another page in HTML

Want to make Submit button redirect to another page in HTML, If yes? then this tutorial teaches you just that also covers related HTML Button Linking Methods.
Let's get started with the first and simplest method.

How to Make Submit button redirect to another page in HTML

Method 1: Link submit button using HTML FORMs

HTML Forms are used to send form data from open page to another page. Due to its redirecting nature, we can use HTML Forms to Link Submit button to another page.
Just use HTML <form> tags, include your Submit Button and provide another page path inside HTML Form tag's action=" " attribute and you have successfully Linked Submit button using HTML Form tag.

page1.html

<form action="page2.html">
  <input type="submit"/>
</form>

Results

Step 2: Link submit button using Anchor tags

Anchor tag are most common and the default way to link buttons in HTML.
To Link a Normal HTML <button> or HTML <input type="submit"/> button you can use HTML <a> Anchor Tag and you have to provide your page path (where you want to link the button) inside HTML Anchor tag's href=" " attribute.

page1.html

<a href="page2.html">
 Click Me
</form>

Results

Method 3: Link submit button using OnClick Event

HTML onClick Attribute let's you execute JavaScript on Button click.
Which can be used to run window.location.replace('newPath') JavaScript Statement which let's you link or redirect from one page to another.

Important: Make sure to use single quoutes 'page2.html' to wrap your file path, otherwise it will conflict with onclick attributes double quoutes.

page1.html

<input type="submit" onclick="window.location.replace('page2.html')"/>

Results

Related Topics: How to Make Submit button redirect to another page in HTML

Click on Titles below to reveal the Data

HTML onclick redirect to url

To redirect to an URL using HTML onClick attribute, we can use JavaScript document.location.replace() statement.
Where replace() method will replace the current location with the given URL.

index.html

<button onClick="window.location.replace('https://programminghead.com')"/>
  Goto URL
</button>

how to make a button take you to another page html

To make a button take you to another page in HTML, we can use HTML <a> tag. Just wrap your button between Anchor <a>...</a> tags, provide the anothor page Path in Anchor tag's href=" " attribute and you are done.

index.html

<a href="anotherpage.html">
  <button>
    Click Me
  </button>
</a>

how to redirect to another page in html using javascript

To redirect to another page in HTML using JavaScript, we can use JavaScript's addEventListener() method.
Select the HTML button by the ID using JavaScript's getElementById() method. JavaScript's addEventListener() method can listen for Events like Clicks and will redirect users to another page using JavaScript's Location replace() method.

index.html

<button id="myButton">
	click me
</button>

my.js

let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(){
  window.location.href = "page2.html"
})

function to send user to url javascript

To use a JavaScript Function to send user to a perticular URL, we have to declare a function, use JavaScript's Location replace() method to redirect and call the JavaScript function using HTML onClick=" " attribute.

index.html

<button onClick="gotURL()">
	click me
</button>

my.js

function gotURL(){
	window.location.href = "page2.html"
}