jQuery AJAX

Send AJAX requests with this jQuery script.

by Ivan Ferrer

HTML

<script src="http://fonts.googlepis.com/css?famaily=Open+Sans:400,700"></script>
   <span id="result">retorno aqui...</span>
<form method="post" action="/echo/js/?js=Esta ação não deveria executar quando selecionado '0'" name="salvar">
    <span>        
        <label>Status: </label>
        <select type="text" name="html" id="status">
        <option value="1">ativo</option>
        <option value="0">inativo</option>
        </select>
    </span>
    
    <span>
        <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/>   </label>
        <input type="submit" name="enviar" value="Enviar" />      
    </span>
    
</form>

CSS

body{
    font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 13px;       
}

form span{  
    display: block;
    margin: 10px;
}

label{
    display: inline-block;
    width: 100px;     
}


input[type="submit"]{
     padding: 5px 15px;       
}

span#result{
    padding: 5px;
    background: #ff9;        
}

img#loadingimg{
    display: none;                   
}

JavaScript

$(document).ready(function(e) {
    
    $('input[name="enviar"]').bind(function(e) {
       var form = $('input[name="salvar"]');  
       var self = $(this);
       self.retorno = false;
      
        
        var form_data = $(form).serialize();
        
        $("#loadingimg").show();
        $.ajax({
            url: '/echo/html/', 
            type: 'JSON',      
            data: form_data,     
            cache: false,
            success: function(returnhtml){  
              if (returnhtml == '0') {
                 e.preventDefault();
                 self.retorno = false;
              } else {
                 $("#result").html(returnhtml); 
                 $("#loadingimg").hide();  
                 self.retorno = true;
              }
            }           
        });    
        return self.retorno;
    });
    
});