Create dynamic forms

Question

Up to this point I've avoided javascript, mostly because I'm a newbie. But I think I can't avoid it anymore?

I have a simple form in a table that I process with php.

<table id="my-table">
    <thead>
    <tr>
        <td>Name</td>
        <td>Quality</td>
        <td>Status</td>
        <td>User</td>
        <td>Password</td>
        <td>IP</td>
        <td>Port</td>
        <td>Options</td>
    </tr>
    </thead>

    <form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
    <tbody>
        <tr>
            <td>
            <input type="text" size="18" maxlength="32" name="add_name" value="Enter name" />
            </td>
            <td>
            <select name="add_quality">
                <option value='HIGH' selected='selected'>High</option>
                <option value='MEDIUM'>Medium</option>
                <option value='MOBILE'>Mobile</option>
            </select>
            </td>
            <td>
            <select name="add_status">
                <option value='ENABLED' selected='selected'>Enabled</option>
                <option value='DISABLED'>Disabled</option>
            </select>
            </td>
            <td>
                <input type="text" size="14" maxlength="16" name="add_user" value="Enter username" />
            </td>
            <td>
                <input type="password" size="12" maxlength="16" name="add_pass" />
            </td>
            <td>
                <input type="text" size="10" maxlength="16" name="add_ip" value="Enter IP" />
            </td>
            <td>
                <input type="text" size="12" maxlength="6" name="add_port" value="Enter Port #" />
            </td>
            <td>
                <input type="submit" name="add" value="Add" />
            </td>
            </tr>
    </tbody>
    </form>
</table>

I'd like to take this table and only keep the first three input types shown (Name, Quality, Status). The rest would open up if you hit a "details" link or button. So the table would expand (or ideally go to the next line as this table is too long). That details button or link would have to toggle on and off. Any ideas would be appreciated.

Answer 1

For animations, jQuery is my favorite JavaScript library. It makes things quite a lot easier.

This code might work for you:

$('#my-table tr td').each(function(i) {
  if (i >= 3) {
    $(this).hide();
  }
});

$('#details').click(function() {
  $('#my-table tr td').each(function(i) {
    if (i >= 3) {
      $(this).slideToggle();
    }
  });
});

Answer 2

Basic javascript approach:

<script type="text/javascript">
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display === 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}
</script>

Then place a button or link with:

<input type="button" value="Details" onClick="toggle_visibility('detailsWrapper')">

Finally, just make a div or maybe a new tr around the fields you want to hide with the id set to "detailsWrapper" and style it with display:none.

Alternatively you can use this function:

        function toggle_visibility(id) {
           var control = document.getElementById(controlId);
           if(control.style.visibility == "visible" || control.style.visibility == "")
              control.style.visibility = "hidden";
           else 
              control.style.visibility = "visible";
        }

If I remember correctly this will reserve the needed space to display the element, so it won't mess up your layout.