Placing Unordered List Option to Form Text Input part 2

Going on from my question yesterday, I need to know the way to approach a problem I am thinking about. I do not 开发者_高级运维have any Jquery code set up for this but would like to know how to attack this problem.

I have an Unordered list of Options that when my Users click on one of them it transfers to the Value on one of my form boxes, Thats sorted.

Think Fantasy football sites as an example.

A user has the choice of selecting four Players to go in the form boxes to act as a the defence for the team. They can select these players in any order but they have to appear in the 4 form input boxes without replacing the previous one chosen. So each Option needs to have the Jquery code to be able to chose which Form input box to be placed in if the previous box has already been filled. Confusing enough for you?

I guess I would need to use a "If Else" loop but not sure of the best way to implement it.

Can you help?? Thanks

You can find the first empty input contained in some container with:

var $emptyInput = $('#someDiv input')
  .filter(function() { return this.value == ''; })
  .eq(0);

You can then double-check to make sure that there was an empty one:

if ($emptyInput.length) {
  $(emptyInput).val(newValue);
}

Here is a jsfiddle example of using this in a situation that I think to be similar to what you have described.

OK so if my 4 options are named .DEF1 , and my 4 input boxes are named .playerbox2 , is this the code that should sort it? Sorry,my brain isn't working today lol.

$(document).ready(function(){
    $(".DEF1").click(function(){
        var valuestring=$(this).text();
        $(".playerbox2").val(valuestring);

        var $emptyInput = $('.playerbox2').filter(function() { return this.value != ''; }).eq(0);
        if ($emptyInput.length) {
  $(emptyInput).val(valuestring);
}
});});