submiting with ajax and displaying the data on input or div - php

Question

I have this php script to count button clicks to a txt file
<?php
if (isset($_POST['clicks1'])) {
incrementClickCount1();
}
function getClickCount1() {
return (int) file_get_contents("count_files/clickcount1.txt");
}
function incrementClickCount1() {
$count = getClickCount1() + 1;
file_put_contents("count_files/clickcount1.txt", $count);
}
if (isset($_POST['clicks2'])) {
incrementClickCount2();
}
function getClickCount2() {
return (int) file_get_contents("count_files/clickcount2.txt");
}
function incrementClickCount2() {
$count2 = getClickCount2() + 1;
file_put_contents("count_files/clickcount2.txt", $count2);
}
?>
this is my html
<?php
include ('counter.php');
?>
<div class="count_right"><?php echo getClickCount1(); ?></div>
<div class="count_left"><?php echo getClickCount2(); ?></div>
<form action="counter.php" method="post" >
<button type="submit" class="vote_right" name="clicks1" ></button>
<button type="submit" class="vote_left" name="clicks2"></button>
</form>
What I'm trying or want to do is to update the counts on the divs but without refreshing the page.
I've tried using ajax but could not get the click value to show in the divs.
i thought about using text feilds insted, but dont realy know how.
This is a part of my jquery ajax code i used :
$('.vote_right, .vote_left').click(function(){
$.ajax({
url: 'counter.php',
type: 'post',
dataType:'html', //expect return data as html from server
data: $('.form1').serialize(),
});
});
I assume i made a bit of a mess, but thats why I'm here :)
EDIT
thanks guys, forgot to mention.. the code works but my problame is that its:
refreshes the page after submiting
not working when i use onSubmit="return false"
not displaying changes with e.preventDefault();

Answer 1

Add e.preventDefault(); to your click handler:
$('.vote_right, .vote_left').click(function(e){
e.preventDefault();
$.ajax({
url: 'counter.php',
type: 'post',
dataType:'html', //expect return data as html from server
data: $('.form1').serialize(),
});
});

Answer 2

You should use ajax.
Html
<?php
include ('counter.php');
?>
<div class="vote_right"><?php echo getClickCount1(); ?></div>
<div class="vote_left"><?php echo getClickCount2(); ?></div>
<form action="counter.php" method="post" >
<input type="button" class="vote_right" name="clicks1" >
<input type="button" class="vote_left" name="clicks2" >
</form>
jquery
$('.vote_right, .vote_left').click(function(){
class_count = $(this).attr("class");
count = $("."+class_count).text();
type = class_count == "vote_right" ? "right" : "left";
$.ajax({
url: 'counter.php',
type: 'post',
data: {"type": type,"count" : count},
success: function(data){
$("."+class_count).text(data);
}
});
});
In your php you will get which button it clicked by $_REQUEST["type"](left or right) and current count of this button by $_REQUEST["count"] . Add these lines at the top of your php file.
php
if(isset($_REQUEST["type"]){
if($_REQUEST["type"] == "right" )
$_POST['clicks1'] = "1";
else
$_POST['clicks2'] = "1";
}
It should done your work;