Hide an empty textbox in JavaScript

Question

I want this function removeRow() to check to see if the HTML textbox is empty, and if it is, to set its display to 'none' (to hide it). I also have this function funcTest() which checks to see if the textbox is filled, and if it is && the Max Rows Allowed have not been exceeded, then it sets the display to ''(to make it visible). Thanks in advance. Apologies if I didn't enter everything in the right format for StackOverflow. I've never asked a question on here before. All help appreciated; I've been staring at this for longer than I care to admit.

HTML

<table width="650" border="0" cellpadding="2" cellspacing="2" class="table_border">
            <tr class="blacktext9">
                <td>
                    <table align="center">
                        <button id="testbutton" name="testbutton" onclick="funcTest();return false;">Test</button>

                        <button id="testbuttonRemove" name="testbuttonRemove" onclick="removeRow()">Remove empty rows</button>

                        <input type="hidden" id="last_row" name="last_row" value=1 />

                        <tr id="rowToDisplay1" >
                            <td>
                                ID:
                                <input id="testId1" name="testId1" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay2" style="display: none">
                            <td>
                                ID:
                                <input id="testId2" name="testId2" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay3" style="display: none">
                            <td>
                                ID:
                                <input id="testId3" name="testId3" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay4" style="display: none">
                            <td>
                                ID:
                                <input id="testId4" name="testId4" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay5" style="display: none">
                            <td>
                                ID:
                                <input id="testId5" name="testId5" type="text" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

JS

function removeRow() {
     var r = myMAX_ROWS;

     for (r; r <= myMAX_ROWS; r--) {
        if ((document.getElementById('testId' + r).value == '') && (document.getElementById('rowToDisplay' + r).style.display = '')) {
            document.getElementById('rowToDisplay' + r).style.display = 'none';

        }
    }  
} 
function funcTest () {

    var LASTROW = document.getElementById('last_row').value;
    //myMAXROWS currently set to 3

    if(LASTROW < myMAX_ROWS && document.getElementById('testId' + LASTROW).value != '')  {
        LASTROW++;  
        document.getElementById('rowToDisplay'+LASTROW).style.display = '';
        document.getElementById('last_row').value = LASTROW;
    }

Answer 1

Just check the length of the textbox value, and hide if it's empty:

(Although, not sure why you'd want to do this since you won't have access to the hidden textbox to add input in the first place if it's hidden)

jQuery example:

    $("#textBox").on("keydown", function () {
        if ($(this).val().length <= 0) {
            $(this).hide();
        }
        else {
            log("TEXTBOX IS NOT EMPTY");
            $(this).show();
        }
    });

Answer 2

Looks like if you want to do it this way, and without jQuery I will show you your problem. You are using

.value == ''
.style.display = ''

These values can be null or empty and this is probably why you are having issues.

Please try this:

.value.length < 1
.style.display.length < 1

instead and hopefully it works for you

I've created a Fiddle (click this line) for you to see

Answer 3

First, you have an infinite loop, here:

 var r = myMAX_ROWS;

 for (r; r <= myMAX_ROWS; r--) {

Since you are assigning r to myMAX_ROWS and you are decrementing r, r will ALWAYS be <= myMAX_ROWS. You probably want

 var r = myMAX_ROWS;
 for (r; r >= 0; r--) {

Also, '' is not a valid CSS value for 'display'. However, 'none' is. Change your display setting to this:

document.getElementById('rowToDisplay'+LASTROW).style.display = 'none';

Set display to 'none' to hide it, set it to 'inline-block' or 'block' to show it (depending on your page's layout). This is a lot easier with jQuery:

$("#elementID").show();
$("#elementID").hide();