Table of contents

submit form without button

In this example, I will show you submit HTML form without pressing the button or displaying the submit button. Sometimes we need a process to submit the form without a button. Here I will show you an example of how to do it.

 

Original Form with Button

In this example, you can see that the code below will display the submit button but still you can submit the form without/with the button.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<form action="post.php" method="post">
	    <input name="username" type="text" /><br />
	    <input name="password" type="password" />
	    <input type="submit" />
	</form>
</body>
</html>

 

Solution: Hiding the form Button

Now let's hide the button to just submit the form without it.

 

See the example code below:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>

	<style type="text/css">
		.hidden-submit-btn {
			position: absolute;
		    width: 1px;
		    height: 1px;
		    padding: 0;
		    overflow: hidden;
		    clip: rect(0, 0, 0, 0);
		    white-space: nowrap;
		    border: 0;
		}
	</style>
</head>
<body>
	<form action="post.php" method="post">
	    <input name="username" type="text" /><br />
	    <input name="password" type="password" />
	    <input type="submit" class="hidden-submit-btn" />
	</form>
</body>
</html>

 

As you can see I just added the class named hidden-submit-btn to call the style above I added it so that it will hide the submit button but still have the same function as the original code.

 

I hope it helps. Thank you for visiting.

Read next