jEasyUI creates asynchronous submission form

This tutorial shows you how to submit a form (Form) through easyui. We create a form with name, email and phone fields. Change the form to an ajax form by using the easyui form plugin. The form submits all fields to the back-end server, and the server processes and sends some data back to the front-end page. We receive the return data and display it.

Create form (Form)

	<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
	<form id="ff" action="form1_proc.php" method="post">
		<table>
			<tr>
				<td>Name:</td>
				<td><input name="name" type="text"></input></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input name="email" type="text"></input></td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td><input name="phone" type="text"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Submit"></input></td>
			</tr>
		</table>
	</form>

Change to Ajax form

	$('#ff').form({
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

Server-side code

	$name = $_POST['name'];
	$email = $_POST['email'];
	$phone = $_POST['phone'];

	echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

Download jQuery EasyUI instance

jeasyui-form-form1.zip