Option Menu with 2 Values

Question

I have the following option menu in a form that will insert the fields into a table:

<option value="">select staff</option>
    <?php
    do {  
    ?>
<option value="<?php echo $row_Staff['Staff_Name']."||".$row_Staff['Email']?>">
<?php echo $row_Staff['Staff_Name']?></option>
                    <?php
    } while ($row_Staff = mysql_fetch_assoc($Staff));
      $rows = mysql_num_rows($Staff);
      if($rows > 0) {
          mysql_data_seek($Categories, 0);
          $row_Staff = mysql_fetch_assoc($Staff);
      }
    ?>
                  </select>

I have 2 fields from source table in value of option from technique explained in How to post two values in an option field?: Staff_Name and Email.

I am trying to insert both fields from the form into a table using:

<input type="hidden" name="Staff_Name" class="form-control" id="Staff_Name" value=<?php 
$staff =$_POST['Staff_Data'];  
$staff_name = explode("||", $staff);
echo $staff_Name[0];  
?> />

and

<input type="hidden" name="Email" class="form-control" id="Email" value=<?php 
    $staff =$_POST['Staff_Data'];  
    $email = explode("||", $staff);
    echo $email[1];  
    ?> />

Unfortunately, I can see the 2 fields separated by "||" in the table if I insert the option menu value but cannot seem to insert Staff_Name or Email into individual fields. On insert both fields are blank. Any help would be appreciated.

Rahul Patel · Accepted Answer · 2016-07-21T14:19:52.677

Instead of combine staffname and staffemail in the dropdown value. Please staffname in dropdown value and staffemail in the property of dropdown and onchange of the dropdown set those values in the hidden inputs so you will easily get those values on the form submission. Please go through below code and let me know if you have any query.

//Dropdown

<select id="ddStaff">
    <option value="">select staff</option>
    <?php
        do {  ?>
            <option value="<?php echo $row_Staff['Staff_Name']; ?>" staff-email = "<?php echo $row_Staff['Email'];?>">
                <?php echo $row_Staff['Staff_Name']?>
            </option> <?php
        } while ($row_Staff = mysql_fetch_assoc($Staff));

        $rows = mysql_num_rows($Staff);

        if($rows > 0) {
            mysql_data_seek($Categories, 0);
            $row_Staff = mysql_fetch_assoc($Staff);
        }
    ?>
</select>

//Input hidden fields to store staff name and staff email

<input type="hidden" id="txtStaffName" name="txtStaffName">
<input type="hidden" id="txtStaffEmail" name="txtStaffEmail">

//Jquery code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#ddStaff").on('change',function(){
            var staffName = $(this).val();
            var staffEmail = $('option:selected', this).attr('staff-email');
            $("#txtStaffName").val(staffName);
            $("#txtStaffEmail").val(staffEmail);
        });
    });
</script>

Please check it on https://jsfiddle.net/z4a0fywp/ For testing purpose I have not made the inputs hidden in the fiddle.

Where should I put the script? Below body tag, above? Above closing body tag or below? — user3258571, Jul 21 '16 at 14:18
You can put it whether in tag or before the closing body tag. — Rahul Patel, Jul 21 '16 at 14:21
Please check the updated answer. I have posted the fiddle link as well. — Rahul Patel, Jul 21 '16 at 14:21
Need to check in a couple of hours. I had to go off-site. Thanks for your response. — user3258571, Jul 21 '16 at 14:25
Ok take your time. But don't forget to upvote if it will work fine. ;) — Rahul Patel, Jul 21 '16 at 14:29

Option Menu with 2 Values

1 Answers1