JQuery/JavaScript concatenate Входные значения для каждого ключа вниз

Question

У меня есть несколько полей ввода - количество полей будет динамическим - нужно объединить значения в другое поле. Объедините идентификаторы от C01 до N и сохраните их в поле cNum. Пожалуйста помоги.

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

Answer 1

В простом случае вы можете попробовать ниже код или запустить решение на jsfiddle. Пояснение: ключ вверх, он будет сцеплять все значение текстового поля, начиная с заглавной «C» и привести его в текст «CNUM»

$("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>

Answer 2

Если бы это было мне, я бы отдал C01-C16 дополнительный класс что-то вроде

<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"/> 

, а затем

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

, но если вы не» t хотите сделать это, вы можете сделать что-то вроде этого

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

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

Answer 3

попробовать этот

var concatenatedValue = ""; 

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

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

}); 
alert(concatenatedValue); 

Answer 4

Вы можете слушать на событие KeyUp для класса «cardNum» и объединить все входы под div «cardDiv» и установить в поле ввода.

вот рабочий пример.

$(".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>