JQuery/JavaScript concatenate Input values on each key down

Question

I have some input fields - the count of fields will be dynamic - want to concatenate the values into other field. Concatenate ids from C01 to N and store it in cNum Field. Please help.

<form class="cardForm" style="padding: 10px;"autocomplete="off" novalidate>
  <div class="cardDiv">
    <input type="hidden" id="C00" class="cardNum" value="" maxlength="1"  />
    <input type="text" id="C01" class="cardNum" value="" maxlength="1" autofocus/>
    <input type="text" id="C02" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C03" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C04" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
    <input type="text" id="C05" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C06" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C07" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C08" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
    <input type="text" id="C09" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C10" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C11" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C12" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
    <input type="text" id="C13" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C14" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C15" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="C16" class="cardNum" value="" maxlength="1"/>
  </div>
  <div>
    <input type="text" id="cNum" class="cardNum" value="" maxlength="1"/>
    <input type="text" id="cStatus" class="cardNum" value="" maxlength="1"/>
  </div>
  <button class="cardReset btn-link" type="reset" value="Reset"><u>Reset</u></button>
</form>

What have you tried so far? I don't see any JavaScript code, only a simple HTML form. — Torbjörn
– Torbjörn, Commented Jan 27, 2016 at 5:55
I used the first reply. It worked perfectly. I tried ('#cNum').va(("#C01").val() + ..). I am not good at javascript/jquery. :-( — Sathish
– Sathish, Commented Jan 29, 2016 at 5:33

dextermini · Accepted Answer · 2016-01-27 06:27:46Z

In a simple way you can try below code or run the solution on jsfiddle. Explanation: On key up, it will concatenate all value of Text box starting with capital 'C' and result it into 'cNum' text

$("input[id^=C]").keyup(function(e) {
  var str = "";
  $("input[id^=C]").each(function(index) {
    str = str + $(this).val()
  });
  
   $("#cNum").val(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cardForm" style="padding: 10px;" autocomplete="off" novalidate>
  <div class="cardDiv">
    <input type="hidden" id="C00" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C01" class="cardNum" value="" maxlength="1" autofocus/>
    <input type="text" id="C02" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C03" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C04" class="cardNum" value="" maxlength="1" />&nbsp;&nbsp;
    <input type="text" id="C05" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C06" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C07" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C08" class="cardNum" value="" maxlength="1" />&nbsp;&nbsp;
    <input type="text" id="C09" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C10" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C11" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C12" class="cardNum" value="" maxlength="1" />&nbsp;&nbsp;
    <input type="text" id="C13" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C14" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C15" class="cardNum" value="" maxlength="1" />
    <input type="text" id="C16" class="cardNum" value="" maxlength="1" />
  </div>
  <div>
    <input type="text" id="cNum" class="cardNum" value="" maxlength="1" />
    <input type="text" id="cStatus" class="cardNum" value="" maxlength="1" />
  </div>
  <button class="cardReset btn-link" type="reset" value="Reset"><u>Reset</u></button>
</form>

progrAmmar · Accepted Answer · 2016-01-27 06:01:53Z

0

If it was me, I would give C01 to C16 an additional class something like

<input type="text" id="C01" class="cardNum cardVal" value="" maxlength="1"/>
<input type="text" id="C02" class="cardNum cardVal" value="" maxlength="1"/>
.
.
.
<input type="text" id="C16" class="cardNum cardVal" value="" maxlength="1"/>

and then

var finalString = "";
$(".cardVal").each(function(i, txt){
    finalString += txt.val();
});
$("#cNum").val(finalString);

but if you don't want to do that you can do something like this

var finalString = "";
$(".cardNum").each(function(i, txt){

    if(txt.attr("id").indexOf("C") >= 0){
        finalString += txt.val();
    }
});
$("#cNum").val(finalString);

answered Jan 27, 2016 at 6:01

progrAmmar

2,6805 gold badges32 silver badges59 bronze badges

Comments

gurvinder372 · Accepted Answer · 2016-01-27 06:03:14Z

0

try this

var concatenatedValue = "";

$( ".cardNum" ).each( function(){

  var id  = $( this ).attr( "id" );
  var number = id.substring(1);
  if ( !isNaN( number  ) )
  {
     concatenatedValue += $( this ).val();
  }

} );
alert( concatenatedValue );

answered Jan 27, 2016 at 6:03

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

Sathish Over a year ago

Thank you very much for your reply.

Siva · Accepted Answer · 2016-01-27 06:37:25Z

You can listen on the keyup event for class "cardNum" and concatenate all inputs under the div "cardDiv" and set to the input box.

here is the working example.

$(".cardNum").keyup(function() {
  var str = "";
  $(".cardDiv .cardNum").each(function(){
    str += $(this).val();
  });
  $("#cNum").val(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cardForm" style="padding: 10px;"autocomplete="off" novalidate>
<div class="cardDiv">
<input type="hidden" id="C00" class="cardNum" value="" maxlength="1"  />
<input type="text" id="C01" class="cardNum" value="" maxlength="1" autofocus/>
<input type="text" id="C02" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C03" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C04" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
<input type="text" id="C05" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C06" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C07" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C08" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
<input type="text" id="C09" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C10" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C11" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C12" class="cardNum" value="" maxlength="1"/>&nbsp;&nbsp;
<input type="text" id="C13" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C14" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C15" class="cardNum" value="" maxlength="1"/>
<input type="text" id="C16" class="cardNum" value="" maxlength="1"/>
</div>
<div>
<input type="text" id="cNum" class="cardNum" value="" maxlength="1"/>
<input type="text" id="cStatus" class="cardNum" value="" maxlength="1"/>
</div>
<button class="cardReset btn-link" type="reset" value="Reset"><u>Reset</u></button>
</form>

Collectives™ on Stack Overflow

JQuery/JavaScript concatenate Input values on each key down

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related