string concate code using jquery

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>

You know that jQuery is JavaScript? jQuery can only do what JavaScript can do. It just makes some things easier. — Felix Kling
– Felix Kling, Commented Jul 27, 2011 at 22:07
i know that .. but i am just trying to find an alternative to sluggish javascript — Ashes
– Ashes, Commented Jul 27, 2011 at 22:28

Gabriele Petrioli · Accepted Answer · 2011-07-27 22:48:33Z

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 );

edited Jul 27, 2011 at 22:48

answered Jul 27, 2011 at 22:06

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

3 Comments

Ashes Over a year ago

Lets say i want to form a number " 1 2 3 4 5 6 7 8 9 0 9 8 7 6 5 4 " i am inserting individual digit in each textbox ..i have 17th hidden textbox ... now i want HTML code and Jquery code for adding all of these 16 text box values in 17th textbox ...

Ashes Over a year ago

i dont have a button to gather ?? i just want a complete string when user starts typing in textboxes from textbox 1 to textbox 16 .. once he finishes typing in 16th textbox , i want a complete number in my 17th textbox .. your demo wont satisfy my requirement as it has a button click event

Gabriele Petrioli Over a year ago

@Ashes, have a look at the updated answer and demo (at the top of the answer)..

jfriend00 · Accepted Answer · 2011-07-27 23:43:22Z

1

Using plain javascript and assuming you had 16 text boxes with id="item1" through "item16" and the 17th field has an id="itemTotal":

var str = "";
for (var i = 1; i <= 16; i++) {
    str += document.getElementById("item" + i).value;
}
document.getElementById("itemTotal").value = str;

I assume you would also need to validate the data (checking for illegal characters or empty fields).

OK, based on your other comments, it sounds like you want this collection into the common field to work automatically as the user types. Here's a jQuery version that does that:

Working Demo: http://jsfiddle.net/jfriend00/kWPwZ/

HTML:

<div id="input">
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
</div>

<div id="result">
<input id="total" value="0000000000000000" readonly="readonly"/>
</div>

Javascript (executed only when DOM is ready):

function collectValues() {
    var result="";
    var value;
    $(".digit").each(function() {
        value = $(this).val();
        if (!value) {
            value = "0";
        }
        result += value;
    });
    $("#total").val(result);
}

function handleKey(e) {
    if (e.which < 48 || e.which >= 58) {
        e.preventDefault();
    }
    setTimeout(collectValues, 1);   // collect the values after the key has been processed
}

function select() {
    $(this).select();
}

function clear() {
    $(this).val("");
}

function check() {
    if ($(this).val() == "") {
        $(this).val("0");
    }
}

$(".digit").keypress(handleKey).focus(select).blur(check).click(clear);

edited Jul 27, 2011 at 23:43

answered Jul 27, 2011 at 22:08

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

9 Comments

Ashes Over a year ago

shall i call this function on KeyUp event or on KeyDown ?? i am confused

jfriend00 Over a year ago

You would call this when the user was done with the input and submitting the form - usually from some sort of button. If you want it updated live while they type (which is a new requirement not mentioned in your question), you would have to do more work including accounting for empty boxes (e.g. substituting zeroes or something like that) and hooking keyup for each field.

Ashes Over a year ago

i did same thing ... but on which event shall i have to call this function ?? on keyUp or on MouseOver ??.. there are so many options in HTML ...but those arent helpfull for me

jfriend00 Over a year ago

Please fix your question to more accurately describe what you really want and maybe you will get an answer that meets those needs. It would work best if you provided the relevant snippet of actual HTML.

jfriend00 Over a year ago

@Ashes - I added a solution that updates live as the user types.

|

Collectives™ on Stack Overflow

string concate code using jquery

2 Answers 2

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related