How to make a Submit Button Link/Redirect to Another page?

Hello coders, In this blog, you will learn about making a Submit Button Link/redirect to Another Webpage. We will perform this code in two ways:- The first way is using simple HTML and another way is using JavaScript. So let’s begin the process:-

submit button link/redirect

Submit button link with HTML:-

In this code, we will use an anchor tag and input type submit button under the body section. So the steps for this code is:-

 

  1.  Type all the basic HTML tags in your code editor till the body tag and press enter after that.
  2.  In the body tag, Type <a href=”URL”> and then press enter.
  3.  After this we will make a button in the anchor tag for this we will use < input type= ”button”> and press enter.
  4. We will now close the anchor tag with the help of </a> tag. 
  5. All the work of body and HTML is completed for this code so we will close both of these tags.
  6. Your code will look like this:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Submit button</title>
    </head>
    <body>
        <a href=”https://www.codeblockx.com/”>
            <input type=”button”>
        </a>
    </body>
</html>

Submit button link in JavaScript:-

If you don’t want to use an anchor tag, form to link to the submit button. In these cases, we will use Javascript. We will use a button tag and under this, we will use onclick property in which we will fill the value of window.location.href=”URL” and then close this tag. This will redirect the user to the linked website or document. The code for this is:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Submit button</title>
    </head>
    <body>
        <button onclick = ” window.location.href =’ https://codeblockx.com’ ; “>
            Click here
        </button>
    </body>
</html>

Whenever users will click on the button. They will redirect to the linked website. In this above code, the users will be redirected to our website codeblockx.com. You can use the above code and make changes to it. 

Hope this blog was helpful to you. If you want to learn more about Hyperlinks in HTML. We have a detailed blog post written on it and will be definitely helpful to you.

 

Thank you for visiting our blog. If you have any doubts in the Coding question then let us know in the comments section. We will answer it as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *