How to submit a form without using submit button using PHP ?

Last Updated : 03 Jul, 2022

In this article, we will see how to submit the form without clicking the submit button, along with understanding the different ways to accomplish this task through implementation.

The form can be submitted without using submit button by implementing a specific event attribute or by clicking the link. This task can be done by using the OnClick event attribute or by using the form.submit() method in Javascript.

Approach: The form.submit() method in JavaScript can be utilized to submit a given form. It is similar to activating the form’s submit <button>, but not identical. We will add an “onclick” eventlistener to the element on which after clicking that element will lead to the submission of the form. Using the getElementById method the required elements can be targeted and once the element is clicked, the “submit” function is triggered and the form is submitted. The HTML elements used to submit the form can be heading tag, paragraph tag, image tag, and many more.HTMLFormElement.requestSubmit() is also an alternative method to submit the form which requests to submit the form using a specific submit button.

Example 1: This example illustrates how to submit the form without a submit button and store the data in a database using phpMyAdmin.

Note: <input> with attribute type=”submit” will not be submitted with the form while using this method.

index.php

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Form Submittion without using submit Button</title> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Form Submittion without using submit Button 
    </h3> 
    <form id="form" 
          action="form.php" 
          method="post"> 
        <label> 
            Subscribe the GBlog to get daily update!!! 
        </label> 
        <br><br> 
        <input type="text" 
               name="text" 
               placeholder="Enter Mail ID" /> 
        <br/> 
        <h5 onclick="submit()"> 
            Click Me to  Subscribe! 
        </h5>  
    </form> 
    <script> 
        function submit() { 
            let form = document.getElementById("form"); 
            form.submit(); 
            alert("Data stored in database!"); 
        } 
    </script> 
</body> 
</html>

form.php: This code will help us to connect PHP with the database and store data submitted by the user.

form.php

<?php 
  $conn = mysqli_connect('localhost','root','','info'); 
  if($conn){ 
      echo "Success"; 
  } 
  else{ 
      echo "Failure"; 
  } 
  $text = $_POST['text']; 
  $sql = "INSERT INTO info(info) VALUES ('$text')"; 
  mysqli_query($conn,$sql); 
?>

Explanation: Here, we need to add the data filled in the form to the database without using submit button. For this, we need to trigger submit() function using HTML element. Using the getElementById() method, we have targeted the required form to be submitted. As soon as HTML is clicked submit() is executed and data is stored in the database. In the above example, we have used the <h5> tag to trigger submit function.

Output:

The text typed will be stored in the database after clicking the HTML element as shown in the gif.

Example 2: This example describes how to use an image to submit the form. Here, we have used <img> tag to trigger submit() function. Here, we will use the form.php file to store data submitted by the user.

index.php

<html> 
  <head> 
      <title>Submit a form using image</title> 
  </head> 
  <body> 
    <form id="form" action="form.php" method="post"> 
        <input type='text' name='text' /> 
        <a href="javascript: submit()"> 
           <img src="gfg.jpg" width="35" height="30" /> 
        </a> 
    </form> 
    <script> 
    function submit(){ 
        form.submit(); 
        alert("Data stored in database!"); 
    } 
    </script> 
  </body> 
</html>

Explanation: In above both the examples, as soon as the HTML element is clicked, ‘onclick‘ event is triggered by targeting element using getElementById() method.Then form.submit() function is executed to submit the form.

Output: