Converting values on HTML form to a string - 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>
I'm fairly new to HTML and trying to make some simple applications. I want to be able to convert the values that are inserted into this HTML <form> into a string once the submit button is pressed.
For example:
"Test1FieldValue, Test2FieldValue, Test3FieldValue, Test4FieldValue, Test5FieldValue"
Is there any way that this can be done?

Answer 1

You can do this with javascript. Basically, add an eventListener on your button, find all fields (inputs and selects) and create the string. The following will do that for you (I've added some comments for what the code does):
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;