Klare jeasyui Formularfelder nach erfolgreichem Einreichen

Question

Ich benutze ein jeasyui Formular, in einem xoops Modul, in dem ich versuche, alle Formularfelder zu löschen, sobald die Daten erfolgreich eingereicht wurden.

Ich habe bereits this question konsultiert, aber es hat das Problem in meinem Fall nicht gelöst.

Mein 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

Versuchen resetform aufrufen. Ich konvertierte um zu verwenden Versprechen Stil ajax und hinzugefügt 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(); 
}