skip to Main Content

i created a following system in my website, and i have a follow button that is similar to twitter or facebook. when i click the follow button i want it to change to following and stays that way until the user clicks again. i tried doing this with jquery but so far i am struggling with making it work.

here is what i tried.

my jquery code:

 $(document).ready(function(){              

 $("#follow-button").click(function(){
  if ($("#follow-button").text() == "Follow"){
    $("#follow-button").text() == "Following";

}else{


 }
}); 
});

my html code:

     <button id="follow-button" class='msg-icon' name="follow" type="submit" >Follow    
            <input type="hidden" value="<?php echo $_GET['search']; ?>" name="follow_id"/>
        </button>

how will i go about doing this, and what am i missing?

2

Answers


  1. when you get button text in include space first you remove space using trim() function and button change text using to text() in pass your text

                    $(document).ready(function(){
                        $("#follow-button").click(function(){
                            if ($("#follow-button").text().trim() == "Follow"){
                                $("#follow-button").text('Following');
                            }else{
                                $("#follow-button").text('Follow');
    
                            }
                        });
                    });
    
    Login or Signup to reply.
  2. Using Paras Raiyani’s Solution

    UPDATED (2022)

    Toggle Follow and Following

    $(document).ready(function() {
        $("#follow-button").click(function() {
            value = ($(this).text() == "Follow") ? "Following" : "Follow";
             $(this).text(value);
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <button type="button" id="follow-button" class='msg-icon' name="follow" type="submit">Follow
        <input type="hidden" value="<?php echo $_GET['search']; ?>" name="follow_id" />
    </button>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search