Collect several input fields and insert into a single field with jquery

Question

I have 4 input textfields, and a single textfield that should collect values from each.

<input type="text" class="collector">

<input type="text" class="collected">
<input type="text" class="collected">
<input type="text" class="collected">
<input type="text" class="collected">

The collected inputs are text and expected to be inserted into collector as is. So NULL should be sent too along with those with values.

The collector expects to look like: Data 1 | Null | Data 3 | Data 4

So Null is accepted when no value is given, simply to maintain the process of explode and implode by PHP.

I am stuck, my jquery only picks one of them, because I don't know how to aggregate the separate collected values into an array:

$('input.collector').val($(".collected").text());

Any hint is very much appreciated. Thanks

dfsq · Accepted Answer · 2012-02-03 20:33:11Z

4

Try this:

$('input.collector').val(function() {
    return $(".collected").map(function() {
        return $(this).val() || 'NULL';
    }).get().join('|');
});

Demo http://jsfiddle.net/DDQ8s/

answered Feb 3, 2012 at 20:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Bowersox Over a year ago

Wow, nice answer. Way to combine native js and jquery very well.

Kevin Bowersox · Accepted Answer · 2012-02-03 20:31:19Z

2

var text= "";
$(".collected").each(function(){
   text += "|" + $(this).val();
});

$(".collector").val(text.substring(1,text.length));

Example: http://jsfiddle.net/nT8NF/

answered Feb 3, 2012 at 20:31

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

3 Comments

swan Over a year ago

Thanks, but I got the results: undefined | Data 1 || Data 3 | Data 4. Its okay that Null is just empty. But out of 4 fields I recieved 5 (strangely the first is always: undefined). Thanks again

Kevin Bowersox Over a year ago

I just updated the code give it another try and take a look at the fiddle. I wrote that off the top of my head.

swan Over a year ago

Yes, working perfectly now. I need a Null better than empty though for end user readablity, although empty is more efficient. Thanks a lot

Collectives™ on Stack Overflow

Collect several input fields and insert into a single field with jquery

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related