CODEWITHSUNDEEP
javascriptphp
user5987554
user5987554

Reputation:

JavaScript implemented in PHP code | if-statement not working

I'm in a bit of a problem and cannot seem to spot my mistake. Here's why:

I want to use a simple PHP if-statement to check if my form has been submitted and if it has, open a JavaScript confirm dialogue to eventually execute deletion from the database. But the code always circles through the wrong statement and it says: "Deleting has been cancelled." (code below). Thanks for your time.

PHP code:

if (!isset($_POST['delButton'])){
echo "Selection is followed by a confirming window.";
  }
  else if(isset($_POST['delButton']) && isset($_POST['s_name'])){
if(jsconfirm()){
  $sql = MySQL_query("DELETE FROM table_1 WHERE name = \"".$_POST['s_name']."\"");
    if($sql){
      jsalert("Entry has been deleted!");
    }else{
      jsalert("Deleting went wrong.");
    }
}else{
  jsalert("Deleting has been cancelled.");
}
  }

Javascript:

function jsalert($s) {
    echo "<script>";
    echo "alert(\"".$s."\");";
    echo "</script>";
  }

  function jsconfirm(){
    echo "<script>";
    echo "if(confirm(\"Delete Account?\")){return true;}else{return false;}";
    echo "</script>";
  }

Upvotes: 0

Views: 318

Answers (2)

J. Brink
J. Brink

Reputation: 99

Perhaps this will help a bit. I'm a beginner myself but this is how I would solve this:

You haven't provided your HTML form, but I have a simple example. This could be a list of the names of your friends and a delete button to wipe them from your friends list. The basic HTML would look something like this:

<!DOCTYPE html>
<html>
<body>
<form>
<p>Peter</p><button>Delete</button>
<p>Frank</p><button>Delete</button>
<p>John</p><button>Delete</button>
</form>

You ultimately want this form to submit data to your PHP function. So you need to tell the form where to send the information upon submit. That's done within the opening tag of the form, like on line 4. 

<!DOCTYPE html>
<html>
<body>
<form action="test.php" method="post" id="myForm">//meaning I'm sending the data in the form by *POST* to the file *test.php* in the same folder. The file test.php contains the php code that will update the database.
<p>Peter</p><button >Delete</button>
<p>Frank</p><button >Delete</button>
<p>John</p><button >Delete</button>
</form>

Then you have to have a button to actually trigger the submit action. You can add that function to each Delete button, as below.

<!DOCTYPE html>
<html>
<body>
<form action="test.php" method="post" id="myForm">
<p>Peter</p><button type="submit" >Delete</button>
<p>Frank</p><button type="submit" >Delete</button>
<p>John</p><button type="submit" >Delete</button>
</form>

So, if you would click on Delete now, the data would be posted to your php file. But you don't want that to happen yet! You want to serve a pop-up to your user first and get confirmation. So you make the button trigger a JS function, like this:

<!DOCTYPE html>
<html>
<body>
<form action="test.php" method="post" id="myForm">
<p>Peter</p><button type="submit" onclick="jsalerts()">Delete</button>
<p>Frank</p><button type="submit" onclick="jsalerts()">Delete</button>
<p>John</p><button type="submit" onclick="jsalerts()">Delete</button>
</form>

So, as soon as the Delete button is clicked, the function jsalerts() is executed. This should of course create the confirm box. The basic function could work like this (modified from the JS tutorial at www.w3schools.com):

function jsalerts() {
if (confirm("Press a button!") == true) {
    alert("Deleting has been confirmed.");
} else {
    alert("Deleting has been cancelled.");
}
}

Trouble is, this function does not stop the Submit action. So regardless of the user's choice, the form will be submitted. And if the user clicked Cancel, that's not what you want. On the other hand, if the user clicked Confirm, you don't want to serve him an alert, you just want the form to continue submitting.

So essentially you want to prevent the default behaviour "submit" of your Delete button if the user clicks Cancel. And JS has a method just for that, unsurprisingly called the preventDefault method. You could implement it like this:

function jsalerts() {
if (confirm("Press a button!") == false) {
    alert("Deleting has been cancelled.");
event.preventDefault();
}

So this way the normal process of submitting the form would commence, except when the user clicks cancel.

This means that in your PHP you would only have to create the update database logic and not bother with the cancel or confirm.

So, to wrap it up, this would be your HTML:

<!DOCTYPE html>
<html>
<body>
<form action="test.php" method="post" id="myForm">
<p>Peter</p><button type="submit" onclick="jsalerts()">Delete</button>
<p>Frank</p><button type="submit" onclick="jsalerts()">Delete</button>
<p>John</p><button type="submit" onclick="jsalerts()">Delete</button>
</form>

and this would be your JavaScript:

function jsalerts() {
if (confirm("Press a button!") == false) {
    alert("Deleting has been cancelled.");
event.preventDefault();
}

Let me know if it works. And if any more experienced coders have input that can improve my work, please comment. Thanks.

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32511

It's not that your if statement isn't working. It's that you aren't actually communicating between JS and PHP.

When you load a page using a PHP script, then what you echo out becomes the contents of the page.

For example, this PHP would produce this HTML/JS:

<?php
echo "<script>";
echo "alert('hello');"
echo "</script>";
?>

-

<script>
alert('hello');
</script>

If you serve up this file, you will see a page that shows you an alert box stating 'hello'. But that JS code doesn't execute until your PHP code is finished running. So your JS does not communicate with your PHP at all.

If you want something to happen on your server as the result of something done with JS, you're going to need to use AJAX. There are numerous tutorials around the Internet that cover this topic, as it tends to be a bit broad for a Stack Overflow answer.

Upvotes: 1

Related Questions