当我添加ajax代码时，错误不计算点击次数

Question

When i add ajax code to save into server, it dosen't count my clicks.

I have 3 buttons each button means a type of error :

<button id="E1_<?= $c['code'] ?>">Type error 1</button>
<button id="E2_<?= $c['code'] ?>">Type error 2</button>
<button id="E3_<?= $c['code'] ?>">Type error 3</button>

This's my table :

  CREATE TABLE button_check
   (
      code varchar(255),
      button_1 int(11),
      button_2 int(11),
      button_3 int(11)
   );

Toggle Click function

$(function()
 {

 jQuery.fn.clickToggle = function(d,c){
    function cb(){ [d,c][this._tog^=1].call(this); }
    return this.on("click", cb);
 };

var all_errors = {'E1':0,'E2':0,'E3':0};

var btn1 = false;
btn2 = false;
btn3 = false;

  $("[id^='E1_']").clickToggle(function(){
    all_errors.E1++;
    console.log(all_errors);
},function(){
    if(all_errors .E1 > 0) all_errors .E1--;
});


    $("[id^='E2_']").clickToggle(function(){
    all_errors.E2++;
    console.log(all_errors);
},function(){
    if(all_errors .E2 > 0) all_errors .E2--;
});

 $("[id^='E3_']").clickToggle(function(){
    all_errors.E3++;
    console.log(all_errors);
},function(){
    if(all_errors .E3 > 0) all_errors .E3--;
});



  $.ajax({ url: 'data_insert.php',
   data: {id: value,value: all_errors},
   type: 'post',
   success: function(output) {
     console.log(output);
   }

});

data_insert.php :

    $servername = "localhost";
    $username = "username";
    $password = "password";
    $dbname = "myDB";
    $id = $_POST['id'];
    $value = $_POST['value'];
    try {      
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username,  $password);

    $sql = "INSERT INTO button_check (code,button_1, button_2,button_3) VALUES ('$code','$btn1', 'btn2', 'btn3')";
    $conn->exec($sql);
    catch(PDOException $e)
     {
      echo $sql . "<br>" . $e->getMessage();
     }
    } 

. enter image description here Please i need help. Thanks a lot.

Answer 1

I've tried to recreate your situation and test it locally. The code for clickToggle is unecessary from what you've told us you want to do. Try this code:

script.js

$(function()
{
  var all_errors = {'E1':0,'E2':0,'E3':0};

    $("[id^='E1_']").click(function(){
        all_errors.E1++;
        console.log('errors', all_errors);
        $.ajax({ url: 'data_insert.php',
            data: {code: 1, btn1: all_errors.E1, btn2: all_errors.E2, btn3: all_errors.E3},
            type: 'post',
            success: function(output) {
                console.log(output);
        }});
    });
});

This is code snippet for E1 button.

data_insert.php

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$code = $_POST['code'];
$btn1 = $_POST['btn1'];
$btn2 = $_POST['btn2'];
$btn3 = $_POST['btn3'];

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

    $sql = "INSERT INTO button_check (code,button_1,button_2,button_3) VALUES ($code,$btn1,$btn2,$btn3)";
    $conn->exec($sql);
} catch (PDOException $e) {
    echo $sql . "<br>" . $e->getMessage();
}