HTML/jQuery Show and Hide table rows

Question

I have a table that is working as a contact form which its contents will be changed depending on a dropdown menu.

This is my table:

    <table border="1">
        <tr>
            <th colspan="2">Contact Details</th>
        </tr>
        <tr>
            <td>Company Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Email:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Mobile Number:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>
                Contact Type:
            </td>
            <td>
                <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements -->
                    <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
                    <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row -->
                    <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row -->
                    <option value="Complains">Complains</option> <!-- Shows Option 3 Row -->
                    <option value="Requests">New Requests</option> <!-- Shows Option 4 Row -->
            </td>
        </tr>
        <tr> <!-- Header from contactSelect-->
            <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
        </tr>
        <tr> <!-- Option 1 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 2 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 3 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 4 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- This is a temp row to be deleted -->
                <td>Selected Value:</td>
                <td><input type="text" name="test" id="test" /></td>
        </tr>
    </table>

As for the jQuery, I can't figure it out expect for change the text of the row below the dropbox menu.

    <script>
        function changeVal() {
            document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
            $('#myHeader').text(document.getElementById('contactSelect').value);
            alert(document.getElementById('myHeader').text);
            alert(document.getElementById('contactSelect').value);
        }
    </script>

How can I show/hide the rows

Answer 1

There is a syntax error as you can't apply a jQuery method on a dom node at this line:

document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
 //------------this cause in error---^^^^

You can change markup a bit like adding select values as a class/ID to the respective trs:

 function changeVal() { if (this.value != 'default') { $(this).closest('tr').nextAll('.row').hide(); $('.' + this.value).show(); } else { $('.row').show(); } $('#myHeader').html(this.value).toggle(this.value != 'default'); // use here to hidenshow } $('#contactSelect').change(changeVal).trigger('change'); // <---and you need to trigger it on page load 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th colspan="2">Contact Details</th> </tr> <tr> <td>Company Name:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Name:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Email:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Mobile Number:</td> <td> <input type="text" /> </td> </tr> <tr> <td> Contact Type: </td> <td> <select name="contactSelect" id="contactSelect"> <!-- Function showHide Show work on table elements --> <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below --> <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row --> <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row --> <option value="Complains">Complains</option> <!-- Shows Option 3 Row --> <option value="Requests">New Requests</option> <!-- Shows Option 4 Row --> </select> </td> </tr> <tr> <!-- Header from contactSelect--> <th colspan="2" id="myHeader" name="myHeader" value="text">text</th> </tr> <tr> <!-- Option 1 --> <td></td> <tr class='row General'> <!-- Option 1 --> <td>General</td> <td>General</td> </tr> <tr class='row Feedback'> <!-- Option 2 --> <td>Feedback</td> <td>Feedback</td> </tr> <tr class='row Complains'> <!-- Option 3 --> <td>Complains</td> <td>Complains</td> </tr> <tr class='row Requests'> <!-- Option 4 --> <td>Requests</td> <td>Requests</td> </tr> <td>Selected Value:</td> <td> <input type="text" name="test" id="test" /> </td> </tr> </table> 

Answer 2

I think this is what you need, depending on the drop down show the rows of that respective elements,

 $('#contactSelect').change(function() { $('.test').hide() document.getElementById('myHeader').html=document.getElementById('contactSelect').value; var value = document.getElementById('contactSelect').value $('#myHeader').text(document.getElementById('contactSelect').value); alert(document.getElementById('myHeader').text); alert(document.getElementById('contactSelect').value); $('#'+value).toggle() }) 

 <style> .test { display: none;} </style> 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table border="1"> <tr> <th colspan="2">Contact Details</th> </tr> <tr> <td>Company Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Email:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Mobile Number:</td> <td><input type="text" /></td> </tr> <tr> <td> Contact Type: </td> <td> <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements --> <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below --> <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row --> <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row --> <option value="Complains">Complains</option> <!-- Shows Option 3 Row --> <option value="Requests">New Requests</option> <!-- Shows Option 4 Row --> </td> </tr> <tr> <!-- Header from contactSelect--> <th colspan="2" id="myHeader" name="myHeader" value="text"></th> </tr> <tr class="test" id="General"> <!-- Option 1 --> <td>General Inquiry</td> <td>General Inquiry</td> </tr> <tr class="test" id="Feedback"> <!-- Option 2 --> <td>Feedback</td> <td>Feedback</td> </tr> <tr class="test" id="Complains"> <!-- Option 3 --> <td>Complains</td> <td>Complains</td> </tr> <tr class="test" id="Requests"> <!-- Option 4 --> <td>New Requests</td> <td>New Requests</td> </tr> <tr> <!-- This is a temp row to be deleted --> <td>Selected Value:</td> <td><input type="text" name="test" id="test" /></td> </tr> </table> 

Now once you select a value from drop down, its respective div wii be shown.

Here is the working fiddle...

Answer 3

  function changeVal() { $('#contactSelect').change(function(){ $('tr:eq(0)').hide(); //.show() to show again }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th colspan="2">Contact Details</th> </tr> <tr> <td>Company Name:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Name:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Email:</td> <td> <input type="text" /> </td> </tr> <tr> <td>Company Representative Mobile Number:</td> <td> <input type="text" /> </td> </tr> <tr> <td> Contact Type: </td> <td> <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements --> <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below --> <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row --> <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row --> <option value="Complains">Complains</option> <!-- Shows Option 3 Row --> <option value="Requests">New Requests</option> <!-- Shows Option 4 Row --> </td> </tr> <tr> <!-- Header from contactSelect--> <th colspan="2" id="myHeader" name="myHeader" value="text">text</th> </tr> <tr> <!-- Option 1 --> <td></td> <td></td> </tr> <tr> <!-- Option 2 --> <td></td> <td></td> </tr> <tr> <!-- Option 3 --> <td></td> <td></td> </tr> <tr> <!-- Option 4 --> <td></td> <td></td> </tr> <tr> <!-- This is a temp row to be deleted --> <td>Selected Value:</td> <td> <input type="text" name="test" id="test" /> </td> </tr> </table> 

You can use toggle to show / hide an element. show() and hide() to just do it once. You should select by an id or name instead of the nth element like I do.

Answer 4

TO change the "text" row

 $("#contactSelect").on('change', function(){ $("#myHeader").text($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <table border="1"> <tr> <th colspan="2">Contact Details</th> </tr> <tr> <td>Company Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Email:</td> <td><input type="text" /></td> </tr> <tr> <td>Company Representative Mobile Number:</td> <td><input type="text" /></td> </tr> <tr> <td> Contact Type: </td> <td> <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements --> <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below --> <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row --> <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row --> <option value="Complains">Complains</option> <!-- Shows Option 3 Row --> <option value="Requests">New Requests</option> <!-- Shows Option 4 Row --> </select> </td> </tr> <tr> <!-- Header from contactSelect--> <th colspan="2" id="myHeader" name="myHeader" value="text">text</th> </tr> <tr> <!-- Option 1 --> <td></td> <td></td> </tr> <tr> <!-- Option 2 --> <td></td> <td></td> </tr> <tr> <!-- Option 3 --> <td></td> <td></td> </tr> <tr> <!-- Option 4 --> <td></td> <td></td> </tr> <tr> <!-- This is a temp row to be deleted --> <td>Selected Value:</td> <td><input type="text" name="test" id="test" /></td> </tr> </table> As for the jQuery, I can't figure it out expect for change the text of the row below the dropbox menu.