display name using PHP

Question

<html>
<head>
<script>
function addstafflist()
{
    for(var i = 0; i < document.getElementById("stafflist").options.length; i++)
    {
        if(document.getElementById("stafflist").options[i].selected)
        {
             var staffname = document.getElementById("stafflist").options[i].text;
             var selectedstaffnamelist = document.getElementById("selectedstafflist");
             var found = false;

         for(var j = 0; j < selectedstaffnamelist.length; j++)
         {
             if(selectedstaffnamelist[j].text == staffname)
             {
                found = true;
                break;
             }
         }

        if(!found)
        {
            var option = document.createElement("option");
            option.text = staffname;
            selectedstaffnamelist.add(option);
        }
    }
}

</script>
</head>

<body>
<form action="test2.php" method="post">
<table border="0" width="300" style="border-collpase:collapse">
  <tr>
    <td width="50">
      <select id="stafflist" name="stafflist[]" style="width:70px;" multiple>
        <option value="ali@gmail.com">ali</option>
        <option value="abu@gmail.com">abu</option>
        <option value="ahmad@gmail.com">ahmad</option>
      </select>
    </td>

    <td width="30">
      <input type="button" name="add" value=">>" onclick="addstafflist()" />
    </td>

    <td>
      <select id="selectedstafflist" name="selectedstafflist[]" style="width:70px;" multiple>
      </select>
    </td>
  </tr>

  <tr height="20">
    <td colspan="3">
      <input type="submit" name="submit" value="Show" />
    </td>
  </tr>
</table>
</form>
</body>
</html>

<?php
if(isset($_POST['submit']))
{
    //[HERE]
}
?>

From above code, when I select ali, abu from the drop down list and click the Show button, I want to use PHP to show their email addresses (i.e ali@gmail.com, abu@gmail.com) after click the Show button in [HERE] section. Can someone help me?

You need to learn the differences between client-side and server-side. http://stackoverflow.com/a/13840431/3083093 — R3tep, Apr 08 '16 at 07:44

score 1 · Answer 1 · answered Apr 08 '16 at 07:42

Add the following code to foreach through all posted stafflists and echo emails;

<?php
if(isset($_POST['submit']))
{
    foreach($_POST['stafflist'] as $email){
        echo $email . "<br/>";
    }
}
?>

Although I'm not sure what you're using all of your JS for.

score 0 · Answer 2 · answered Apr 08 '16 at 07:53

I did some advices for your code. This is a right way, you need validate your submit:

<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <?php
        // If stafflist is array(), then you can go to loop
        if(is_array($_POST['stafflist']))
        {
            // Run the loop
            foreach($_POST['stafflist'] as $email)
            {
                // Show all emails per line
                echo $email . "<br/>";
            }
        }    
        ?>

        <form action="test2.php" method="post">
            <table border="0" width="300" style="border-collpase:collapse">
              <tr>
                <td width="50">
                  <select id="stafflist" name="stafflist[]" style="width:70px;" multiple>
                    <option value="ali@gmail.com">ali</option>
                    <option value="abu@gmail.com">abu</option>
                    <option value="ahmad@gmail.com">ahmad</option>
                  </select>
                </td>

                <td width="30">
                  <input type="button" name="add" value=">>" onclick="addstafflist()" />
                </td>

                <td>
                  <select id="selectedstafflist" name="selectedstafflist[]" style="width:70px;" multiple>
                  </select>
                </td>
              </tr>

              <tr height="20">
                <td colspan="3">
                  <input type="submit" name="submit" value="Show" />
                </td>
              </tr>
            </table>
        </form>

        <script>
            // Put all JS before end of body
            function addstafflist()
            {
                for(var i = 0; i < document.getElementById("stafflist").options.length; i++)
                {
                    if(document.getElementById("stafflist").options[i].selected)
                    {
                         var staffname = document.getElementById("stafflist").options[i].text;
                         var selectedstaffnamelist = document.getElementById("selectedstafflist");
                         var found = false;

                     for(var j = 0; j < selectedstaffnamelist.length; j++)
                     {
                         if(selectedstaffnamelist[j].text == staffname)
                         {
                            found = true;
                            break;
                         }
                     }

                    if(!found)
                    {
                        var option = document.createElement("option");
                        option.text = staffname;
                        selectedstaffnamelist.add(option);
                    }
                }
            }
        </script>
    </body>
</html>

score 0 · Answer 3 · answered Apr 08 '16 at 09:22

I used the php suggestion of Cristiano to check first if the POST is an array. I also agree that it's better to place the javascript near the end body tag, so with more scripts, there is less delay in the page rendering. Another good advice to be carefull with your code nesting. It makes it easier to read and debug... A missing bracket can make you loose precious time. ;)

I added only 3 line to your code, Michael. And I used the right POST, the selected ones. Tested working.

<html>
<head>
    <title>Example</title>
</head>

<?php
if(isset($_POST['submit']))
{
    //[HERE]
    // If stafflist is array(), then you can go to loop
    if(is_array($_POST['stafflist']))
    {
        foreach($_POST['selectedstafflist'] as $email){
            echo $email . "<br/>";
        }
    }
}
?>

<body>
<form action="test2.php" method="post">
    <table border="0" width="300" style="border-collpase:collapse">
        <tr>
            <td width="50">
                <select id="stafflist" name="stafflist[]" style="width:70px;" multiple>
                    <option value="ali@gmail.com">ali</option>
                    <option value="abu@gmail.com">abu</option>
                    <option value="ahmad@gmail.com">ahmad</option>
                </select>
            </td>

            <td width="30">
                <input type="button" name="add" value=">>" onclick="addstafflist()" />
            </td>

            <td>
                <select id="selectedstafflist" name="selectedstafflist[]" style="width:70px;" multiple>
                </select>
            </td>
        </tr>

        <tr height="20">
            <td colspan="3">
                <input type="submit" name="submit" value="Show" />
            </td>
        </tr>
    </table>
</form>

<script>
function addstafflist()
{
    for(var i = 0; i < document.getElementById("stafflist").options.length; i++)
    {
        if(document.getElementById("stafflist").options[i].selected)
        {
            var staffname = document.getElementById("stafflist").options[i].text;
            var staffemail = document.getElementById("stafflist").options[i].value;         // <-- Added this line
            var selectedstaffnamelist = document.getElementById("selectedstafflist");
            var found = false;

            for(var j = 0; j < selectedstaffnamelist.length; j++)
            {
                if(selectedstaffnamelist[j].text == staffname)
                {
                    found = true;
                    break;
                }
            }

            if(!found)
            {
                var option = document.createElement("option");
                option.text = staffname;
                option.value = staffemail;          // <-- Added this line
                option.selected=true;               // <-- Added this line
                selectedstaffnamelist.add(option);
            }
        }
    }
}   // <-- Added this missing bracket
</script>
</body>

display name using PHP

3 Answers3