Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use Anchor tag as submit button ?

  • Difficulty Level : Basic
  • Last Updated : 07 Apr, 2021

The <a> (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages. It’s either used to provide an absolute reference or a relative reference as its “href” value.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<a href = "link"> Link Name </a>

The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag will not be a hyperlink. You can use href=”#top” or href=”#” to link to the top of the current page.

To use the anchor tag as submit button, we need the help of JavaScript. To submit the form, we use JavaScript  .submit() function. The function submits the form.



Syntax:

document.getElementById("GFG").submit();

Note: “GFG” is the ‘id’ mentioned in the form element.

Example 1:

index.html




<!DOCTYPE html>
<html>
    <body>
        <h2>Use Anchor tag as Submit button</h2>
        <form id="GFG" action="submit.php" method="POST">
            Username
            <br />
            <input type="text" name="UserName" id="UserName" />
            <br />
            Password
            <br />
            <input type="password" name="Password" id="Password" />
            <br />
            <a href="#" onclick="myFunction()">
              Click here to submit form
            </a>
        </form>
  
        <script>
            function myFunction() {
                document.getElementById("GFG").submit();
            }
        </script>
    </body>
</html>


Output:

Note: We can also call the .submit() function, by writing JavaScript as

<a href="javascript:$('GFG').submit();" >Click here to submit form</a>

Example 2:

HTML Code:

index.html




<!DOCTYPE html>
<html>
    <body>
        <h1>Use Anchor tag as Submit button</h1>
        <form id="GFG" action="submit.php" method="POST">
            Username
            <br />
            <input type="text" name="UserName" id="UserName" />
            <br />
            Password
            <br />
            <input type="password" name="Password" id="Password" />
            <br />
  
            <a href="javascript:$('GFG').submit();">
              Click here to submit form
            </a>
        </form>
    </body>
</html>

Output:

anchor tag

PHP code: The following code is the content for “submit.php” used in the above HTML code. We have to add some PHP code to send data to the database (use local server XAMPP to test the below code).

submit.php




<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "student";
  
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
$name= $_POST['UserName'];
$pwd= $_POST['Password'];
  
$sql = "INSERT INTO student (firstname, password) VALUES ('$name','$pwd')";
  
if (mysqli_query($conn, $sql)) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
  
mysqli_close($conn);
?>

Output:

  • Now, add some data in the form. Suppose Username is ‘Akshit’ and password is ‘123’

  • Now click on the hyperlink  “Click here to submit form“.

  • Let us have a look at the ‘student’ database.

    Data table




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!