jiqing9006

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;
        });

});

分类:

技术点:

相关文章:

  • 2021-11-24
  • 2021-11-29
  • 2021-11-24
  • 2021-11-20
  • 2021-09-14
  • 2021-11-14
  • 2021-09-19
  • 2021-07-07
猜你喜欢
  • 2021-11-13
  • 2021-09-27
  • 2021-09-27
  • 2021-11-24
  • 2021-11-24
  • 2021-11-24
  • 2021-11-24
相关资源
相似解决方案