jQuery EasyUI Form - Creating an Asynchronous Submit Form
This tutorial shows you how to submit a form using easyui. We create a form with fields for name, email, and phone. By using the easyui form plugin, we convert the form to an ajax form. The form submits all fields to the backend server, which processes the data and sends some information back to the frontend page. We receive the returned data and display it.
Creating the 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>
Converting to an 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";