2

I have this div area in my index and I want to use it as a button (for graphical issues) and when this button is cliked I want it to send this value to php file and I want to return some values according to this value. Here is what I've done this far but it didn't work at all.

this is my output.php (index)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"> 
	int sayac = 1;
	$(document).delegate("#klikme", "click", function() {
		$.post('sayac.php',{"komut": sayac }, function(data){
			$('#output').html(data);
		});
		sayac = sayac + 1;
	});
</script>
<div id = "klikme">
	KLİK ME!
</div>
<div id = "output">
    <?php include 'sayac.php'?>
</div>

sayac.php

if(isset($_POST["komut"]))
{
    switch($_POST["komut"])
    {
        case 1:
            echo "This is one";
            break;
        case 2:
            echo "This is two";
            break;
        default:
            echo "Something is wrong";
            break;
    }
}
return false;
1
  • Use var instead of int in javascript. Commented Jun 28, 2015 at 13:06

5 Answers 5

1

Within your php file, you forgot a break statement within the case 2, that results with a problem.

if(isset($_POST["komut"]))
{
    switch($_POST["komut"])
    {
        case 1:
            echo "This is one";
            break;
        case 2:
            echo "This is two";
            break;
        default:
            echo "Something is wrong";
            break;
    }
}

Also if I were you I'd reconfigure the html like below, but it's up to you. Thus, to define a variable in javascript, you need to use var keyword.

<div id="klikme">
    KLİK ME!
</div>
<div id="output"></div>
<script type="text/javascript">
    var sayac = 1;
    $(document).delegate("#klikme", "click", function() {
        $.post('sayac.php',{"komut": sayac++ }).success(function(data){
            $('#output').html(data);
        });
    });
</script>
Sign up to request clarification or add additional context in comments.

2 Comments

Break statement didn't actually matter that much but thank you.
click twice, after that you will see an unexpected output This is twoSomething is wrong.
1

Correct version of this script is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
(function($) {
  var counter = 1;
  $(document).ready(function() {
    $('#clickme').on("click", function(){
      counter++; // first increment counter
    	$.post('http://localhost/index.php', {"counter" : counter }, function(data) { 
    		$('#output').html(data);
    	});
    	$('#counter').text(counter);
    });
  });
})(jQuery);
</script>
<div id="clickme">Click ME!</div>
<div id="counter">1</div>
<div id="output"><?php include 'index.php'; ?></div>

Notice few things:

  • Whole code is close in function (function($) { }(jQuery) it's because of variable scope
  • A page can't be manipulated safely until the document is "ready" we have everything closed in $(document).ready(function() { });
  • We are using on() instead of delegate() since jQuery 1.7
  • It's safer use whole url when you call $.post()

And your PHP file can be like this (see $_REQUEST):

<strong><?php echo intval($_REQUEST['counter']); ?></strong>

Comments

0

it's not working because you got errors, fix them and try again.

change int sayac = 1; to sayac = 1; in output.php

change default to default: in sayac.php

1 Comment

I was corrected the switch before sending this. But I will try changing the value type. Thank you.
0

I would wait until the document has finished loading before binding your JavaScript events to the page, this is because in some browsers your code will begin executing before the element you are trying to bind too exists meaning your event is not binded.

I would re-write your JS code like so:

var sayac = 1;
$(document).ready(function() {

    $(document).delegate("#klikme", "click", function() {
        $.post('sayac.php',{"komut": sayac }, function(data){
            $('#output').html(data);
        });
        sayac = sayac + 1;
    });
});

However, given the nature of delegate you would believe this not to be a problem - and the likely cause is the JS error from int sayac, as mentioned below.

1 Comment

Thank you I will add this to my page and will use this. Very helpfull.
0

There are 2 minor syntax errors in your code, that broke it:

Javascript:

//This is not C, define a variable with "var", not int sayac
var sayac = 1;

PHP:

switch($_POST["komut"])
{
    case "1":
        echo "This is one";
        break;
    case "2":
        echo "This is two";
        break;//<- put "break" here to print only the message for 2
    default: //<- put ":" here
        echo "Something is wrong";
        break;
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.