How to make that when you click on a class:

<form class="ch" action="" method="post"> <button class="button orange" type="submit" name="on" onClick="init()">Įjungti serverį</button> </form>

replaced it with:

 <button class="button grey">Serveris jau įjungtas</button>

? I tried:

 function init() { $('.ch').replaceWith("<button class="button grey">Serveris jau įjungtas</button>"); }

and

 $('.ch').click(function(){ $(this).remove(); });

but for some reason it does not work. There is no reaction. The button starts the process:

 if(isset($_POST['on'])) { $output = shell_exec('bash /var/www/CP/server.sh start'); }
  • $('button[class="button orange"]').onclick(function() { $(this).removeClass("orange"); $(this).addClass('grey'); }); I would do that - Bogdan Gudyma
  • The button with the form need to be replaced or just the button inside? - Mr. Black
  • @BogdanGudyma, not working. - ES.
  • @Doofy, you need to remove the button along with the form, and instead just display the class (another) - ES.

2 answers 2

 <button class="button orange" onclick='init(this)'>server</button> 
 function init(e) { xhr = new XMLHttpRequest(); xhr.open('POST', 'a.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('on='); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) { console.log(xhr.responseText); } } } e.outerHTML = '<button class="button grey">Serveris jau įjungtas</button>'; }

a.php

 if(isset($_POST['on'])) { $output = shell_exec('bash /var/www/CP/server.sh start'); echo $output; }

Example without javascript on one php

 if(isset($_POST['on'])) { $output = shell_exec('bash /var/www/CP/server.sh start'); echo "<button class='button grey'>Server is jau įjungtas</button>"; } else { echo "<form action='' method='POST'> <button class='button orange' name='on'>Įjungti serverį</button> </form>"; }
  • Why it does not work - ES.
  • @ES. Because the page is updated because of the form after clicking. Here in the code works, because the page is not updated. Need to go in the direction of requests - Mr. Black
  • What exactly do you need to do with requests? - ES.
  • @ES., Form sends a request with updating the page. If you need a request, you can release the button from the form and make a request in the script. What is form in script here for? - Mr. Black
  • it would be nice, do not tell me how to implement this php script? I think the form is not needed, otherwise I do not know how to implement - ES.

Like that :

 $(function() { $("#mybutton ").click(function() { $(this).removeClass('grey').addClass( "red" ) $(this).text("Уже включено") }); }); 
 .grey { background: grey; } .red { background: red } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button grey" id="mybutton">Выключено</button>

  • This is not what I need. I want to replace a form with a class with another class, without a form. - ES.
  • Do you want to delete the form? - koks_rs
  • Yes, I want to remove the form with the class and show another class. - ES.