文字列、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

あなたはすべての"#sym_form .as_sym"の要素を選択するために、.querySelectorAll()を使用することができ、Array.prototype.forEach()、Function.prototype.call()それぞれの文字や、結果の文字列の間にカンマ,文字を含めること.split()、.join()を使用し、文字列に各"#sym_form .as_sym"要素のinputイベントconcantenate値で、各要素にinputイベントを添付しなければならないものを

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>