CODEWITHSUNDEEP
javascriptjquerykeyup
Tibby
Tibby

Reputation: 344

jquery to show table row if input has a value. wrong keyup function

I have some table rows with text inputs inside. Each row has a unique name fp0,fp1,fp2,fp3... The input is getting a value from a php array, but sometimes the array is empty, and has not value. If the input has a value, then the TR should show.

HTML:

<table>
    <tr>
        <td>This works fine<br>as long as has no default values set like a PHP variable</td>
    </tr>
    <tr id="fp0">
        <td>
            <label>INPUT0:</label>
            <input type="text" class="fp" name="fp_name0" id="fp_name0" value="">
            <td>
    </tr>
    <tr id="fp1">
        <td>
            <label>INPUT1:</label>
            <input type="text" class="fp" name="fp_name1" id="fp_name1" value="">
            <td>
    </tr>
    <tr id="fp2">
        <td>
            <label>INPUT2:</label>
            <input type="text" class="fp" name="fp_name2" id="fp_name2" value="">
            <td>
    </tr>
</table>
<br>
<br>
<table>
    <tr>
        <td>If it has a value it should display and +1 empty input on the bottom.<br>
            If you delete INPUT10 Then INPUT11 Should hide.<br>
        </td>
    </tr>
    <tr id="fp10">
        <td>
            <label>INPUT10:</label>
            <input type="text" class="fp" name="fp_name10" id="fp_name10" value="VALUE10">
            <td>
    </tr>
    <tr id="fp11">
        <td>
            <label>INPUT11:</label>
            <input type="text" class="fp" name="fp_name11" id="fp_name11" value="">
            <td>
    </tr>
    <tr id="fp12">
        <td>
            <label>INPUT12:</label>
            <input type="text" class="fp" name="fp_name12" id="fp_name12" value="">
            <td>
    </tr>
</table>

Javascript:

$(document).ready(function () {
/*AS LONG AS NO VALUE IS SET, EVERYTING WORKS FINE*/
if ($("#fp_name0").val() !== "") {
    $('#fp1').show();
} else {
    $("#fp_name0").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp1").slideDown();
        } else {
            $("#fp1").slideUp();
            $("#fp2").slideUp();
            $("#fp_name1").val("");
            $("#fp_name2").val("");
        }
    });
};
if ($("#fp_name1").val() !== "") {
    $('#fp2').show();
} else {
    $("#fp_name1").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp2").slideDown();
        } else {
            $("#fp2").slideUp();
            $("#fp_name2").val("");
        }
    });
};

/*THIS HAS VALUES AND HAS PROBLEMS*/

if ($("#fp_name10").val() !== "") {
    $('#fp11').show();
} else {
    $("#fp_name10").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp11").slideDown();
        } else {
            $("#fp11").slideUp();
            $("#fp12").slideUp();
            $("#fp_name11").val("");
            $("#fp_name12").val("");
        }
    });
};

if ($("#fp_name11").val() !== "") {
    $('#fp12').show();
} else {
    $("#fp_name11").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp12").slideDown();
        } else {
            $("#fp12").slideUp();
            $("#fp_name12").val("");
            }
        });
    };
});

Its a bit hard to explain, but here is a jsfiddle of the code.

Upvotes: 0

Views: 1386

Answers (3)

lex82
lex82

Reputation: 11317

I think onchange is what you are looking for. Place the code to hide or show the element in this event listener.

If you also want to set the visibility to the correct value when the element is loaded, you can call the same code from onload as well. It might be required to add the onload attribute to the input (instead of using jQuery, depending on when your jQuery code is executed).

Upvotes: 1

Tibby
Tibby

Reputation: 344

This code worked finally:

$(document).ready(function () {
    if ($("#fp_name10").val() !== "") {
        $('#fp11').show();
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    };

    if ($("#fp_name11").val() !== "") {
        $('#fp12').show();
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    };
});

Upvotes: 1

Omar Himada
Omar Himada

Reputation: 2588

First replace:

 this.value

with

$(this).val()

Because this changes meaning in a jQuery event.

Next, rather than using keyup, try on change instead. 

$("#fp_name0").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp1").slideDown();
    } else {
        $("#fp1").slideUp();
    }
});

$("#fp_name1").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp2").slideDown();
    } else {
        $("#fp2").slideUp();
    }
});

$("#fp_name2").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp3").slideDown();
    } else {
        $("#fp3").slideUp();
    }
});

Upvotes: 0

Related Questions