Edit and display variable in php file from javascript on html web page

Question

What I'm looking to to is create a variable in a php file on my server called "likes"

Then, on my html web page, I want to have a like button, that when clicked used javascript to edit the variable "likes" in that php file and adds 1. There will be a little place on the page above the like button that shows the total number of likes.

WHAT I HAVE:

PHP FILE: "index.php"

<?php
$likes=0;

/** Load likes page START */
require( dirname( __FILE__ ) . '/likespagestart.html' );
echo $likes;
/** Load likes page END */
require( dirname( __FILE__ ) . '/likespageend.html' );
?>

HTML FILE: "likepagestart.html"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Likes Page</title>

<script type="text/javascript">
var count = 0;
function countClicks() {
 count = count + 1;
    document.getElementById("p2").innerHTML = count;
}
</script>

</head>

<body>
This is the likes page!
<br/>
Number of likes: <p id="p2">0</p>

HTML FILE: "likepageend.html"

<br/>
<a href="javascript:countClicks();">Like</a>
</body>
</html>

View on my website: www.stevenhower.com/phpinclude/likes (The first 0 is the javascript only, the second 0 is the php variable.

So right now, I just have a silly javascript function, and can't actually edit the variable in the php file...

Can you show some attempt at solving this problem? S.O. works best when users can help you modify your code rather than just write solutions for you. — JakeParis, Oct 30 '14 at 18:53
While this isn't a huge application, there are quite a lot of separate parts to it. What problem are you having and with which part? — Quentin, Oct 30 '14 at 18:54
You will need to use AJAX or POST back the information to a php handler. — Joe Swindell, Oct 30 '14 at 19:12
I've updated the question with what I have. Thank you all for your time so far :) — Steve, Oct 30 '14 at 19:24

score 0 · Answer 1 · answered Oct 30 '14 at 19:33

0

Create a url that will handle all the backend logic to update your 'likes' and then create an ajax call with a post method to hit that url. I recommend using the jQuery javascript framework with this method: http://api.jquery.com/jquery.post/

$.ajax({
  type: "POST",
  url:'/update_likes.php',
  data: {
   'likes': updated_counter
  },
  success: function(){
   // Update view logic
  },
  dataType: 'json'
});

Something like that

answered Oct 30 '14 at 19:33

mxlfa

95
8

Thank you for your reply! Any way you could look at the code in my post, and update this code to function with the content I have? I've tried and can't seem to get it... – Steve Oct 30 '14 at 19:42

Edit and display variable in php file from javascript on html web page

1 Answers1