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").data('tooltip', data.addremove + " TO YOUR WATCHLIST");
$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
} catch (e) {
console.log("json encoding failed");
return false;
}
});
return false;
});
</script>
insertwatchlist.php
code
<?php
$response = new \stdClass();
$response->addremove = "item1";//you can get the data anyway you want(e.g database)
$response->watchlisticoncolor = "red";
die(json_encode($response));
?>
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: {"addremove":"item1","watchlisticoncolor":"red"}
and, the Jquery code place them in place of: $addremove
and $watchlisticoncolor
variable, in the real time without reloading the page.
Original Result:
First point of expected result works fine.
Second point of expected result do nothing (no error)