EasyUI submits Form through ajax

@ Author YHC

This tutorial shows you how to use easyui to submit a form. We create an example form, name, email, and phone field. By using the form plug-in, we change form to ajax form, and form submits all

Field to the background server, the server processes and sends some data back to the front-end page, we show the data and display.

 

View Demo

 

Create Form
[Html]
<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>

<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>

Changed to Ajax form
[Javascript] view plaincopyprint? $ ('# Ff'). form ({
Success: function (data ){
$. Messager. alert ('info', data, 'info ');
}
});

$ ('# Ff'). form ({
Success: function (data ){
$. Messager. alert ('info', data, 'info ');
}
}); Server code
Form1_proc.php

[Php] view plaincopyprint? $ Name = $ _ POST ['name'];
$ Email = $ _ POST ['email '];
$ Phone = $ _ POST ['phone'];

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

$ Name = $ _ POST ['name'];
$ Email = $ _ POST ['email '];
$ Phone = $ _ POST ['phone'];
 
Echo "Your Name: $ name <br/> Your Email: $ email <br/> Your Phone: $ phone ";
 

 

Author: yhc13429826359