Populating a tag input based on other inputs in same form

Question

I have a form with a bunch of inputs. Sometimes the form will have 1 input and sometimes up to 10 inputs. When someone fills out each input I want a tag field at the bottom to be populated also. Right now I have it working but only with a set number of inputs. (3 at the moment).

Im trying to figure out how to make it work regardless of how many inputs there are on the page.

HTML

Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>

Jquery

$("#input1,#input2,#input3").change(function () {
    var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
    $("#allInputs").text(inputArray.join(' '));
});

A nice to have also would be putting them into another input instead of a span and adding a comma after each one except for the last one.

I know Im probably missing something very simple here.

Answer 1

In your example you are only allowing for 3 inputs as you have 3 input boxes, when any of those input boxes change your tags are then being transferred to the span.

Now it sounds like you wish to allow for multiple entries regardless of how many inputs. You could try something simple such as the below fiddle.

http://jsfiddle.net/K2g4z/

Html:

<div>
    <strong>Enter your tag and click add</strong>
    <br/>
    <input type="text" id="tagEntry" />
    <button id="tagAdd">Add</button>
</div>

<div>
    <strong>Entered Tags</strong>
    <br/>
    <input type="text" id="tagsEntered" />
</div>

Javascript:

var tags = [];

$(function() {

    $('#tagAdd').click(function(){
        //get the tag value and trim the spaces
        var tVal = $('#tagEntry').val().trim();
        if(tVal == '')
            return;

        //reset the entry box
        $('#tagEntry').val('');

        //verify tag not already saved
        for(var i=0;i<tags.length;i++)
            if(tags[i] == tVal)
                return;

        //add the tag to the array
        tags.push(tVal);

        //set the tags entry box
        $('#tagsEntered').val(tags.join(', '));

    });

});

UPDATE:

The JSFiddle link http://jsfiddle.net/K2g4z/1/ now supports using multiple inputs of as many as you need. To achieve this instead of selecting on element ID we bind to a class name. Given the following Html.

<div>
    <strong>Enter your tag and click add</strong>
    <br/>
    <strong>Tag 1</strong>
    <input type="text" id="tagEntry" class="tagEntry" />
    <br/>
    <strong>Tag 2</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 3</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 4</strong>
    <input type="text" class="tagEntry" />
    <br/>
    <strong>Tag 5</strong>
    <input type="text" class="tagEntry" />

</div>

<div>
    <strong>Entered Tags</strong>
    <br/>
    <input type="text" id="tagsEntered" />
</div>

All the tag input boxes have a class of tagEntry now this class will become our selector. With the following JS we can bind the blur event to every tag that has a class of tagEntry. This will now update the tags box every time any of the inputs changed.

var tags = [];

$(function() {

    $('.tagEntry').blur(function(){
        //get the tag value and trim the spaces
        var tVal = $(this).val().trim();
        if(tVal == '')
            return;

        //reset the entry box
        $(this).val('');

        //verify tag not already saved
        for(var i=0;i<tags.length;i++)
            if(tags[i] == tVal)
                return;

        //add the tag to the array
        tags.push(tVal);

        //set the tags entry box
        $('#tagsEntered').val(tags.join(', '));
    });
});

As you can see our handler binds to all the inputs, as any of the inputs receives the blur event the method of extracting the tags is executed.

Answer 2

$("#input1,#input2,#input3").change(function () {
    var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
    $("#masterinput").val(inputArray.join(' '));
});

Answer 3

You probably want to narrow the selector so it isn't selecting all text inputs on the page.

var inputs$ = $("input:text").change(function () {

    var inputArray = [];

    $.each(inputs$, function(i, v) {
        inputArray.push($(v).val());
    }

    $("#allInputs").text(inputArray.join(' '));
});

Answer 4

Here you go:

var str = "";
$("input[type=text]").change(function () {
            $("input[type=text]").each(function(){
             str += $(this).val()+",";       
};
});

$("#allInputs").html(str);