www.qjdy.com-奇迹赌场 > www.qjdy.com > 表单(form)提交所有字段到后台服务器

原标题:表单(form)提交所有字段到后台服务器

浏览次数:129 时间:2019-07-14

一、EasyUI创设异步提交表单
正文向您出示如何通过 easyui 提交一个表单(Form)。大家成立一个满含name、email 和 phone 字段的表单。通过利用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交全部字段到后台服务器,服务器管理和发送一些数目重回到前端页面。我们收起重返数据,并将它显得出来。

图片 1

创制表单(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>

改变为 Ajax 表单

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

劳务器端代码

form1_proc.php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $phone = $_POST['phone'];

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

二、EasyUI表单验证 将向你出示怎么样验证三个表单。easyui 框架提供一个 validatebox 插件来证惠氏(WYETH)个表单。在本教程中,我们将创制四个联络表单,并行使 validatebox 插件来验证表单。然后你能够依附自己的急需来调度那个表单。

图片 2

创制表单(form)

让大家制造三个简易的联系表单,带有 name、email、subject 和 message 字段:

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
 <form id="ff" method="post">
 <div>
 <label for="name">Name:</label>
 <input class="easyui-validatebox" type="text" name="name" required="true"></input>
 </div>
 <div>
 <label for="email">Email:</label>
 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
 </div>
 <div>
 <label for="subject">Subject:</label>
 <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
 </div>
 <div>
 <label for="message">Message:</label>
 <textarea name="message" style="height:60px;"></textarea>
 </div>
 <div>
 <input type="submit" value="Submit">
 </div>
 </form>

大家增加一个体制名称为 easyui-validatebox 到 input 标志,所以 input 标志将依据 validType 属性应用申明。
当表单无效时挡住表单提交

当用户点击表单的 submit 按键时,如若表单是无用的,大家应该阻碍表单提交。

 $('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

假若表单是对事情没有什么帮助的,将显得三个提醒音讯。

如上就能指向表单举行的解说,富含如何创设异步提交表单、如何实行表单验证,希望这几个都能够扶持到大家。

您大概感兴趣的篇章:

  • jQuery EasyUI提交表单验证
  • jquery插件EasyUI中form表单提交实例分享
  • Jquery插件easyUi落成表单验证示例
  • 实例分析jQuery插件EasyUI最常用的表单验证准则
  • Jquery插件easyUi表单验证提交(示例代码)
  • jQuery EasyUI API 华语文档 - Form表单
  • jQuery EasyUI API 汉语文书档案 - DataGrid数据表格
  • jQuery EasyUI API 华语文书档案 - ComboBox组合框
  • jQuery EasyUI API 汉语文书档案 - Tree树使用介绍
  • Jquery组件easyUi完毕表单验证示例

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:表单(form)提交所有字段到后台服务器

关键词: mg4355手机版

上一篇:colModel属性以数组的形式定义各个表格列

下一篇:没有了