jQuery: find the first blank textbox

[nadiam]

hi. i just want to know if that is possible.

for example there are 5 blank textboxes with no specific id or class:

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

is there a way to loop through the textboxes and find the first blank textbox?

say the top already has a value inserted by user:

not blank: <input type="text">

blank:

<input type="text">
<input type="text">
<input type="text">
<input type="text">

so through the loop the result would be the blank textbox below the not blank textbox. TIA

[cereal]

You can use each() to loop them, and then return false when you get the first empty value, as example:

<form>
    <input type="password" name="passwd" value="" />
    <input type="text" name="aaa" value="test 1" />
    <input type="text" name="bbb" value="test 2" />
    <input type="text" name="ccc" value="" />
    <input type="text" name="ddd" value="test 4" />
    <input type="text" name="eee" value="" />
</form>

JS:

$('input:text').each(function(){
    if($(this).val().length === 0)
    {
        console.log($(this).attr('name'));
        return false;
    }
});

Documentation: http://api.jquery.com/each/

[pritaeas]

This should work:

$("input[value='']:visible:first");

The visible is just there to skip any hidden fields.

[nadiam]

i did not explain what my goal was did i.

so what im doing is having a table listing a few names and then 5 textboxes next to it. each row when doubleclicked will append the name into a textbox.

not sure if im going about it right or if there is a better way but with pritaeas code i did:

Name 1 : <input type="text" class="textbox" id="name1" value=""><br> 
Name 2 : <input type="text" class="textbox" id="name2" value=""><br>
Name 3 : <input type="text" class="textbox" id="name3" value=""><br>
Name 4 : <input type="text" class="textbox" id="name4" value=""><br>
Name 5 : <input type="text" class="textbox" id="name5" value=""><br><br>



$(".textbox").each(function(){
   var textbox = $("input[value='']:visible:first");
   textbox.val(name);
});

and it does fill up the first textbox when a name is doubleclicked but then on the second time the first textbox just get replaced with the second name.

[cereal]

So, for example:

<table id="names">
    <tr>
        <td data-name="oranges">
            oranges
        </td>
        <td data-name="apples">
            apples
        </td>
        <td data-name="coconut">
            coconut
        </td>
        <td data-name="strawberries">
            strawberries
        </td>
    </tr>
</table>

<form>
    <input type="text" name="aaa" value="" />
    <input type="text" name="bbb" value="" />
    <input type="text" name="ccc" value="" />
    <input type="text" name="ddd" value="" />
    <input type="text" name="eee" value="" />
</form>

Then you can do:

$("#names td").click(function(){
    var name = $(this).data('name');

    $('input:text:visible').each(function(){
        if($(this).val().length === 0)
        {
            $(this).val(name);
            return false;
        }
    });
});

JSfiddle: http://jsfiddle.net/hmwv1hx7/

[nadiam]

thanks cereal!

[Airshow]

Solved?