Reputation: 29
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
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
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