Change student status from active to inactive

Question

I have a bank where I save status = 1 for active, and 2 for inactive. Is there any way I can deploy on the page writing or a button (or link in the word) "active" and when I click, switch to "inactive" and exchange on the server from 1 to 0, without refresh on the page.

I know how to do php queries until I display the status, but I don’t know how to create the link with the word and call javascript and update again. What is the best method ? Some example code ?

Answer 1

You can use AJAX, everything should be done by another page and the one where the user is will only send the commands (make the requests)

Code Example

var httpRequest = new XMLHttpRequest();
function makeRequest(acao) { //chame a função dizendo qual será a ação 
    httpRequest.open('GET', 'action.php?action='+acao); //Diga o método e a URL 
    httpRequest.send();
    httpRequest.onreadystatechange=function(){ //Quando o retorno estiver pronto
        if (httpRequest.readyState === 4) {//Processo concluído
            alertContents(); //Função que dirá que a função foi completada
        }
    }
}

Action.php

The.php action should be ready to execute the actions when accessed let’s assume that the makeRequest() function was called as follows : makeRequest('inactive'), php will have to look like this one:

switch ($_GET['action']){
   case 'inativo':
      //o que o php deverá fazer
   ;
}

Knob

1° Import the Jquery library <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>place before closing the tag body.

2° Function alertContents() Soon after importing the Jquery library use the following code :

function alertContents(){
   if($('#button').html() == '<button id="ativo">Deixar Ativo</button>'){
      $('#button').html('<button id="inativo">Deixar Inativo</button>')
        }
   else{
      $('#button').html('<button id="ativo">Deixar Ativo</button>');
    }
    }

Inside a script tag

3. Knob:

In php put the button code inside div with the id 'button' before the Jquery library import is:

Inactive <button id="inativo">Deixar Inativo</button>

For Active <button id="ativo">Deixar Ativo</button>

4. Click the button

In the script tag in which the alertContents() function was declared before closing the tag paste the following code:

$("#ativo").click(function(){
   makeRequest('ativo');
});
 $("#inativo").click(function(){
   makeRequest('inativo');
});