easyUI创建异步提交表单

我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(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>

改变为Ajax表单

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

服务器端代码

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

    echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";
EasyUI 创建树形下拉框

创建表单

<div id="dlg" class="easyui-dialog" style="width:500px;height:250px;padding:10px 30px;"
            title="Register" buttons="#dlg-buttons">
        <h2>Account Information</h2>
        <form id="ff" method="post">
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" name="name" style="width:350px;"/></td>
                </tr>
                <tr>
                    <td>Address:</td>
                    <td><input type="text" name="address" style="width:350px;"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><select class="easyui-combotree" url="data/city_data.json" name="city" style="width:156px;"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>

从上面的代码可以看到,我们为一个名为 'city' 的树形下拉框(ComboTree)字段设置了一个 url 属性,这个字段可以从远程服务器检索树形结构(Tree)数据。请注意,这个字段有一个样式名字叫 'easyui-combotree',所以我们不需要写任何的 js 代码,树形下拉框(ComboTree)字段将自动渲染。

表单验证

创建表单(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>
            &lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
        </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');
        }
    });

如果表单是无效的,将显示一个提示信息。

easyUI表单基础知识的更多相关文章

  1. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  2. form表单基础知识

    form 元素是块级元素 ------------------- ------------------- ----------------------------------------------- ...

  3. H5表单基础知识(二)

    表单新增属性 <!--<input type="text" class="name" />--> <!-- placeholder ...

  4. form 表单基础知识

    <form method=" name="one" action="http://www.battlenet.com.cn/zh/"> & ...

  5. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  6. [SQL]SQL Server数据表的基础知识与增查删改

    SQL Server数据表的基础知识与增查删改 由张晨辉(学生) 于19天 前发表 | 阅读94次 一.常用数据类型 .整型:bigint.int.smallint.tinyint .小数:decim ...

  7. easyui表单提交,后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  8. EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  9. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

随机推荐

  1. 网络协议UDP

    ------------------------------互联网协议与协议族------------------------------tcp/ip协议介绍:计算机网络协议,不同类型不同厂家之间的终 ...

  2. 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安 ...

  3. MySQL命令无法结束

    输入完sql语句后 输入分号结束,发现无法结束,原因一般是引号不对称导致的.再输入'; 或者对称的分号就可以结束.

  4. React Native底|顶部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...

  5. [转载]python 详解re模块

    原文地址:python 详解re模块作者:Rocky 正则表达式的元字符有. ^ $ * ? { [ ] | ( ) .表示任意字符 []用来匹配一个指定的字符类别,所谓的字符类别就是你想匹配的一个字 ...

  6. 转:【Java并发编程】之一:可重入内置锁

    每个Java对象都可以用做一个实现同步的锁,这些锁被称为内置锁或监视器锁.线程在进入同步代码块之前会自动获取锁,并且在退出同步代码块时会自动释放锁.获得内置锁的唯一途径就是进入由这个锁保护的同步代码块 ...

  7. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  8. 201521123067 《Java程序设计》第8周学习总结

    201521123067 <Java程序设计>第8周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.List中指定 ...

  9. 201521123070 《JAVA程序设计》第8周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.泛型简介:泛型程序设计,编写的代码可被不同类型的对象所重用,Java中一个集合可以放任何类 型的对象,因为 ...

  10. 201521123122 Java 第二周学习总结

    1. 本周学习总结 1.进一步了解了对码云的使用,学会了将本地代码上传到码云以及将码云上的代码克隆到eclipse上. 2.感觉本章学的基本语法和c的基本上差不多啊 3.string的对象创建后无法修 ...