0

I have this code example :

     input[type=submit]:active{
      background-color: black;
     }
      input[type=submit]:focus {
    background-color: black;
  }

In my achievement I want my form submit button to be on black when click on it. My problem is how do i keep this button remain unchange even when page refress example :- I want the click submit button to remain black even when page refress or relaod

big thanks in advances

Kalamarico
  • 5,466
  • 22
  • 53
  • 70
wapob
  • 47
  • 5
  • You can’t do vanilla css... you need JavaScript and maybe pho session to achieve that – Si8 Jan 19 '18 at 23:41
  • @si8 Oh i get but Do u have any idea code to do this using php ? – wapob Jan 19 '18 at 23:45
  • Have you tried anything yet in PHP? Someone here might be able to get you over a particular hurdle, but they probably won't just write your code for you. – Charlie Joynt Jan 20 '18 at 00:15

2 Answers2

1

The button won't retain focus or active status on page reload. However if your PHP code is set up to detect whether the form has already been submitted you could add a class to the input that also turned the button black.

<?php
  $class = ''; 
  if ( /* Some condition that tests if form was submitted */) {
    $class = 'submitted';
  }
?> 

<input type="submit" class="<?php echo $class; ?>" >

Then have the following CSS

input[type=submit]:active,
input[type=submit]:focus, 
input[type=submit].submitted {
  background-color: black;
}
dave
  • 2,762
  • 1
  • 16
  • 32
0

METHOD 1:

<?php
    session_start();

    if ($_SERVER['REQUEST_METHOD'] === 'POST') { //if user clicked submit button
        $_SESSION["form_post"] = "yes";
    }

    if(isset($_SESSION['form_post']) && !empty($_SESSION['form_post'])) {?>
        <input type="hidden" value="<?php echo $_SESSION['form_post']; ?>" id="hdnPostTrue />
    <?php
    }
?>
<script>
    $(function() {
        var vHdnVal = $("#hdnPostTrue").val();
        if (vHdnVal.toLowerCase() === "yes") {
            $("your button id").addClass("button-on-post");
        }
    });
</script>

<style>
    .buttn-on-post {
        background: #000;
    }
</style>

METHOD 2:

<?php
    session_start();
    if ($_SERVER['REQUEST_METHOD'] === 'POST') { //if user clicked submit button
        $_SESSION["form_post"] = "Yes";
    }
    if(isset($_SESSION['form_post']) && !empty($_SESSION['form_post'])) {?>

        <input type="submit" class="<?php if ($_SESSION['form_post'] === 'yes') { echo 'buttn-on-post'; }  ?>" id="your submit button" />
    <?php
    }
?>
<style>
    .buttn-on-post {
        background: #000;
    }
</style>

Not fully tested but it should help you achieve what you are looking for... If you tested or have any questions let me know.

Si8
  • 9,141
  • 22
  • 109
  • 221
  • I had the same idea as @dave, except I gave you a more detailed answer. – Si8 Jan 22 '18 at 15:01
  • I wana stay save from java script i think am accepting your method 2 but my problem is what if i have multiple submit buttons in same page how we i apply this on the selected onces – wapob Jan 23 '18 at 05:10
  • https://stackoverflow.com/questions/2680160/how-can-i-tell-which-button-was-clicked-in-a-php-form-submit should help you answer your question. – Si8 Jan 23 '18 at 15:21