How to submit a form by clicking a link in JavaScript ?
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.
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">w3wiki</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
$name=$_POST['name'];
$age=$_POST['age'];
$city=$_POST['city'];
echo "NAME-SUBMITTED : $name <br>";
echo "AGE-SUBMITTED : $age <br>";
echo "CITY-SUBMITTED: $city";
?>
Output:
user form data
PHP is a server-side language. So it requires a server. Please refer PHP tutorial for a better understanding.
Contact Us