Is it possible to display and hide buttons in a php echo inside script?

My problem is I cannot show or hide the button when the data value change to Delivered.

here is my php code

<?php 
    $cardstatus = $row['cardStatus'];
    if($cardstatus == NULL){
       echo '<span class="badge badge-pill badge-warning">Card Pending</span>';
    } elseif($cardstatus == 'Delivered') {
       echo '<span class="badge badge-pill badge-success">Delivered</span>';
     //Display Done Button
       echo '<script>document.getElementById("done").style.display = "block";</script>';
    //Undisplay Close Button
       echo '<script>document.getElementById("cancel").style.display = "none";</script>';

     } else {
       echo '<span class="badge badge-pill badge-info">In Process</span>';
   }


?>

My Button below

//Button Cancel
    <button class="btn btn-warning btn-sm cancel" data-id="<?php echo $row['id'] ?>" data-user="<?php echo $row['user'] ?>" id="cancel">Cancel</button>

//Button Done
    <button class="btn btn-success btn-sm done" style="display: none;" id="done">Done</button>

My Ajax

    action: function () {
                        $.ajax({
                            type: "POST",
                            url: "accept.php",
                            data: {
                                addInfo: addInfo,
                                passInfo: passInfo,
                                id:id
                            },
                            dataType: "text",
                            success: function (data) {
                                // window.location.replace("purchased-top-up-cards.php");
                                $('#done').show(); //This will show but will be gone after refresh
                                $('#close').hide(); //This will hide but will show after refresh

                            },
                            error: function (err) {
                                console.log(err);

                            }                       
                        });
                    }

2 answers

  • answered 2019-05-21 07:44 mplungjan

    Too little info. I would expect you have a php that can do the following:

    <?php 
      $cardstatus = $row['cardStatus'];
      if($cardstatus == NULL){
         echo '{ "type":"warning" , "text":"Card Pending" }';
      } elseif($cardstatus == 'Delivered') {
         echo '{ "type":"success" , "text":"Delivered" }';
       } else {
       echo '{ "type":"info" , "text":"In Process" }';
      }
    ?>
    

    and on the client

    $(function() {
      $("#someForm").on("submit",function(e) {
        e.preventDefault(); // cancel form
        $.post("accept.php",{ "addInfo": addInfo, "passInfo":"passInfo","id":id },function(res) {
          $("#someContainer").append('<span class="badge badge-pill badge-'+res.status+'>'+res.text+'</span>');
          $("#done").toggle(res.status=="success");
          $("#cancel").toggle(res.status!="success");
        });
      });
    });
    

  • answered 2019-05-21 10:15 RamRaider

    The var = test ? 1 : 0 is known as a Ternary Operator and is approximately the same as if/then/else

    In the code below a simple test $cardstatus == 'Delivered' is used as the condition to the ternary operator and the appropriate value is then echoed depending upon the value stored in the variable.

    echo ( $cardstatus == 'Delivered' ? 'block' : 'none' ) 
    

    is a more concise equivalent of

    if( $cardstatus == 'Delivered' ) { echo 'block'; } else { echo 'none'; }
    

    So, applying that same logic inline to the HTML elements but reversing the block/none for the cancel button should work.

    <button class="btn btn-success btn-sm done" style="display:<?php echo ( $cardstatus == 'Delivered' ? 'block' : 'none' )?>;" id="done">Done</button>
    
    <button class="btn btn-warning btn-sm cancel" style="display:<?php echo ( $cardstatus == 'Delivered' ? 'none' : 'block' )?>;" data-id="<?php echo $row['id'] ?>" data-user="<?php echo $row['user'] ?>" id="cancel">Cancel</button>
    

    hope it helps...