は、私はHTMLにかなり新しいだといくつかの簡単なアプリケーションを作成しようとしている文字列

Question

<fieldset> 
 
    <legend>Making a String</legend> 
 
    Test1:<br/> 
 
    <input type="text" name="Test1Field"/><br/> 
 
    Test2:<br/> 
 
    <input type="text" name="Test2Field"/><br/> 
 
    Test3:<br/> 
 
    <select name="Test3Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> 
 
    Test4:<br/> 
 
    <select name="Test4Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> 
 
    Test5:<br/> 
 
    <select name="Test5Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> 
 
    <br/> 
 
    <button> Submit </button> 
 
</fieldset>

にHTMLフォームに値を変換します。私は、このHTML <form>に挿入された値を、送信ボタンが押されると文字列に変換できるようにします。例えば

：
"Test1FieldValue, Test2FieldValue, Test3FieldValue, Test4FieldValue, Test5FieldValue"

これを行うことができること方法はありますか？

Answer 1

これはjavascriptで行うことができます。基本的には、ボタンにeventListenerを追加し、すべてのフィールド（入力と選択）を見つけて文字列を作成します。以下は、（私はコードが何のためにいくつかのコメントを追加しました）あなたのためにそれを行うだろう。

document.getElementById("submit").addEventListener("click", function() { // add an listener to the button 
 
    var fieldset = document.getElementById("fieldset"); // find the fieldset 
 
    var asArray = Array.from(fieldset.querySelectorAll("input, select")).map(v => { // loop over all found input and select elements 
 
    return v.name + ":" + v.value; // return the name and the value 
 
    }); 
 
    console.log(asArray); 
 
    var asString = asArray.join(); // join the resulting array to a string 
 
    console.log(asString); 
 

 
})

<fieldset id="fieldset"> 
 

 
    <legend>Making a String</legend> 
 
    Test1: 
 
    <br/> 
 
    <input type="text" name="Test1Field" /> 
 
    <br/> Test2: 
 

 
    <br/> 
 
    <input type="text" name="Test2Field" /> 
 
    <br/> Test3: 
 

 
    <br/> 
 
    <select name="Test3Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> Test4: 
 
    <br/> 
 
    <select name="Test4Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> Test5: 
 
    <br/> 
 
    <select name="Test5Field"> 
 
    <option value="test1">0</option> 
 
    <option value="test2">1</option> 
 
    </select> 
 
    <br/> 
 
    <br/> 
 

 
    <button id="submit"> Submit </button> 
 
</fieldset>

Answer 2

HTML：

<input type="text" name="textfield1" id="textfield1" value="value" /> 

JS：

var nameValue = document.getElementById("textfield1").value;