How to Link Submit Button to Another Page in HTML
If you are querying about, How to Link Submit Button to Another Page in HTML. Then you have got the Right Tutorial.
Because In this Tutorial, we are performing some methods to Link Submit button with another page.
We can use HTML Anchor, Form or JavaScript inside PHP to Link One page with Another Page.
Link Submit button to Another page using forms Tags in HTML
In HTML’s Form tag we can Link submit Button to a different page using HTML Form’s Action Attribute.
Where we have to Declare/Write the Submit button Between HTML Form Tags and we have to assign our File Path inside HTML form’s action attribute.
Later when the user clicks the Form Button, It will redirect that user to another page.
index.html
<html>
<body>
<form method="POST" action="myPage.php">
<input type="submit"/>
</form>
</body>
</html>Link Submit button using Anchor Tags in HTML
Linking Submit buttons using Anchor Tag is Easy and Reliable method in HTML. We need to Write/Declare Submit button between Anchor tag’s Starting and Closing tags.
By using Anchor tag’s href attribute we can give a Path where we want to Link our Submit Button.
index.html
<html>
<body>
<a href="http://programminghead.com">
<input type="submit"/>
</a>
</body>
</html>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Link Submit button to Another page using JavaScript
If you don’t need to use Form tag 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.
index.html
<html>
<body>
<input type="submit" onClick="myFunction()"/>
<script>
function myFunction() {
window.location.href="http://programminghead.com";
}
</script>
</body>
</html>
FAQs about: How to Link Submit Button in HTML
Submit button redirect to another page HTML
To redirect users to another page using Submit button we can use HTML’s Ancher tag or Form tags for that.
In Anchor tags and Form Tags, we need to Write/Declare our Submit button between Anchor tags or Form Tags.
Which will make our Submit button Clickable. And by using Anchor and Form tag’s href attribute we can Specify the Path where we want our users to redirect after clicking the Submit Button.
index.html [Redirect using HTML Form Tags]
<form action="nextpage.php" method="POST">
<input type="submit"/>
</form>index.html [Redirect using HTML Anchor Tags]
<a href="http://programminghead.com">
<button>Click Me</button>
</a>how to make a button or a page link to another page in HTML using the button
Just write/Declare your HTML Button inside HTML Anchor tags . Anchor tags will make our HTML Buttons Clickable and after that, you can use Anchor tag’s href attribute to give the Path to your Button.
index.html
<a href="http://programminghead.com">
<button>Click Me</button>
</a>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
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>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 onclick
Yes you can Link / Open another page using HTML Anchor Tags / A Href Method. For that you have to provide your Another page’s Link inside Anchor tags href attribute. Which will open your Linked page on a Single Click.
index.html
<html>
<head>
<title>Link HTML Webpage</title>
</head>
<body>
<a href="myNextPage.html">
Click Me
</a>
</body>
</html>redirect to another page after form submit html
If you want to redirect to another page after form submit html, Then you have to provide/Sign the Other pages path inside HTML Form tag’s ACTION Attribute. Which will POST/Send your Form data to that Location and Open/Redirect your Users to That Given Web Page.
index.html
<html>
<head>
<title>Link HTML Webpage</title>
</head>
<body>
<form method="POST" action="anotherPage.php">
<input type="text"/>
<input type="submit"/>
</form>
</body>
</html>or you can use JQuery Ajax which can redirct you to another page after Form Data Submission.
On This Page
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
