CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Brunaine
Brunaine

Reputation: 1236

Ajax/Jquery Form won't work

I have a login form that is working in a kinda same way I don't know why this won't work. When I press 'Criar' it does nothing, it doesn't even change the text of that Button to 'Loading ...' as I have stated on beforeSend function. I started using Jquery so sorry if it is a stupid mistake!

Form

<form id="criarSubCategoria-form" class="form-horizontal" role="form" action="criarCategoria.php" method="post">
    <div class="col col-lg-4">
      <label for="nome">Nome:</label>
      <input type="text" class="form-control" id="nome" name="nome">
    </div>
    <br>
    <div class="form-group margin-top-pq">
        <div class="col-sm-12 controls">
            <button type="button" class="btn btn-primary" name="btn-criarSubCategoria" id="btn-criarSubCategoria">
              Criar
            </button>
        </div>
    </div>
</form>

click Function

$('document').ready(function(){

    $("#btn-login").click(function(){}); // this one is working so I didn't put all the code here

    $("#btn-criarSubCategoria").click(function(){
        var data = $("#criarSubCategoria-form").serialize();
        $.ajax({
            type : 'POST',
            url  : '../functions/criarCategoria.php',
            data : data,
            dataType: 'json',
            beforeSend: function()
            {
                $("#btn-criarSubCategoria").html('Loading ...');
            },
            success :  function(response){
                if(response.codigo == "1"){
                    $("#btn-criarSubCategoria").html('Entrar');
                    $("#login-alert").css('display', 'none')
                }else{
                    $("#btn-criarSubCategoria").html('Entrar');
                    $("#login-alert").css('display', 'block')
                    $("#mensagem").html('<strong>Erro! </strong>' + response.mensagem);
                }
          }
        });
    });

});

Upvotes: 0

Views: 47

Answers (2)

Sachin Kumar
Sachin Kumar

Reputation: 3240

jQuery is not define. Or use jQuery instead of $ will works. Change 1st line 

jQuery(document).on("click", "#btn-criarSubCategoria", (function(e, $){

Upvotes: 1

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Try using this as your click function

$(document).on("click", "#btn-criarSubCategoria", (function(e){
var data = $("#criarSubCategoria-form").serialize();
e.preventDefault();
$.ajax({
    type : 'POST',
    url  : '../functions/criarCategoria.php',
    data : data,
    dataType: 'json',
    beforeSend: function()
    {
        $("#btn-criarSubCategoria").html('Loading ...');
    },
    success :  function(response){
        if(response.codigo == "1"){
            $("#btn-criarSubCategoria").html('Entrar');
            $("#login-alert").css('display', 'none')
        }else{
            $("#btn-criarSubCategoria").html('Entrar');
            $("#login-alert").css('display', 'block')
            $("#mensagem").html('<strong>Erro! </strong>' + response.mensagem);
        }
  }
});
});

Hope this gets your work done.

Upvotes: 0

Related Questions