用js控制没有名字的表单 进行提交

    在BS前台设计中,某些地方提交表单是非常方便的。

    但是表单的也是有很多中形式的。

 

表单的创建形式:

    1、用<form></form>进行创建

    技术分享

    2、直接设置表单的属性创建一个没有名字的表单

    技术分享

 

1、对于有名字的表单,可以直接写js事件进行提交

//设置表单提交方式
    $('#importMethod').form({
        url: "/QuestionType/FuzzyQueryQuestionType",
        onSubmit: function () {
            //进行表单验证
            //如果返回false阻止提交
        },
        success: function (data) {
            //var jsondata = JSON.parse(data); //必须转换成json对象,否则异常! rows is undefined
            var jsondata = eval(data);
            $('#dgo').datagrid("loadData", jsondata);
            //$('#dgo').datagrid("reload");
        }
    });
    //提交表单
    $('#importMethod').submit();


 

    使用js提交表单,可以对提交进行很多的设置。

 

2、对于第二种方式,表单form是没有写name属性的。所以是不能使用js进行操作的

    这种方式,一般会在表单中的某个按钮添加一个属性,type="submit"点击这个按钮提交表单

如图:

技术分享

 

    如图所示,这样提交表单的按钮  只能是一个 Button。对于使用其他 按钮的来说,这种按钮非常的不搭调。

为了解决这种按钮的存在,可以尝试把按钮事件转移:

 

    即创建一个其他按钮,去用js控制button按钮的事件。(将button按钮隐藏)

 

@*表单中的button提交表单按钮*@
<input id="btnImport" type="submit" value="导入" style="display: none; width: 60px; height: 28px; margin-left: 15%" />
@*使用Easyui按钮来代替*@
<a id="aImport" class="easyui-linkbutton" onclick="CallImport();" style="margin-left: 15%">
<span class="l-btn-text">导入</span>
</a>

<script>
//间接的调用 导入方法
function CallImport() {
    //alert("dddd");
    document.getElementById('btnImport').click();
}
</script>


 

效果图:

技术分享

 

    一个简单的拼凑,对没有名称的表单进行简单控制。

    在对前台设计样式的时候,很多的地方。不管怎么设置都看不出效果。加一点看似多余的代码。偶尔也会解决一些问题。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。