preventDefault does not work with onclick function on button

Question

preventDefault does not work follow the code:

function updateCliente(e) {
    var url2 = "con_cliente.php" 
    var url = "update/update_cli.php"; 
     if (confirm('Tem certeza que quer cadastrar o cliente?')){ 

    $.ajax({
           type: "POST",
           url: url,
           data: $("#form_cli").serialize(),
           success: function(data)
    {

        $("#alterafade").fadeOut(800, function(){
        $("#alterafade").load(url2).fadeIn().delay(2000);
               });

               //utilizar o dado retornado para alterar algum dado da tela.
           }

         });
         e.preventDefault();// esse comando serve para previnir que o form realmente realize o submit e atualize a tela.
     }


}

form

 <form id="form_cli" >
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
       <strong> Nome do Cliente</strong>
       </div>
       <input name="name" type="text" class="form-control" id="name"  value="<?php echo $row['nome_cliente']; ?>"  />
       <div class="input-group-addon">
        <i class="fa fa-user">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Nome Fantasia ou arte:</strong>
       </div>
       <input name="nome_fant" type="text" class="form-control" id="nome_fant" value="<?php echo htmlentities($row['nome_fant_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-cube">
        </i>
       </div>
      </div>
     </div>
      <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Email</strong>
       </div>
       <input name="email_cli" type="text" class="form-control" id="email_cli" value="<?php echo $row['email_cli']; ?>" />
       <div class="input-group-addon">
        <i class="fa fa-cube">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Endere&ccedil;o:</strong>
       </div>
       <input name="end_cli" type="text" class="form-control" id="end_cli" value="<?php echo htmlentities($row['endereco_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-map">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Numero de contato:</strong>
       </div>
       <input name="tel" type="text" class="form-control" id="tel" value="<?php echo htmlentities($row['telefone_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-phone-square">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>CEP</strong>
       </div>
       <input name="cep" type="text" class="form-control" id="cep" value="<?php echo htmlentities($row['cep_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-map-o">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>CPF/CNPJ:</strong>
       </div>
       <input name="cpf" type="text" class="form-control hibridCpf" id="hibridCpf" value="<?php echo $row['cpf']; ?>"/>
       <div class="input-group-addon">
        <i class="fa fa-pencil-square-o">
        </i>
       </div>
      </div>
     </div>

  <input type="hidden" name="id_cli"  value="<?php echo $row['id_cli']; ?>" />
           <button class="btn btn-success" name="submit" type="submit" onclick="updateCliente()">
        Salvar
       </button>
    </form>

Answer 1

As clarified in the comments the problem occurs with the send button of the form:

<button class="btn btn-success" name="submit" type="submit" onclick="updateCliente()">
   Salvar
</button>

According to the documentation MDN the property type informs the browser of the default behavior of this button:

• submit: The button sends the form data to the server. This is the default if the attribute is not specified or if the attribute is dynamically changed to an empty or invalid value.
• reset: The button resets all controls to their initial values
• button: The button has no default behavior and does nothing when pressed. It may have client-side scripts associated with element events, which are triggered when events occur.

In this case the property type associated with the button is submit.

To fix the problem just modify property type of submit for button, by causing the button to be pressed to invoke the event associated with it and made unnecessary, in this case, the call to preventDefault() that can safely be removed from the code.

<button class="btn btn-success" name="submit" type="button" onclick="updateCliente()">
   Salvar
</button>

Applying repair to your code Javascript:

function updateCliente(e) {
    var url2 = "con_cliente.php" 
    var url = "update/update_cli.php"; 
     if (confirm('Tem certeza que quer cadastrar o cliente?')){ 

    $.ajax({
           type: "POST",
           url: url,
           data: $("#form_cli").serialize(),
           success: function(data)
    {

        $("#alterafade").fadeOut(800, function(){
        $("#alterafade").load(url2).fadeIn().delay(2000);
               });

               //utilizar o dado retornado para alterar algum dado da tela.
           }

         });             
     }
}

And in your code HTML:

<form id="form_cli" >
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
       <strong> Nome do Cliente</strong>
       </div>
       <input name="name" type="text" class="form-control" id="name"  value="<?php echo $row['nome_cliente']; ?>"  />
       <div class="input-group-addon">
        <i class="fa fa-user">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Nome Fantasia ou arte:</strong>
       </div>
       <input name="nome_fant" type="text" class="form-control" id="nome_fant" value="<?php echo htmlentities($row['nome_fant_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-cube">
        </i>
       </div>
      </div>
     </div>
      <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Email</strong>
       </div>
       <input name="email_cli" type="text" class="form-control" id="email_cli" value="<?php echo $row['email_cli']; ?>" />
       <div class="input-group-addon">
        <i class="fa fa-cube">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Endere&ccedil;o:</strong>
       </div>
       <input name="end_cli" type="text" class="form-control" id="end_cli" value="<?php echo htmlentities($row['endereco_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-map">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>Numero de contato:</strong>
       </div>
       <input name="tel" type="text" class="form-control" id="tel" value="<?php echo htmlentities($row['telefone_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-phone-square">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>CEP</strong>
       </div>
       <input name="cep" type="text" class="form-control" id="cep" value="<?php echo htmlentities($row['cep_cli'], ENT_COMPAT, 'utf-8'); ?>" />
       <div class="input-group-addon">
        <i class="fa fa-map-o">
        </i>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <div class="input-group">
       <div class="input-group-addon">
        <strong>CPF/CNPJ:</strong>
       </div>
       <input name="cpf" type="text" class="form-control hibridCpf" id="hibridCpf" value="<?php echo $row['cpf']; ?>"/>
       <div class="input-group-addon">
        <i class="fa fa-pencil-square-o">
        </i>
       </div>
      </div>
     </div>

  <input type="hidden" name="id_cli"  value="<?php echo $row['id_cli']; ?>" />
           <button class="btn btn-success" name="submit" type="button" onclick="updateCliente()">
        Salvar
       </button>
    </form>