0

Hello everyone? I hope someone will help me with this. Can anyone show me how can I popup my Notfy javascript toast? I want to popup it after I click my "Register" button. Thank you in advance. Btw, here is my code.

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="notyf/notyf.min.css">
</head>
<body>
    <form action="" method="POST">
        <input type="text" name="user"/>
        <input type="text" name="pass"/>
        <button type="submit" onclick="myFunc()" name="submit">Register</button>
    </form>

    <?php
        if (isset($_POST["submit"])) {
            if (!empty($_POST["user"]) && !empty($_POST["pass"])) {
                $user = $_POST["user"];
                $pass = $_POST["pass"];
                $conn = new mysqli("localhost", "root", "") or die (mysqli_error());
                $db = mysqli_select_db($conn, "toast") or die ("DB Error!");
                $query = mysqli_query($conn, "SELECT * FROM user WHERE user='".$user."'");
                $numrows = mysqli_num_rows($query);
                if ($numrows == 0) {
                    $sql = "INSERT INTO user(user, pass) VALUES('$user', '$pass')";
                    $result = mysqli_query($conn, $sql);
                    if ($result) {
                        echo "<script src='notyf/notyf.min.js'></script>";
                        echo "<script>";
                        echo    "function myFunc() {";
                        echo        "var notyf = new Notyf();";
                        echo        "notyf.confirm('Success!');";
                        echo    "}";
                        echo "</script>";
                    } else {
                        echo "Failure!";
                    }
                } else {
                    echo "Already exist! Please try again.";
                }
            }
        }
    ?>
</body>
</html>
  • Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use prepared statements with bound parameters, via either the [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) drivers. [**This post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) has some good examples. – Alex Howansky Nov 28 '17 at 18:17
  • **Never** store plain text passwords. Instead use [`password_hash()`](http://us3.php.net/manual/en/function.password-hash.php) and [`password_verify()`](http://us3.php.net/manual/en/function.password-verify.php). If you're using a version of PHP prior to 5.5, do **not** use MD5 or SHA1 to hash passwords. Instead you can use [this compatibility pack](https://github.com/ircmaxell/password_compat). – Alex Howansky Nov 28 '17 at 18:17

1 Answers1

0

Perhaps you should use an AJAX request to save your data. Put your code in another php file like so:

if (isset($_POST["submit"])) {
        if (!empty($_POST["user"]) && !empty($_POST["pass"])) {
            $user = $_POST["user"];
            $pass = $_POST["pass"];
            $conn = new mysqli("localhost", "root", "") or die (mysqli_error());
            $db = mysqli_select_db($conn, "toast") or die ("DB Error!");
            $query = mysqli_query($conn, "SELECT * FROM user WHERE user='".$user."'");
            $numrows = mysqli_num_rows($query);
            if ($numrows == 0) {
                $sql = "INSERT INTO user(user, pass) VALUES('$user', '$pass')";
                $result = mysqli_query($conn, $sql);
                if ($result) {
                   echo "success";
                } else {
                    die("Failure!");
                }
            } else {
                die("Already exist! Please try again.");
            }
        }
    }

And then call this php file using AJAX,

$.ajax({
    url: "path/to/your/php/file.php",
    method: "POST",
    data: {
        "submit": true,
        "user": "user",
        "pass": "pass"
    },
    success: function(data){
        //The request was a success
        var notyf = new Notyf();
        notyf.confirm("Success!");
    },
    error: function(error) {
        //There was an error
        console.error(error);
    }
});

Be warn that I did not test the code.

Nicolas
  • 8,077
  • 4
  • 21
  • 51
  • Ok, I will try this method. Thank you. –  Nov 28 '17 at 16:08
  • Hello? I've already tried your code. It means that there is no error in submitting the data to the database. But the Notfy javascript toast is not working. –  Nov 28 '17 at 16:22
  • add an `console.log('test')` to your success callback, and if it shows up, it means your toast is not working, – Nicolas Nov 28 '17 at 16:25
  • Yeah, I also think the toast is not working properly. When I change the success callback to your suggestion and also tried using alert. It is now working properly. Btw, thank you very much for the help. –  Nov 28 '17 at 16:34
  • No Problem, Glad I could help ! – Nicolas Nov 28 '17 at 16:34