CODEWITHSUNDEEP
javascriptphphtml
LightFelcore
LightFelcore

Reputation: 29

Is it possible to run PHP code on second click on a button and not imidiately on first click?

Situation: I've a toggle_btn (switches Start / Stop --> value of the btn changes). When the page loads the value of the button is Start. When I hit the btn, the btn will toggle to Stop. The problem is that my php code runs when i hit the button for the first time (when i hit start), but I want the php code to be executed on the second click, when i click on Stop.

Is it possible to run the php code on second click on a btn?

HTML CODE:

<div id="row3">
    <form action="./includes/insert_data.php" method="POST" onsubmit="return check();">
        <div id="zone_area">
            <p><input type="text" name="zone_field" id="zone_field" placeholder="Enter a zone" autocomplete="off"></p>
        </div>
        <div id="button_area">
            <p><input type="submit" value="Start" id="toggle_btn" name="toggle_btn"></p>
        </div>
    </form>
</div>

JavaScript CODE

function check(){
    var zone_field = document.getElementById("zone_field");

    if(zone_field.value == ''){
        alert("Try again");
        return false;
    } else {
        second_check();
    }
}

function second_check(){
    var toggle_btn = document.getElementById("toggle_btn");

    if(counter == 0){

        //zone_field.disabled = true;
        toggle_btn.style.backgroundColor = "red";
        toggle_btn.style.border = "1px solid black";
        toggle_btn.value = "Stop";
        toggle_btn.style.transition = "all 0.2s ease";

        counter = 1;
    } else {
        var zone_table = document.getElementById("zone_table");
        var avg_div = document.getElementById("row5");

        //zone_field.disabled = false;
        toggle_btn.style.backgroundColor = "green";
        toggle_btn.value = "Start";
        toggle_btn.style.transition = "all 0.2s ease";

        $(avg_div).slideDown(300);
        zone_table.innerHTML = zone_field.value;

        zone_field.value = '';

        counter = 0;
    } 
}

PHP CODE:

<?php

include_once("./conn.php");

if(isset($_POST["toggle_btn"])){
    if(!empty($_POST["zone_field"])){

        $sql = "SELECT SUM(waarde) AS total_sum, COUNT(waarde) AS total_count FROM results";
        $res = $conn->query($sql);

        $Name = $_POST["zone_field"];
        $Time = 10;

        if ($res->num_rows > 0) {
            while($row = $res->fetch_assoc()) {

                $avg = $row["total_sum"] / $row["total_count"];

                $sql = "INSERT INTO measurements (Name, Time, AVG_ms) VALUES(?, ?, ?);";
                
                if($stmt = mysqli_prepare($conn, $sql)){
                    // Bind variables to the prepared statement as parameters
                    mysqli_stmt_bind_param($stmt, "sss", $Name, $Time, $avg);
                    mysqli_stmt_execute($stmt);
                    
                    header("Location: ../results.php");
                } else{
                    echo "ERROR: Could not prepare query: $sql. " . mysqli_error($conn);
                }
            } 
        } else {
            echo "No rows have been found";
        }
        $conn->close();
    }
} else {
    echo 'Did not hit the btn';
}
?>

Upvotes: 0

Views: 488

Answers (2)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

You can use the following JS code to control button's behaviour and then call your PHP page:

var button = document.getElementById("clickTwice");
button.onclick = () => {
    if (button.innerHTML !== "Click me again") {
        button.innerHTML = "Click me again";
    } else {
        button.innerHTML = "Submitted";
        // Do whatever you want, like sending data with fetch() or XMLHttpRequest().
    }
    return false;
};
<button id="clickTwice">Click me</button>

Upvotes: 0

DoubleJG
DoubleJG

Reputation: 83

You will need to keep track of if the button has been pressed before, if you want it to alternate between options depend if its stopping or starting you can do something like this

var numberOfClicks = 0; 

function clickHandler() { 
  numberOfClicks++;
  if (numberOfClicks % 2 == 1) {
    // Enters statement when clicks are odd eg 1, 3, 5 etc.  
    // Logic for when button is 'start'
  } else { 
    // Other numbers 2, 4, 6 etc.
    // Logiic for when button is 'stop'
  } 
}

Upvotes: 1

Related Questions