成功提交后清除jeasyui表单字段

Question

I'm using a jeasyui form, inside a xoops module, in which I'm trying to clear all the form fields once the data has successfully submitted.

I've already consulted this question , but it didn't solve the problem in my case.

My HTML:

<div class="easyui-panel" title="Capture Reqs" style "width:100%;
max-width:600px; padding:30px 60px;">

    <form action = "captureReqs_Save.php" id ="ff" class = "easyui-form" 
     method ="post" data-options = "novalidate:true">

        <div style="margin-bottom:20px"> Area <br>
        <input id="idArea" class="easyui-combobox" style="width:260px" name="idArea" 
            data-options="
            url:'areasJson.php?idZona=<?php echo $idZone; ?>',
            label:'Area:',
            valueField: 'id',
            textField: 'desc',
            required:true
        ">
        </div>

        <div style="margin-bottom:20px"> Material 
        <input id="IdMaterial" class="easyui-combobox" style="width:100%"
         name="IdMaterial" data-options="
            loader: myloader,
            mode: 'remote',
            valueField: 'code',
            textField: 'desc',
            required:true
        ">

        <div style="margin-bottom:20px"> Qty
            <input class="easyui-textbox" name="quantity" style="width:100%"
             data-options="label:'Qty:',required:true, validType:'number'">
        </div>


        <div style="margin-bottom:20px">            
    </form>

    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" 
         onClick = "submitForm()" style="width:80px"> Submit</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" 
         onClick = "resetForm()" style = "width:80px"> Clear </a>
    </div>
</div>

Script:

<script>
    var myloader = function (param, success, error) {
        var q = param.q || '';
        if (q.length <= 2) {
            return false
        }
        $.ajax({
            url: 'materialJson.php?idArea=' + $('#idArea').combobox('getValue'),
            dataType: 'json',
            data: {
                q: q
            },
            success: function (data) {
                var items = $.map(data, function (item, index) {
                    return {
                        code: item.code,
                        desc: item.desc
                    };
                });
                success(items);
            },
            error: function () {
                error.apply(this, arguments);
            }
        });
    }

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                return $(this).form('enableValidation').form('validate');
            }
        });

    }

    function resetForm() {
        $('#ff')[0].reset();
    }
</script>

Answer 1

Try calling resetForm. I converted to use promise style ajax and added resetForm

var myloader = function (param, success, error) {
    var q = param.q || '';
    if (q.length <= 2) {
        return false
    }
    $.ajax({
        url: 'materialJson.php?idArea=' + $('#idArea').combobox('getValue'),
        dataType: 'json',
        data: {
            q: q
        }
    }).then(function (data) {
        var items = $.map(data, function (item, index) {
            return {
                code: item.code,
                desc: item.desc
            };
        });
        success(items);
    }).fail(function () {
        error.apply(this, arguments);
    });
}

function submitForm() {
    $('#ff').submit(function () {
        if ($(this).form('enableValidation').form('validate')) {
            $.post($(this).attr('action'), $(this).serialize(), function (response) {
                clearForm();
            });
        }
        return false;
    });
}

function resetForm() {
    $('#ff')[0].reset();
}