Logo - ProgrammingHead

How to Link Submit Button to Another Page in HTML [Updated]

To Link Submit button to Another Page we can use forms Tags <form> in HTML, Using HTML's Form tag we can Link submit Button to a different page.
Where we have to Declare/Write the Submit button Between HTML Form Tags <form>...</form> and we have to assign our File Path (myPage.html or PHP) inside HTML form's action attribute.
Later when the user clicks the Form Button, It will redirect that user to another page.

How to Link Submit Button to Another Page in HTML [Updated]

index.html

<html>
  <head>
    <title>HTML Link Submit Button</title>
  </head>    
  <body>    
    <form method="POST" action="myPage.php">
      <input type="submit"/>
    </form>    
  </body>    
</html>

Results

Method 2: Link Submit button using Anchor Tags in HTML

Linking Submit buttons using Anchor Tag <a> is Easy and Reliable method in HTML. We need to Write/Declare Submit button between Anchor tag's Starting and Closing tags <a>...</a>.
By using Anchor tag's href attribute we can give a Path where we want to Link our Submit Button.

index.html

<a href="page2.html">
    <input type="submit"/>
</a>

Results

Method 3: Link Submit button to Another page using JavaScript

If you don't want to use Form tags or Ancher tags to Link Submit button to a different page in HTML then we can use JavaScript for such cases. In JavaScript, we design a Function which will manage all the Data like Page Path where we want to Connect our Submit Button.
The function name, By using that Function name we can call that function within HTML onClick attribute. Which we call the assigned function and we can redirect our users from one page to another by clicking on the Submit Button.

Related Topics: How to Link Submit Button to Another Page in HTML [Updated]

Click on Titles below to reveal the Data

How to make a button link to another page in HTML

To link a button to another page in HTML, we can use 2 Different methods.

index.html [using Anchor tags]

<html>    
  <body> 
     
    <a href="http://programminghead.com">
      <input type="submit"/>
    </a>
    
  </body>    
</html>

Results

index.html [using JS]

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

Results

How to link submit button to another page in php

The Process of linking Submit button to another page in PHP is very Similar to HTML.
Because we can use HTML Elements inside PHP Document and Submit buttons are usually created using HTML Tags.
So using HTML Anchor tags or HTML Form Tags we can link submit button to another page in PHP.
Redirect using HTML Anchor Tags.

index.php [using Anchor Tags]

<?php
    echo '<a href="http://programminghead.com">
      <input type="submit"/>
    </a>';
?>

Results

index.php [using HTML Forms]

<?php
    echo '<form action="nextpage.php" method="POST">
      <input type="submit"/>
    </form>';
?>

Results

How to handle multiple submit buttons in HTML forms

In HTML Forms all the Buttons inside Form Tags will work like a Submit button. Which will redirect users to the same page (Which we have declared inside HTML form's action attribute) If you want to Handle multiple Submit buttons then you can use Multiple Form tags with multiple Page Path. or you can use Anchor tags instead of Form tags to redirect Users using multiple submit buttons in HTML link submit button to another page using JavaScript.

index.html

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

Results

JavaScript windows.location allows us to redirect our users to another page on a single click. We just need to add a Click event inside our JavaScript. Which will run when user Invoke the Click Event by clicking the Submit button.

A href submit form or submit form using anchor tag

HTML <a href=""> or Anchor tag can not submit form data [by using JS then can but that's so tricky, you have to get the input Feild data using JS and arrange that Data in Anchor tag's href attribute so PHP
GET method can get the data from the URL that we genrated using JS].
But if you don't want to submit form Data and just want to redirect your Users using Anchor tags. Then use This method.

index.html

<a href="anotherPageLink.php">
  <button>Submit Button</button>
</a>

Results

to submit HTML Form data to another Page we have HTML Form tag's Action Attribute.

index.html

<form action="anotherPageLink.php">
  <input type="text">
  <input type="submit">
</form>