Jquery and PHP POST method

Question

Dear colleagues.

I have a button on the bootstrap:

<button class="btn btn-xs btn-primary active" name="Botao" value="Ativar" id="ativar">Ativar</button>

I would like that by clicking this button, the status was changed to Deactivate, but without refreshing the page. I’m using the code below to direct to the page that makes the change, but it doesn’t seem to be going. See:

$(document).ready(function() {
    $('#ativar').click(function() {
    var valor = $(this).attr('value');
     $.ajax ({
            type: "POST",
            url: "alterar.php?Key="+valor,
             data:  datastring
      })
    });
  });

The change in PHP is OK when I go straight to the change.php page, but from the button it seems that you are not seeing the page.

Answer 1

Try this:

    $(document).ready(function() {
            $('#ativar').click(function(e) {
            e.preventDefault();
            var valor = $(this).attr('value');
             $.ajax ({
                    type: "POST",
                    url: "alterar.php",
                    data: {key: valor},
                    cache: false,
                    success: function(result) {
                 }
              })
            });
          });

Answer 2

ARQUIVO JS

var valor = jQuery('button.active').val();

jQuery.ajax({
    url : "alterar.php?Key="+valor,
    dataType : 'json',
    async : false,
    success : function(msg) {
        if(msg.status == 1){
            jQuery('button.active').html('Ativo').val('Ativo');
        }else{
            jQuery('button.active').html('Desativado').val('Desativado');
        }
    }
});

Arquivo PHP

$return = array('status'=>null);
if($_GET['Key'] == 'Ativo'){
    $return['status'] = 0;
}else{
    $return['status'] = 1;
}

die(json_encode($return));