sparkynerd Posted August 12, 2013 Share Posted August 12, 2013 I have created a PHP web page that allows me to control a serial device (a speaker selector matrix), and an Arduino (to switch an amplifier off and on) over my network. I am trying to make it so the text color changes on what ever button is pressed. The button presses are stored as a variable and then POSTed. I would like the text on the current button selected to turn red. There are 5 separate sets of buttons, so each set could have a button with red text at any time. Eventually, I would like to have a graphic next to the button which would change based on a button press. (baby steps!) Attached is the web page. Please keep any answers in laymans terms, since I am a real PHP noob! This webpage is the result of A LOT of trial and error, but it works! Any suggestions are welcome! audio.php Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/ Share on other sites More sharing options...
dungpt29 Posted August 14, 2013 Share Posted August 14, 2013 First, you should complement id property for buttons. For example: <button name="LED2" id="btnLED2ON" style="height: 1.8em; width: 10em; font-size: 16px;" value="ON" type="submit">Power On</button> <button name="LED2" id="btnLED2OFF" style="height: 1.8em; width: 10em; font-size: 16px;" value="OFF" type="submit">Power Off</button> Note that id must be unique to HTML elements. Next, you complement onLoad event for body tag as the following: <body onload="audio_onload();"> You add script tags to implement audio_onload() function using javascript or Jquery as the following: <script type="text/javascript" language="javascript"> function audio_onload() { <?php if ($LED2 == "ON") { ?> // Turn text color of Power On button into red document.getElementById("btnLED2ON").style.color = "red"; <?php } ?> } </script> Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/#findComment-1444927 Share on other sites More sharing options...
BuildMyWeb Posted September 12, 2013 Share Posted September 12, 2013 dung's idea recommends javascript. if youre not comfortable with that, you could stick with php. capture the value of the POSTed variable and use an if statement. <button name="LED2" style="height: 1.8em; width: 10em; font-size: 16px;<?php if( $_POST['LED2'] == "ON" ){ echo" color:red;"} ?>" value="ON" type="submit"></button> Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/#findComment-1449302 Share on other sites More sharing options...
ambikatech Posted September 13, 2013 Share Posted September 13, 2013 <script type="text/javascript" language="javascript">function audio_onload(){<?php if ($LED2 == "ON"){?>// Turn text color of Power On button into reddocument.getElementById("btnLED2ON").style.color = "red";<?php}?>}</script> Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/#findComment-1449356 Share on other sites More sharing options...
priyankagound Posted September 17, 2013 Share Posted September 17, 2013 <html><head><title> New Document </title><script type="text/javascript" language="javascript">function changeBtn(btn){if (! btn.style){alert("Sorry, your browser doesn't support this operation.");return;}btn.style.background = "red";btn.style.color = "blue";return;}</script>This works fine for me. </head><body><form id="f1" name="f1" action="" method=""><br><input type="button" value="Try me" onClick="changeBtn(this)"></form></body></html> Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/#findComment-1449830 Share on other sites More sharing options...
Denae84 Posted October 13, 2013 Share Posted October 13, 2013 Just combine the two. If you want the text color to also be random and don't mind risking foreground and backgrund gets the same color... Quote Link to comment https://forums.phpfreaks.com/topic/281100-change-text-color-of-button-after-it-is-pressed/#findComment-1453720 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.