Submitting a form asynchronously without using Javascript

Submitting a form asynchronously without using Javascript

3 min. read

Creating directories( folders ) for the application

  1. Create a directory named myWebApp in your server root directory eg. in www directory (for windows).
  2. Create a subdirectory named css inside your myWebApp directory.
  3. Create a subdirectory named myServer inside your myWebApp directory.

HTML markup

<!DOCTYPE html>
<html>
	<head>
		<title>Submitting a form asynchronously without using Javascript</title>
		<link rel="stylesheet" href="css/form_styles.css">
	</head>
	<body>
		<div id="myForm">
			<!-- 1. Create a HTML form -->
			<form method="post" action="myServer/process.php" target="target_frame">
				<div class="label">Enter your name</div>
				<input type="text" name="user_name">
					
				<div class="label">Enter your hobby</div>
				<input type="text" name="user_hobby">
					
				<div id="submit_button_cover">
					<input type="submit" value="Submit form">
				</div>
			</form>
			<!-- 2. Create an iframe -->
			<iframe name="target_frame">My frame</iframe>
		</div>
	</body>
</html>

Save this html as myForm.html file in myWebApp directory.

CSS rules

body
{
	margin:0px;
	font-size:14px;
	color:#525252;
	background-color:#f1f5f1;
}

body,input[type="submit"],input[type="text"]
{
	font-family:Helvetica,sans-serif;
}

iframe
{
	display:none;
}

#myForm
{
	max-width: 350px;
	margin: 100px auto 0px auto;	
}

form
{
	padding: 0px 20px 20px;
	background-color: #fff;	
}

.label
{
	font-size: 15.4px;
	font-weight: bold;
	padding-top:20px;
}

input[type="text"]
{
	border-width: 0px;
	border-bottom: 1px solid #f1f5f1;
	width: 100%;
	padding:7px 0px 4px 0px;
	color: #949494;
	font-size: 13.4px;
	outline: none;
}

#submit_button_cover
{
	margin-top: 20px;	
}

#submit_button_cover input[type="submit"]
{
	display: block;
	width: 100%;
	font-size: 14px;
	padding: 12px 10px;
	border-width: 0px;
	color: #fff;
	background-color: #3b3;
	cursor: pointer;
}

Save this css as form_styles.css file in css directory.

PHP code

<?php
	// Get submitted form data
	$user_name = $_POST['user_name'];
	$user_hobby = $_POST['user_hobby'];

	// Write the data to a text file or do whatever you want

	// Making content for text file
	$content = "Name : $user_name, Hobby : $user_hobby";

	// Create a text file named "justCreated"
	$fp = fopen('justCreated.txt','w');

	// Write the content in the justCreated.txt file
	fwrite($fp,$content);

	// Close the file pointer
	fclose($fp);
?>

Save this php code as process.php file in myServer directory.

Above PHP code is just an example, no validation used, in realtime production applications you must validate the user input.

Execution of the application

  1. Start your wamp / lamp / xampp server.
  2. Open myForm.html HTML file in your web browser.
  3. Fill the form and submit it.
  4. Check your myServer directory there you will find a .txt file named justCreated with some content in it. ( It is created by the code in process.php file )
  5. That's it ! this is what we wanted to achieve, you submitted the form asynchronously and server saved your data on a .txt file without webpage redirect.

Explanation

Target attribute of Form tag can have these values

  1. _self
  2. _blank
  3. _top
  4. _parent
  5. Name of an iframe

We are interested in the 5th value "Name of an iframe".

Target attribute in our form has it's value set to target_frame which is name of the iframe that we coded in myForm.html file.

Using target="target_frame" in our HTML means that we want to handle the response sent by server in an iframe named target_frame in the same webpage . Using this technique no page redirect will occur when form is submitted and user stays on the same webpage.

Pros

No use of Javascript, so we don't have to worry whether our users have Javascript enabled or not. Asynchronous request will always be sent to the server on form submission.

Cons

No ways to handle events like error, fail, timeout etc. for async request as they require Javascript code to handle them.
Write comments