How to submit a form without using submit button using PHP ?
Last Updated :
06 Aug, 2024
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:
Similar Reads
How to add Buttons without Submit the Form in Angular? In Angular, when adding buttons to a form, their default behavior on click is to submit the form itself. However, there are certain situations in which it is necessary to create buttons for forms that provide some sort of functionality or trigger custom logic without triggering the default form subm
5 min read
How to stop a form submit action using jQuery ? In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form,
3 min read
How to clear form after submit in Javascript without using reset? Forms in JavaScript serve to gather specific user information, essential in various contexts like recruitment or inquiry submissions. While offline forms can be freely distributed, online forms must maintain a consistent structure for all users. After filling out a form, submission is crucial, but d
2 min read
How to use multiple submit buttons in an HTML form ? Using multiple submit buttons in an HTML form allows different actions based on the button clicked. Each submit button can trigger a unique server-side or JavaScript process while sharing the same form fields, enabling various functionalities within a single form structure.Syntax<form action="/https/www.geeksforgeeks.org/DE
2 min read
How to submit a form on Enter button using jQuery ? Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. html <!DOCTYPE html>
2 min read
How to Toggle the Buttons & Submit a Form at the Same Time ? In web development, it is common to come across situations where you need to toggle buttons and submit a form simultaneously This functionality is useful for users to interact with the form by enabling or disabling buttons while processing or submitting form data and integrating a button toggle with
2 min read