jquery.form.js 让表单提交更优雅

jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单,比jQuery的ajax提交要功能强大。

1.引入

<script src="/src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/jquery.form.js"></script>

2.使用

$(function () {
        var E = window.wangEditor;
        var content_editor = new E(‘#content_editor‘);
        content_editor.create();
        var content_val = $("#content").val();
        // 设置内容
        content_editor.txt.html(content_val);

        var answer_editor = new E(‘#answer_editor‘);
        answer_editor.create();
        var answer_val = $("#answer").val();
        // 设置内容
        answer_editor.txt.html(answer_val);

        $("#cancel_btn").on(‘click‘,function () {
            window.location.href = ‘index‘;
        });

        // 只是准备工作,需要表单提交才触发
        $("#edit_form").ajaxForm({
            dataType: "json",
            success : function(res){
                if(res.errno == 0){
                    alert(‘已保存‘);
                    window.location.href = ‘index‘;
                }else{
                    alert(res.errdesc);
                }
                return false;
            }
        });

        // 提交按钮点击
        $("#edit_btn").on("click", function(){
            // 获取并判断各个值是否填写并正确
            var id   = $("#id").val();
            var title =$("#title").val();
            // 获取内容
            var content = content_editor.txt.html();
            var answer = answer_editor.txt.html();
            var question_type_id = $("#question_type_id").val();
            if(!title){
                alert(‘标题不能为空‘);
                return;
            }
            if (!content && !answer) {
                alert(‘内容和答案不能全为空‘);
                return;
            }
            if(!question_type_id){
                alert(‘类型不能为空‘);
                return;
            }

            // 设置新内容
            $(‘#content‘).val(content);
            $(‘#answer‘).val(answer);

            // 表单触发submit事件
            $("#edit_form").submit();
            return false;
        });

});

原文地址:https://www.cnblogs.com/wordblog/p/10272398.html

时间: 2024-10-25 08:18:10

jquery.form.js 让表单提交更优雅的相关文章

使用Jquery.form.js ajax表单提交插件弹出下载提示框

现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼容性的问题.在谷歌和火狐下没这个问题,我用的ie9测试是有这个问题的.具体的详细我参照的该链接: http://zhidao.baidu.com/link?url=uTXondC9ECEfdObEWbq7V2O7-UW_oXtoVcneVqH_Dmj2hUXjM3y6wMFnQYsUupdWC0Tf

jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏览器当中却无法进行验证就直接将表单提交了. 在网上查了一下原因,大多数文章表明原因是js代码书写不规范造成,也就是在验证表单的规则(rules)数组的最后多了个逗号.起初我也因为是这个原因于是查看了自己的代码发现确实有此问题于是就改正过来了. 但是在浏览器中查看后仍然不起作用,在百思不得其解时,想到

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

jQuery通过jquery.form.js插件使用AJAX提交Form表单

我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.5.支持提交多种类型数据.如:xml,json等. 主要的函数: 1.ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的ready函数中,使用ajaxForm来为AJAX提交

js阻止表单提交

<!DOCTYPE html><html><head>    <title>Simple Login Form</title>    <meta charset="UTF-8" />    <meta name="Designer" content="PremiumPixels.com">    <meta name="Author" c

js 在表单提交前进行操作

最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id="loginForm" name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Sub

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET

jQuery最简单的表单提交方式

第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selector).keyup(function) 4.$(selector).submit(function) 提交表单前,阻止提交按钮的默认的action,或返回false,如: 1.阻止提交按钮的默认的action $("form").submit(function(e){    e.preven