set background color on ajax with condition value on mysql

user_14697536 0
Viewed 261

i just wanna to show 2 color of button with consition status in mysql data if status = 1 , button color = green if status = 2 , button color = red

this is my button code

<?php
           $query1 = mysqli_query($connect,"SELECT * FROM smt WHERE no <= 15");
           while ( $data=mysqli_fetch_array($query1)){
              $nostation = $data['no'];
              $namastation = $data['name'];
              $status = $data['status'];
               ?>

                      <div class='col-xs-2-2'>
                          <form method='post'>
                            <input type="hidden" value="2" id="status_<?=$nostation;?>" name="status">
                             <button type="submit" id="button_<?=$nostation;?>" data-id="<?=$nostation;?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation ?></b></button>
                          </form>
                      </div>
              <?php } ?>

and this is my color code with js, now i just can set color to all button no condition with value of status. anyone can help me ?

<script type="text/javascript">
  $(document).ready(function(){
   $("[id^=button_]").css("background-color", "Red");
 });
</script>

and i this is my ajax code to set multiple button with autogenerate id

<script>
$(document).ready(function(){           //when DOM is Ready.
$("[id^=button_]").click(function () {  //when Button is Clicked.
    var id = $(this).data('id');       // Get the ID of the button that was clicked on.
    var status = $("#status_"+id).val();   // value from `input` which is connected the clicked button.
   // console.log(id+"---"+name);
    $.ajax({                          // AJAX request
        url: 'coba1.php',            // send request to server.
        method: 'POST',               // method is POST.
        data: {                       //data which is sent to server.      
            id: id,status: status
        },
        function (data) {    //success function called.
          // alert success data.
        }
    });
});

});

how i add the code to set button color with condition ?

mysql ajax javascript
1 Answers

You can use .each loop to iterate through your form and then check if the status input has value 1 or 2 depending on this addClass either red or green.Also, add here status value which you are getting from db i.e : <input type="hidden" value="<?=$status;?>" id="status_<?=$nostation;?>" name="status"> `

Demo Code :

//loop through each form
$("form").each(function() {
  //find status value if 2 add class red or green
  $(this).find("input[name=status]").val() == 2 ? $(this).find("[id^=button_]").addClass("red") : $(this).find("[id^=button_]").addClass("green")
})
.red {
  background-color: red;
}

.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="2" id="status_1" name="status">
    <button type="submit" id="button_1" data-id="1" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Abc</b></button>
  </form>
</div>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="1" id="status_2" name="status">
    <button type="submit" id="button_2" data-id="2" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Xyz</b></button>
  </form>
</div>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="2" id="status_3" name="status">
    <button type="submit" id="button_3" data-id="3" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Mno</b></button>
  </form>
</div>

Also, you can do same using php code just check the $status value and assign the value red or green to some variable and add this variable to button class i.e :

<?php
//yourcodes ..
$toadd;
while ($data = mysqli_fetch_array($query1)) {
    $nostation = $data['no'];
    $namastation = $data['name'];
    $status = $data['status'];
    //check status
    if ($status == 2) {
        $toadd = "red"; //assign value
        
    } else {
        $toadd = "green";
    }
?>

          <div class='col-xs-2-2'>
             <form method='post'>
                <input type="hidden" value="2" id="status_<?=$nostation; ?>" name="status">
                //pass same value inside button class
               <button type="submit" class="<?=$toadd; ?>" id="button_<?=$nostation; ?>" data-id="<?=$nostation; ?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation; ?></b></button>
            </form>
          </div>
 <?php
} ?>

And simply use css :

 .red {
  background-color: red;
}

.green {
  background-color: green;
}
user_106064000
Related