0

HTML:

<?php
            $username = "trainerapp";
            $password = "password";
            $hostname = "localhost";
            $link = @mysql_connect($hostname, $username, $password);

            if(@mysql_select_db("trainer_registration"))
            { 
                $check_query = @mysql_query("select id,program_name, company, date_prog from program_details");
                while($row = @mysql_fetch_assoc($check_query)){ 

                        # code...
                    ?>
                <div class = "container content-rows">
                    <div class = "col-md-1" id = "snocontent"><?php echo $row['id'] ?></div>
                    <div class = "col-md-3" id = "pgnamecontent"><?php echo $row['program_name'] ?></div>
                    <div class = "col-md-3" id = "cmpcontent"><?php echo $row['company'] ?></div>
                    <div class = "col-md-2" id = "datecontent"><?php echo $row['date_prog'] ?></div>
                    <button onclick="add_trainers()" ><span class = "glyphicon glyphicon-king" class = "addtrainersbutton" id ="addtrainersbutton" title = "Add Trainers" ></span></button>
                    <span class = "glyphicon glyphicon-pencil" id = "editprogrambutton" title = "Edit Program"></span>
                    <span class = "glyphicon glyphicon-user" id = "assigntrainersbutton" title = "Assign Trainers for the Program"></span>
                    <span class = "glyphicon glyphicon-remove" id = "deleteprogrambutton" title = "Delete the Program"></span>



                </div>
            <?php       }}
             else {

            }


        ?>
        <div class = "addtrainers" id = "addtrainersblock" hidden = "true">
                        <?php
                                $email_query = @mysql_query("select email_id from facilitator_details");
                                $check_query = @mysql_query("select firstname,lastname from facilitator_details"); 
                                while($row = @mysql_fetch_assoc($check_query)) { ?>
                                <input type = "checkbox" name = "trainernames"id = "checkboxtrain"  value ="<?php echo $row["firstname"]." ".$row["lastname"] ?>" name = "trainerbox">
                                <?php echo $row["firstname"]." ".$row["lastname"] ?> </input></br>
                                <?php   }  ?>
                                <button class="btn btn-default" id = "sendemail">Send Email</button>
                    </div>
                    <div class = "editprogramdetails" id = "editprogramblock" hidden = "true">
                        <form class="form" action="#" id="update" method ="POST">
                        <?php

                            $programid_query = @mysql_query("select id,program_name,company,date_prog from program_details");
                            $row = @mysql_fetch_assoc($programid_query);
                            ?>
                            ID: <input type = "text" id = "programnum" value = "<?php echo $row["id"] ?>" readonly/><br>
                            Program Name: <input type = "text" id = "prognameedit" placeholder = "<?php echo $row["program_name"] ?>"/><br>
                            Company Name: <input type = "text" id = "compnameedit" placeholder = "<?php echo $row["company"] ?>"/><br>
                            Date: <input type = "date" id = "dateedit" placeholder = "<?php echo $row["date_prog"] ?>"/><br>

                            <input type="button" class = "btn btn-default" id = "updatebutton" value ="Update"></input>
                        </form>
                    </div>

The script file is in the same php file: SCRIPT FILE:

<script>
        $(document).ready(function() {

                $("#addtrainersbutton").click(function(){
                $("#addtrainersblock").toggle();
                $("#editprogramblock").hide();
                });

                $("#editprogrambutton").click(function(){
                $("#editprogramblock").toggle();
                $("#addtrainersblock").hide();
                });


    $("#updatebutton").click(function(){
        var programidphp = $("#programnum").val();
        var programnamephp = $("#prognameedit").val();
        var companynamephp = $("#compnameedit").val();
        var datephp = $("#dateedit").val();

        var updaterequest = {
            upprogid : programidphp,
            upprognam : programnamephp,
            upcompnam : companynamephp,
            uppdate : datephp,
        };
        $.post("/TrainerApp/update_program.php", updaterequest).done(function(data){
            alert(data);
        }).fail(function(){
            alert("Failed");
        });

    });

    $("#sendemail").click(function(){
    $('input[name="trainernames"]:checked').each(function() {
        var f_name=this.value.split(" ")[0];
        var l_name=this.value.split(" ")[1];
        console.log("fname:",f_name);
        console.log("lname:",l_name);

        var trainee_list = [{
            first_name : f_name,
            last_name: l_name
        }];
        console.log(trainee_list);
    });
    });
});
function add_trainers() {
                console.log("in add trainers function");
                $("#addtrainersblock").toggle();
                $("#editprogramblock").hide();
            }
        </script>

Problem:

The button "addtrainersbutton", "editprogrambutton" display the necessary fetched content only for the first row of values returned by mysql_fetch_assoc. For the other rows the buttons don't work. Please have a look at the code and let me know what mistake is done here.

Vignesh Anandakumar
  • 167
  • 1
  • 3
  • 12
  • 3
    Please, [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://jayblanchard.net/demystifying_php_pdo.html). – Jay Blanchard Apr 28 '15 at 19:03
  • 2
    can't repeat ID's in a page, they are unique by definition – charlietfl Apr 28 '15 at 19:05
  • When outputting values from any datasource to a webpage, they must be sanitized otherwise your codebase is vulnerable to XSS hacks. The easiest way is to create a wrapper function and call it everytime with qhtml($row[whatever]) and that wrapper function is just like function qhtml($value) { return htmlentities($value); } – TravisO Apr 28 '15 at 19:09

1 Answers1

3

You have duplicated id's and that will not work. Change them to classes to get them to work. For example change

$("#addtrainersbutton").click(function(){

to

$(".addtrainersbutton").click(function(){

Once done you will have to modify your HTML accordingly.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • Class names are also not working. But when I replaced jquery code with javascript function for button click, it works fine. Can you please tell me the reason for this issue between jquery and javascript. HTML CODE: JAVASCRIPT: function add_trainers() { console.log("in add trainers function"); $("#addtrainersblock").toggle(); $("#editprogramblock").hide(); } – Vignesh Anandakumar Apr 28 '15 at 19:38
  • It would be hard for me to guess @VigneshAnandakumar. Did you also change to the class names on the HTML elements? – Jay Blanchard Apr 28 '15 at 19:38
  • Yes I did. But it didn't work. When I added a javascript onclick function and called the js function onclick of button, the whole thing works as it supposed to be. I am confused of this behavior of js and jquery. If you find answers, please do notify me. – Vignesh Anandakumar Apr 28 '15 at 19:48
  • @VigneshAnandakumar it would be impossible for me to know what is going on in your situation. It is likely you will need to modify your code to account for items related to the currently clicked button, else one click will cause multiple actions to occur. – Jay Blanchard Apr 28 '15 at 19:52
  • Have you *included* jQuery in your project? have you looked at the console for errors? – Jay Blanchard Apr 28 '15 at 20:11
  • There are no errors in console too. Console works fine for first button but doesn't work for the others buttons and doesn't throw any errors too. – Vignesh Anandakumar Apr 28 '15 at 20:48
  • We'd have to see you markup to make any further assessments @VigneshAnandakumar – Jay Blanchard Apr 28 '15 at 20:50