在程序的不同阶段使用Snack bar功能的不同元素

Question

As a beginner, I've defined a snack bar function(snackbarfunction) and there are 3 elements which should be shown in different stages of the program(For instance,when user enters email the message 'Successful, Thanks' should be shown by snack bar) thus, I was going to separate elements by a variable from my PHP page. However, the variable isn't detectable either in JS or HTML part.

Is there any different way except the way I'm working on?

there is the form:

<?php

     require_once "indexRequest.php";

 ?>
                <form class="news-letter" id="email-form" method="post" action="indexRequest.php">
                 <div class="subscribe-hide">
                        <input class="form-control" type="email" id="subscribe-email" name="email" placeholder="Email Address" required>
                        <button onclick="snackbarfunction()"  id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i>
                        </button>
                       <span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span> 

                        <div id="snackbarrepeated">Email already exists.</div>
                        <div id="snackbardone">Successful, Thanks.</div>
                        <div id="snackbarfailed">Unsuccessful, Please try again.</div>


                  </div>
                </form>

                <br>

                <p class="section-description">
                    We Will Notify You!
                </p><!-- /.section-description -->
                <br>
            </div>
        </div>
        <br> <br>


    </div>
    <!-- /.container -->
</div>
<!-- /.pattern -->
</section>

function snackbarfunction() {
    <?php  if(!is_null($status)) { ?>
    var x = document.getElementById("snackbarfailed");
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

    var y = document.getElementById("snackbarrepeated");
    y.className = "show";
    setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);

    var z = document.getElementById("snackbardone");
    z.className = "show";
    setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
    <?php  } ?>
}
</script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function() {
    });
});
</script>
</body>
</html>

and that's my PHP codes:

<?php

require_once "DB.php";

        $status = null;


        if($_SERVER["REQUEST_METHOD"] == "POST")
        {
            $status = "s";
            $email = $_POST['email'];
            if(filter_var($email , FILTER_VALIDATE_EMAIL) && htmlspecialchars($_POST['email']))
            {
                $conn = connectToDB();
                if( ! userGet($email , $conn))
                {
                    userSave($email , $conn) ? $status = "Done" : $status = "Not-Done";

                }
                else
                {

                    $status = "Duplicated";

                }
            }

        }

        ?>

Thanks in advance for any help you are able to provide.

Answer 1

First thing, the php scrips runs on the server side and the js, run on the client side, so it wont be possible to do what you are trying to do without both sides "talking" to eachother. I can see that you made a ajax, that's one way to make that communication happen.

Second thing: You php script needs to send a response to the ajax. I believe the common way to do so is to use json response. At the end of your .php you should place the following code:

header('Content-Type: application/json');
echo json_encode($status);

Now you need to make the js read the response and do something with it. You'll have to add a response on the form, so that the js knows that you will use it somehow

$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function(response) {
         console.log(response); //here you will have your $status variable, but readable from js.
         // now you shoul call the function to make the changes on the page
         snackbarfunction(response);
    });
});

Obs1: I place a console.log('response') because the $status may not be directly the responsevariable, it may be inside the response, like this: response.data

I took the liberty to change your function to use the JS variable:

function snackbarfunction(response) {
    if(response == "Done"){
       var z = document.getElementById("snackbardone");
       z.className = "show";
       setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
    }else if(response == "Duplicated"){
        var y = document.getElementById("snackbarrepeated");
        y.className = "show";
        setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
    }else{
        var x = document.getElementById("snackbarfailed");
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
    }
}

UPDATES

Create a new file in the same directory of the form:

<?php

require_once "DB.php";
$status = null;
if($_SERVER["REQUEST_METHOD"] == "POST")
{
    $status = "s";
    $email = $_POST['email'];
    if(filter_var($email , FILTER_VALIDATE_EMAIL) && htmlspecialchars($_POST['email']))
    {
        $conn = connectToDB();
        if( ! userGet($email , $conn))
        {
            userSave($email , $conn) ? $status = "Done" : $status = "Not-Done";

        }
        else
        {
            $status = "Duplicated";
        }
    }

}

header('Content-Type: application/json');
echo json_encode($status);

Your form page:

The rest of the file...

            <form class="news-letter" id="email-form" method="post" action="send_mail.php">
                 <div class="subscribe-hide">
                        <input class="form-control" type="email" id="subscribe-email" name="email" placeholder="Email Address" required>
                        <button onclick="snackbarfunction()"  id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i>
                        </button>
                       <span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span> 

                        <div id="snackbarrepeated">Email already exists.</div>
                        <div id="snackbardone">Successful, Thanks.</div>
                        <div id="snackbarfailed">Unsuccessful, Please try again.</div>


                  </div>
                </form>

                <br>

                <p class="section-description">
                    We Will Notify You!
                </p><!-- /.section-description -->
                <br>
            </div>
        </div>
        <br> <br>


    </div>
    <!-- /.container -->
</div>
<!-- /.pattern -->
</section>
<script>
    function snackbarfunction(response) {
        if(response == "Done"){
           var z = document.getElementById("snackbardone");
           z.classList.add('show');
           setTimeout(function(){ z.classList.remove('show'); }, 3000);
        }else if(response == "Duplicated"){
            var y = document.getElementById("snackbarrepeated");
            y.classList.add('show');
           setTimeout(function(){ y.classList.remove('show'); }, 3000);
        }else{
            var x = document.getElementById("snackbarfailed");
            x.classList.add('show');
           setTimeout(function(){ x.classList.remove('show'); }, 3000);
        }
    }
// wait for the DOM to be loaded
$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function(response) {
         console.log(response); //here you will have your $status variable, but readable from js.
         // now you shoul call the function to make the changes on the page
         snackbarfunction(response);
    });
});
</script>
</body>
</html>

I change className to classList because if the element has another class, it would be replaced. Like this:

<div id="a" class="a b"></div>
<script>
document.getElementById("a").className = "c"; // The element would lose class a and b and only have c
document.getElementById("a").classList.add("c");//The element would have class a,b and c 
</script>
```

Obs2: The code may need some changes, like i pointed on obs1, but if you debug the code you should have no problem with that.