Send data-attributes to modal

Question

I am using the following code in an attempt to send row data from the page to a modal window:

 <?php
   $select = "SELECT * FROM table";
   $res = mysql_query($select) or die();
     echo "<div>"
     echo "<table>"
     echo "<tr><th>Edit/Delete</th>
               <th>Group</th>
               <th>Type</th>
               <th>Service</th>
               <th>Description</th>
           </tr>";
     while(($Row = mysql_fetch_assoc($res)) !== FALSE){
       echo "<tr><td>
       <a href='' class='open-EditRow btn btn-primary' value='Edit'
         data-des=\"{$Row[description]}\" 
         data-group=\"{$Row[resgroup]}\" 
         data-type=\"{$Row[restype]}\" 
         data-service=\"{$Row[service]}\">Edit</a>
       </td>";
       echo "<td>{$Row[resgroup]}</td>";
       echo "<td>{$Row[restype]}</td>";
       echo "<td>{$Row[service]}</td>";
       echo "<td>{$Row[description]}</td></tr>\n";
       };
     echo "</table>";
     echo "</div>";
    if(mysql_num_rows($res) == 0){
      echo "No Results";
    }
   }
 ?>

As you can see in the a tag above, I am using the data-attributes to get the row data, which includes resgroup, restype, service, and description. At this point, I can get the modal window to open with no problem.

The javascript I am using looks like this:

 <script type="text/javascript">
 $(function()
   {
     $('.open-EditRow').click(function(e){
     e.preventDefault();
     $group = $(this).attr('data-group');
     $type = $(this).attr('data-type');
     $service = $(this).attr('data-service');
     $descript = $(this).attr('data-description');
     console.log($group);
     console.log($type);
     console.log($service);
     console.log($descript);
    });
   });
 </script>

I can do an alert($group) and the row data for data-group does indeed appear in the alert window.

My modal window has a form with input tags that I am trying to populate with the data-attributes. The input tags have the a class, name, and id with the same name as the data-attributes themselves.

I know I do not need to use console.log(); but I am not sure how to pass the data any further than an alert window.

Answer 1

It looks like you are already using jQuery, so if the form inputs have ids that match the data-attribute names, I believe you should be able to fill them in using the val() method :

$('#group').val($group);

You may also use the data() method to retrieve the data attributes. Instead of

$group = $(this).attr('data-group');

you can use

$group = $(this).data('group');