PHP: replace a button with text when clicked [clos

Question

I want to make a button that, when clicked, displays a simple "X" on the site, in the exact same position that the button previously was. So the button will disappear, and be replaced with an "X". My button code is simply <button onclick="myFunction()">1</button> How do I do this? It has to be in PHP.

Can't blame you guys from downvoting this question since it's probably extremely stupid, but I'm new to this language and I'm trying to learn. Didn't find any similar questions on this site.

EDIT: I found someone else's code that does exactly what I want to, but I can't pinpoint the exact line or code that they're using for the process. http://www.javaist.com/blog/2013/04/29/tictactoe-in-php/comment-page-1/ How do they do that?

Answer 1

That's impossible in PHP. PHP is executed on the server side, interactions like clicking on a button are executed on the client side (usually by the client ). You should look into Javascript to do such things.

Answer 2

You could have a normal form either with the page submitting to itself or to another page it would need an ID - id="form" - and should end with your button with its own added ID:

    <button id="myButton" onclick="myFunction()">1</button>
    </form>

and a piece of JavaScript in the head of the page like this.

This version would disable the button after it is clicked and should submit the page - if you don't want that remove the second document.getElementById... and the submit code:

    this.form.submit(); 

To get rid of the button altogether you could access its style property using:

    document.getElementById('myButton').style.display = 'none';

but that is not a very reassuring user experience.

    <script language="javascript">
    function myFunction(){
    document.getElementById('myButton').value = 'X';
    document.getElementById('myButton').disabled = true;
    alert('Submit'); // remove this line - just for demo purposes
    this.form.submit();
    }
    </script>

To make the button disappear completely and be replaced by an X you would need to put it in a <span> or other tag which can have an ID and innerHTML property. Then you could use a span around your button - for example:

    <span id="myButtonSpan"><button id="myButton" onclick="myFunction()">1</button></span>

and use this in your JavaScript to exchange the innerHTML of the span with an X:

    document.getElementById('myButton').style.display = 'none';
    document.getElementById('myButtonSpan').innerHTML = 'X';

As per other comments this is JavaScript not PHP - you could do it in PHP so it has a value of X after it has been submitted by using a hidden variable with a value set by PHP so that if the page has been submitted it would come back with 'X' instead of '1'

At the very top of your HTML page - which would now have to have a .php and not a .html extension you could put:

    <?php
    if(isset($_POST['hidden_input'])){
    $hidden_input_value = 'X';
    }else{
    $hidden_input_value = '1';
    }
    ?>

and your hidden input would have:

     <input type="hidden" name="hidden_input" value="<?php echo htmlspecialchars($hidden_input_value); ?>" />

or you could make the entire button a little "slug" of PHP:

    $button = '<button id="myButton" onclick="myFunction()">1</button>';

and using the same PHP if(isset($_POST['hidden_input'])){... code as above, make the value of $button = 'X'; and use <?php echo htmlspecialchars($button); ?> where you want the button to appear...or not. The function would then only be used to submit the page.

Again, as per the comments, this is not the most "modern" way of doing things to say the least - I just added it to show the difference with the PHP "version" of a solution and a JavaScript one.

If you were keeping the button but just changing its value, you could use the value of another hidden input to count the number of times it was submitted and use that value for the button so you would see a count of how many times it had been clicked. That would save you having to use sessions for a single value.

     <input type="hidden" name="hidden_input_count" value="<?php echo htmlspecialchars($hidden_input_count); ?>" />

and in your PHP you would have

     $hidden_input_count = intval($_POST['hidden_input_count']) + 1;

To make the button not appear according to the value of the hidden input as set from PHP you could pick up the hidden input's value in JavaScript - which kind of completes the circle of swapping values between JavaScript and PHP using hidden inputs and it would go something like this in the JavaScript:

    if(document.getElementById('hidden_input').value == 'X'){
       document.getElementById('myButton').style.display = 'none';
    }

htmlspecialchars() and intval() are used to help prevent inject attack but you would need more than that if you intended to put those values into a database.

Some oldfashioned steam driven code for you with a variety of options, but sometimes oldies can be goodies.