Change the color of a button using Jquery Ajax (Color received from external PHP file)

Question

This is my HTML code

<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

   // Same form as above
<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

Jquery Code:

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.post(url, data, function() {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>

PHP file insertwatchlist.php file

$response = new \stdClass();
$response->watchlisticoncolor = "red";
die(json_encode($response));

Output of PHP file insertwatchlist.php file

{"watchlisticoncolor":"red"}

Expected Result:

1.)When someone clicks on add_box button, it submits the form without reloading the page (This one works fine)

2.) insertwatchlist.php sends this code: {"watchlisticoncolor":"red"} and, the Jquery code place them in place of: $watchlisticoncolor variable, in the real time without reloading the page. (This one do not work),

Console tab do not show anything. Here is the screenshot of network tab, when someone clicks on the button http://prntscr.com/fxwt16

try my answer below. Hope it will help

B. Desai
– B. Desai

2017-07-20 04:38:00 +00:00
Commented Jul 20, 2017 at 4:38 — B. Desai
– B. Desai, Commented Jul 20, 2017 at 4:38

Alex Mac · Accepted Answer · 2017-07-20 04:48:48Z

1

Please use background-color instead of color. color property will be used when you want to change color of fonts.

FROM

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

TO

$("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

also add data in your ajax function.

$.post(url, data, function(data) {

Let me know if it not works.

$(".addtowatchlistform").submit(function(e) {
  e.preventDefault();
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.ajax({
      url: url,
      type: 'post',
      dataType: 'json',
      beforeSend: function() {
        $('#add_to_wishlist').css('color','red');
      },
      success: function(data) {
      }   
   });
});

$('#add_to_wishlist2').click(function(e){
  e.preventDefault();
  $(this).css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_to_wishlist" style="color:yellow;">Change Color</button>


<button id="add_to_wishlist2">Change Background Color</button>

edited Jul 20, 2017 at 4:48

answered Jul 20, 2017 at 4:29

Alex Mac

2,9931 gold badge24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Toby Over a year ago

This is a font bro

Alex Mac Over a year ago

So you want to change background-color or color?

Toby Over a year ago

I want to change color bro

Toby Over a year ago

This code is not receiving data from insertwatchlist.php file bro

Alex Mac Over a year ago

Please check my updated answer, and change your ajax post call accordingly

B. Desai · Accepted Answer · 2017-07-20 04:45:42Z

0

Try this you have to catch data return from your ajax request in function params

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { //<---------add data here
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); //Update this line
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>

edited Jul 20, 2017 at 4:45

answered Jul 20, 2017 at 4:37

B. Desai

16.4k5 gold badges28 silver badges48 bronze badges

3 Comments

Toby Over a year ago

Works but it change the color of all buttons, instead of just the clicked one. Do you know the solution sir?

Azad Over a year ago

if it works, you must select correct button try $(".addtowatchlistform button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

Toby Over a year ago

@azad it redirects me to insertwatchlist.php file

Mohammed Athar Imran Ahmed · Accepted Answer · 2017-07-20 04:34:22Z

0

Updated:

On further checking I found its not the css proper. Its your jquery post function problem.

You are missing data in the function. Use below; Let me know if it fix your issue.

 $.post(url, data, function(data) {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }

color property used for text color. Use background-color instead of color

For Background Color

 $("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

For Text Color

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

edited Jul 20, 2017 at 4:34

answered Jul 20, 2017 at 4:30

Mohammed Athar Imran Ahmed

6853 silver badges11 bronze badges

5 Comments

Toby Over a year ago

This is a font bro

Mohammed Athar Imran Ahmed Over a year ago

@Toby do a console log to check if data.watchlisticoncolor is returning correctly.

Toby Over a year ago

Console tab is empty

Toby Over a year ago

Works but it change the color of all buttons, instead of just the clicked one. Do you know the solution sir?

Mohammed Athar Imran Ahmed Over a year ago

You must vote up the answer. Otherwise all my efforts are wasted

Collectives™ on Stack Overflow

Change the color of a button using Jquery Ajax (Color received from external PHP file)

3 Answers 3

5 Comments

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related