bookstrap form表单简单-smart-form

代码:

 <form class="smart-form" id="smartForm">
                     <fieldset>
                        <legend>新建抽取任务</legend>
                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">数据源:</label>
                            </section>
                            <section class="col col-4">
                                <label class="input">
                                    <select id="dataSourceid" name="dataSourceid" class="form-control">
                                        <option value="">--请选择--</option>
                                             <c:forEach var="item" items="${dataSources }">

                                                 <option value="${item.id}">${item.connection_name }</option>
                                             </c:forEach>
                                    </select>
                                </label>
                            </section>
                        </div>
                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">表名:</label>
                            </section>
                            <section class="col col-4">
                                <label class="input">
                                    <select id="tablename" name="tablename" class="form-control">
                                        <option value="">--请选择--</option>
                                    </select>
                                </label>
                            </section>
                            <section class="col col-4">
                                <label class="input">
                                    <select id="encoding" name="encoding" class="form-control">
                                        <option value="">--请选择--</option>
                                        <option value="UTF-8">UTF-8</option>
                                        <option value="ISO-8859-1">ISO-8859-1</option>
                                        <option value="UTF-16">UTF-16</option>
                                        <option value="GBK">GBK</option>
                                    </select>
                                </label>
                            </section>
                        </div>
                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">字段集:</label>
                                <input type="hidden" placeholder="字段集" id="fields" name="fields">
                                 <input type="hidden" placeholder="隐含方法" id="anonyfunc" name="anonyfunc">
                            </section>
                            <section class="col col-5" id="fields_div1">
                                <div class="row">
                                    <section class="col">
                                        <label class="checkbox">
                                            <input type="checkbox" name="permissions[4].sn" value="edit" checked="checked" rel="4">改(edit)
                                            <input type="hidden" name="permissions[4].name" value="改" rel="4"/>
                                            <i></i>
                                        </label>
                                    </section>
                                    <section class="col col-4">
                                            <label class="input"><select name=""><option value="">--请选择--</option></select>
                                            </label>
                                    </section>
                                </div>
                            </section>
                            <section class="col col-5" id="fields_div2">
                            <div class="row">
                                    <section class="col">
                                        <label class="checkbox">
                                            <input type="checkbox" name="permissions[4].sn" value="edit" checked="checked" rel="4">改(edit)
                                            <input type="hidden" name="permissions[4].name" value="改" rel="4"/>
                                            <i></i>
                                        </label>
                                    </section>
                                    <section class="col col-4">
                                            <label class="input"><select name=""><option value="">--请选择--</option></select>
                                            </label>
                                    </section>
                                </div>
                            </section>

                        </div>

                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">增量/全量:</label>
                            </section>
                            <section class="col">
                                <label class="radio">
                                    <input type="radio" name="isfull" value=0"">增量
                                    <i></i>
                                </label>
                            </section>
                            <section class="col">
                                <label class="radio">
                                     <input type="radio" name="isfull" value="1" checked> 全量
                                    <i></i>
                                </label>
                            </section>
                        </div>

                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">增量字段:</label>
                            </section>
                            <section class="col">
                                <label class="input">
                                    <select id="incrementalField" name="incrementalField" class="form-control">
                                        <option value="">--请选择--</option>
                                    </select>
                                </label>
                            </section>
                        </div>
                         <div class="row">

                            <section class="col col-2 text-right">
                                <label class="text">过滤条件:</label>
                            </section>
                            <section class="col col-8">
                                <label class="input">
                                    <textarea class="form-control" rows="5" id="filterCondition" name="filterCondition"></textarea>
                                </label>
                            </section>
                        </div>
                        <div class="row">
                            <section class="col col-6">
                            </section>
                            <section class="col col-2">
                                <button type="button" class="btn btn-primary form-control" onclick="doSubmit()" >确定</button>
                            </section>
                            <section class="col col-2">
                                <button type="button" class="btn btn-default form-control" onclick="canclepage()" >取消</button>
                            </section>
                            <section class="col col-2">

                            </section>
                        </div>
                    </fieldset>
        </form>
时间: 2024-10-01 12:56:46

bookstrap form表单简单-smart-form的相关文章

Form表单插件jquery.form.js

常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"><

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields

jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

 一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields(

Jquery组织Form表单提交之Form submission canceled because the form is not connected

有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接),然后将这个from的转换成jquery对象或者Dom对象,再调用对应的submit方法. 例子如下,有一个html页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co

(转)jQuery插件 -- Form表单插件jquery.form.js

beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止 //方式一:利用formData参数 for (var i=0; i < formData.length; i++) { if (!formData[i].value) { alert('用户名,地址和自我介绍都不能为空!'); return false; } } /

Jquery通过Ajax方式来提交Form表单简单实例

因工作中有时会用到ajax,但一般也都写成函数的形式了,再写底层时还要去查资料,这里小记一下ajax的小实例以后不用经常去查了 $.ajax({ type:"POST", url: "要提交的地址", data:{"para":1,"para1":2,...}, dataType:"json",/*要提交的类型*/ success:function(val){/*返回值可以是数组,val['name']*/

bootstrap中的 form表单属性role=&quot;form&quot;有什么作用?

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性.role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button比如,<div role="checkbox" aria-checked="chec

js获取form表单数据和form表单赋值

$.fn.extend({// 调用方式:$("xxxxx").getform(); getform: function () { var obj = {}; var array = $(this).serializeArray(); $.each(array, function () { obj[this.name] = this.value; }); return obj; }, // 调用方式: $("xxx").setform(json); setform:

form表单的简单验证onsubmit

form表单的代码 <form name="myform" action="" method="post"> <input type="text" name="search" id="scontent" placeholder="请输入" value=""/> <select id="stype"