How to submit a form by clicking a link in JavaScript ?

Last Updated : 27 May, 2024

Submitting a form by clicking a link in JavaScript involves binding a click event handler to the link element. When clicked, the handler triggers the form's submit action programmatically, allowing form submission without the need for a traditional submit button.

Approach

HTML Structure:
- Basic HTML structure with a title, heading, and a form to submit details.
- The form contains input fields for Name, Age, and City.
JavaScript Function:
- submitForm() function triggered by clicking "Submit Here."
- Retrieves the form by its ID and submits it.
Output:
- Users enter details in the form.
- Clicking "Submit Here" triggers form submission.

Example: In this example, we have followed the above approach.

HTML

<!DOCTYPE html> <html>  <body>     <h2 style="color:green">GeeksforGeeks</h2>     <b>Submit form details</b>      <form id="form__submit" action="form.php" method="post">         <label>NAME: </label><br />         <input type="text" name="name" /><br />         <label>AGE: </label><br />         <input type="number" name="age" /><br />         <label>CITY: </label><br />         <input type="text" name="city" /><br /><br />         <a href="#" onclick="submitForm()">Submit Here</a>     </form>      <script>         function submitForm() {             let form = document.getElementById("form__submit");             form.submit();         }     </script> </body>  </html>

Note: The given HTML code will redirect the form data to the site or file which is mentioned in the action attribute.

PHP Code: Create a PHP file to get the user entered form data, rename this PHP file as "form.php". This code displays the user form data.

PHP

<?php     $name=$_POST['name'];     $age=$_POST['age'];     $city=$_POST['city'];      echo "NAME-SUBMITTED : $name <br>";      echo "AGE-SUBMITTED :  $age <br>";      echo "CITY-SUBMITTED:  $city"; ?>

Output:

PHP is a server-side language. So it requires a server. Please refer PHP tutorial for a better understanding.