Попытка получить все входное значение в строку, jquery или javascript

Question

Я пытаюсь использовать jquery или javascript получить все входное значение в строку (1,2,3,4) и игнорировать пустое значение. Спасибо.

<form id="sym_form"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_1" value="1"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_2" value="2"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_3" value="3"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_4" value="4"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_5" value=""> 
 

 
\t \t </form>

Answer 1

// string to keep the result 
    var output = ""; 
    // iterate over all inputs with class 'as_sym' inside the '#sym_form' 
    $('#sym_form > input[class=as_sym]').each(function(){ 
    // only inputs with non-empty values                           
    if ($(this).val() != "") { 
     // the first value doesn't have a comma in front of it 
     // subsequent values do have a comma in front of them 
     if (output == "") { 
     output += $(this).val(); 
     } else { 
     output += "," + $(this).val(); 
     } 
    } 
    }); 
    // here do whatever you want with the 'output' variable 

Answer 2

const form = document.getELementById("sym_form"); 
for (var element of form.elements) { 
    if(element.nodeName === "INPUT" && element.value) { 
     // do something with element.value 
    } 
} 

Answer 3

var $inputs = $('#sym_form .as_sym'); 
 
var result =""; 
 

 
$.each($inputs, function(i, v) { 
 
    var val = $(this).val(); 
 
    result += val; 
 
    }); 
 

 
$('#result').text(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="sym_form"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_1" value="1"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_2" value="2"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_3" value="3"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_4" value="4"> 
 
\t \t \t <input type="text" class="as_sym" id="sym_5" value=""> 
 

 
\t \t </form> 
 

 
<p id="result"></p>

Answer 4

Вы можете использовать .querySelectorAll(), чтобы выбрать все элементы "#sym_form .as_sym", Array.prototype.forEach(), Function.prototype.call() прикрепить input события к каждому элементу, в input concantenate события значений каждого "#sym_form .as_sym" элемента в строку, используйте .split(), .join() включить запятую , символа между символами или результирующей строкой

var inputs = document.querySelectorAll("#sym_form .as_sym"); 
 
Array.prototype.forEach.call(inputs, function(input) { 
 
    input.addEventListener("input", function(e) { 
 
    for (var i = 0, val = "", len = inputs.length; i < len; i++) { 
 
     val += inputs[i].value; 
 
    } 
 
    console.log(val.split("").join(",")) 
 
    }) 
 
})

<form id="sym_form"> 
 
    <input type="text" class="as_sym" id="sym_1" value="1"> 
 
    <input type="text" class="as_sym" id="sym_2" value="2"> 
 
    <input type="text" class="as_sym" id="sym_3" value="3"> 
 
    <input type="text" class="as_sym" id="sym_4" value="4"> 
 
    <input type="text" class="as_sym" id="sym_5" value=""> 
 

 
</form>