Question

On a ASP.NET MVC 2 form , i am asking user to insert 16 digit bank account number . User has 16 different textboxes for each digit of bankaccount number . User has to re enter same bank account number in another 16 textboxes .. if previously entered bank account number matches with re entered bank account number then I want to display an error message or alert .

i have 16 textboxes having only one digit value .. i want to pass all of these values and make a string of it .. how to do this using Jquery ? I tried this same thing with javascript but only problem is that it doesnt add my first textbox value first time but it adds it to a string only when i keep typing in my other 2 textboxes and after that only my first textbox value gets added into a string … Actually I have 17 textboxes … and i am trying to store values of 16 textboxes into 17th textbox which has hidden attribute ? I need a Jquery code for this because i think that javascript isnt a good option for this …

EDIT:- I have another requirement above thing is for submitting a bank account number but what about Updating it ?? so far i have done like this and its not working .. debugger cannt find a keyUp event for class=”ac” or anything.

     <div class="alert-date-field">

        <div class="alert-labelfield">
            <%: Html.Label("Account Number") %>
        </div>
    <div  style=" float:right; width:495px;" >
     <input type="text" maxlength="1" size="10px" class="ac" id="ac1"    />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac2"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac3"    />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac4"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac5"  />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac6"    />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac7"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac8"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac9"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac10"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac11"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac12"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac13"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac14"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac15"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac16"   />
  <%: Html.TextBoxFor(model => model.EFTUpdateAccountDescriptor.BankAccountNo, new { ID = "bankaccountnumber", maxlength = "16", Style = " width : 120px;" })%>
                        </div>
                     </div>
    <script type="text/javascript">
 $(document).ready(function () {
     document.getElementById('ReABNumber').value = "";
     document.getElementById('RfinalAcntNumber').value = "";
     //  document.getElementById('').value;
    // debugger;
     var jqAcnt = document.getElementById('bankaccountnumber').value;
     var jqAbNum = document.getElementById('finalABNumber').value;
     var inpAcnt = jqAcnt;
     var inpAcntArray = new Array(
                     (inpAcnt.charAt(0)),
        (inpAcnt.charAt(1)),
        (inpAcnt.charAt(2)),
        (inpAcnt.charAt(3)),
        (inpAcnt.charAt(4)),
        (inpAcnt.charAt(5)),
        (inpAcnt.charAt(6)),
        (inpAcnt.charAt(7)),
         (inpAcnt.charAt(8)),
         (inpAcnt.charAt(9)),
         (inpAcnt.charAt(10)),
         (inpAcnt.charAt(11)),
         (inpAcnt.charAt(12)),
         (inpAcnt.charAt(13)),
         (inpAcnt.charAt(14)),
         (inpAcnt.charAt(15))
     );
     document.getElementById('ac1').value = inpAcntArray.slice(0, 1);
     document.getElementById('ac2').value = inpAcntArray.slice(1, 2);
     document.getElementById('ac3').value = inpAcntArray.slice(2, 3);
     document.getElementById('ac4').value = inpAcntArray.slice(3, 4);
     document.getElementById('ac5').value = inpAcntArray.slice(4, 5);
     document.getElementById('ac6').value = inpAcntArray.slice(5, 6);
     document.getElementById('ac7').value = inpAcntArray.slice(6, 7);
     document.getElementById('ac8').value = inpAcntArray.slice(7, 8);
     document.getElementById('ac9').value = inpAcntArray.slice(8, 9);
     document.getElementById('ac10').value = inpAcntArray.slice(9, 10);
     document.getElementById('ac11').value = inpAcntArray.slice(10, 11);
     document.getElementById('ac12').value = inpAcntArray.slice(11, 12);
     document.getElementById('ac13').value = inpAcntArray.slice(12, 13);
     document.getElementById('ac14').value = inpAcntArray.slice(13, 14);
     document.getElementById('ac15').value = inpAcntArray.slice(14, 15);
     document.getElementById('ac16').value = inpAcntArray.slice(15);
     var updateAct = document.getElementById('RfinalAcntNumber').value;
     var abArray = new Array((jqAbNum.charAt(0)),
        (jqAbNum.charAt(1)),
        (jqAbNum.charAt(2)),
        (jqAbNum.charAt(3)),
        (jqAbNum.charAt(4)),
        (jqAbNum.charAt(5)),
        (jqAbNum.charAt(6)),
        (jqAbNum.charAt(7)),
         (jqAbNum.charAt(8)),
         (jqAbNum.charAt(9))
     );
     document.getElementById('ab1').value = jqAbNum.slice(0, 1);
     document.getElementById('ab2').value = jqAbNum.slice(1, 2);
     document.getElementById('ab3').value = jqAbNum.slice(2, 3);
     document.getElementById('ab4').value = jqAbNum.slice(3, 4);
     document.getElementById('ab5').value = jqAbNum.slice(4, 5);
     document.getElementById('ab6').value = jqAbNum.slice(5, 6);
     document.getElementById('ab7').value = jqAbNum.slice(6, 7);
     document.getElementById('ab8').value = jqAbNum.slice(7, 8);
     document.getElementById('ab9').value = jqAbNum.slice(8);

 });
 $('.ac').keyup(function () {
     debugger;
     var elem17 = $('#bankaccountnumber').val('')[0];
     $('.ac').each(function () {
         elem17.value += this.value;
     });
 });
 $('.reAC').keyup(function () {

     var elem1 = $('#RfinalAcntNumber').val('')[0];
     $('.ac').each(function () {
         elem1.value += this.value;
     });
 });
 $('.ab').keyup(function () {

     var ele17 = $('#finalABNumber').val('')[0];
     $('.ab').each(function () {
         ele17.value += this.value;
     });
 });
 $('.reAB').keyup(function () {

     var ele1 = $('#ReABNumber').val('')[0];
     $('.reAB').each(function () {
         ele1.value += this.value;
     });
 });
   </script>
  <style type="text/css">
    .ac{width:15px;}    
    .reAC{width:15px;}
    .ab{width:15px;}
     .reAB{width:15px;}
    </style>

Answer 1

update
If you want it to happen while you are typing, then bind to the keyup event of the input boxes..

$('.digit').keyup(function(){

    var elem17 = $('#elem17').val('')[0];
    $('.digit').each(function(){
      elem17.value += this.value;
    });

});

updated demo at http://jsfiddle.net/gaby/NNRtt/1/

---

Original answer

You can add a class to these elements class="digit" and then do

var elem17 = $('#element17id').val('')[0];
$('.digit').each(function(){
  elem17.value += this.value;
});

The above is assuming that with textbox you mean input elements of type="text".

demo at http://jsfiddle.net/gaby/NNRtt/

---

If you mean some other kind of element like span or div.. then use

var alltext = '';
$('.digit').each(function(){
  alltext += $(this).text();
});
$('#element17id').text( alltext );