Home/ Questions/Q 6751403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:55:23+00:00

Up to this point I’ve avoided javascript, mostly because I’m a newbie. But I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0