Question

Here’s my problem … I need to fill multiple textfields with just one click. The link that needs to be clicked is placed in a td that is generated with php and data comes from a MySQL db (bloody JS Beginner!).

The code below is just a short example of my problem.

Thanks in advance

<script type='text/javascript'>
$(function(){
    $('.click').live('click', function() {
        $("#brand").val($(this).html());
        $("#color").val('I need the color here');
        $("#size").val('and here the size');
    });
});
</script>

<label for="brand">Brand:</label><input autocomplete="off" id="brand" type="text" name="brand" />
<label for="color">Color:</label><input autocomplete="off" id="color" type="text" name="color" />
<label for="size">Size:</label>
<select id="size" name="size">
    <option>M</option>
    <option>L</option>
    <option>XL</option>
</select>

<table>
    <tr>
        <th>brand</th>
        <th>color</th>
        <th>size</th>
    </tr>
    <tr>
        <td><a href="#" class="click">nike</a></td>
        <td>red</td>
        <td>45</td>
    </tr>
    <tr>
        <td colspan="3">...more rows here...</td>
    </tr>
</table>

Answer 1

First, I would recommend changing your markup to give classes to the color and size table cells, like so:

<tr>
    <td><a href="#" class="click">nike</a></td>
    <td class="color">red</td>
    <td class="size">L</td>
</tr>

Also, to change the value of the dropdown, you need to include the value of each option, like so:

<select id="size" name="size">
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
</select>

Then, in your javascript function that fills the input fields, you can assign the value of the size and color to variables. Because the .click element is the child of the table cell element that is a sibling to the size and color cells, we need to select .click’s parent and then select the siblings:

var color = $(this).parent().siblings('.color').text();
var size = $(this).parent().siblings('.size').text();
$("#color").val(color);
$("#size").val(size);

This does it. Then you just fill out the rest of the rows with the same markup, like this:

<tr>
  <td><a href="#" class="click">adidas</a></td>
  <td class="color">blue</td>
  <td class="size">XL</td>
</tr>