khamsat khamsat khamsat

Ajax Form

you can submit a from with ajax just with defining one attribute fn-ajax


<form action="login.php" method="POST" fn-ajax>
   <input type="text" name="user" />
   <input type="password" name="pass" />
   <input type="submit" name="submit" />
</form>
    

upload Support :

sure you can upload file with single form ajax you don't need to do more , just define enctype attribute


<form action="login.php" method="POST" fn-ajax enctype="multipart/form-data" >
    <input type="text" name="user" />  
    <input type="password" name="pass" />
    <input type="file" name="img" />
    <input type="submit" name="submit" />
</form>
    

Important tags

there is tags give full control to deal with Ajax Request (check , validate , abort request , view callback )

ajax::before tag

this tag used to call function before request

ajax::after tag

this tag used to call function after request

ajax::Exception tag

this tag used to call function before request , to validate and check form element data by the the you need to return true to send data to Server or false to abort request with your message

ajax::success tag

this tag used to call function after request done , return response Data


<form action="login.php" method="POST" fn-ajax enctype="multipart/form-data" >
    <ajax::success fn-js="successFunction" ></ajax::success>
    <ajax::before fn-js="beforeFunction" ></ajax::before>
    <ajax::after fn-js="afterFunction" ></ajax::after>
    <ajax::Exception fn-js="validateFunction" ></ajax::Exception>
    <input type="text" name="user" />  
    <input type="password" name="pass" />
    <input type="file" name="img" />
    <input type="submit" name="submit" />
</form>      
    

<script >
  function beforeFunction(){
     // do something before request
  }
function afterFunction(){
     // do something after request
  }
function successFunction(response){
     // do something after request
  }
function validateFunction(e){
      var form = e.target;
      var user = form.querySelector("input[name=user]");
      var pass = form.querySelector("input[name=pass]");
      var file = form.querySelector("input[name=img]");
      if(empty(user.value) || empty(pass.value) || file.files.length == 0){
        alert("Required labels ");
        user.style.border = "solid 1px red";
        pass.style.border = "solid 1px red";
        return false;
     }else{
        user.style.border = "";
        pass.style.border = "";
      return true;
    }
  }

</script>   
    
khamsat khamsat khamsat khamsat