Concat Form Field Values - html

Question

Hopefully I'm not repeating this question in anyways. But I am trying to get a form section with its name values and field vales to put as a single concat string. So like
Form Input:
First Name: John
Last Name: Smith
Fields 5 - 10.. etc
String Output:
FirstName=John&LastName=Smith&Field2=Value2&Field_etc=Value_etc
I tried
var inputArray = $("form#form :input").each(function () {
var input = $(this);
console.log(input.attr('name') + ":" + input.val());
});
Which outputs a test value correctly in the console.log as
firstName:John
lastName:Smith
but I'm struggling on the next bit of code that will help console.log it as a combine array string. Not sure if this is a for loop or something that helps the next step.

Answer 1

See comments in code below, maybe this might help you get on the right track...
The main cool thing here is to store submission data as an object and then use $.param() to convert submission to url string.
// on form submit
$(document).on('submit', '#form', function(e) {
// prevent form default submit action
e.preventDefault();
// set empty submission object
let submission = {};
// for each of this form submit event target object entries as key/field
for (const [key, field] of Object.entries(e.target)) {
// if object entry (field) has a name attribute
if (field.name) {
// add name/value to submission object
submission[field.name] = field.value;
}
}
// convert submission object to url params string
var paramsStr = $.param( submission );
// log the string
console.log(paramsStr)
});
<form id="form">
<input name="firstName" value="John" type="text" />
<input name="lastName" value="Smith" type="text" />
<input name="userName" value="johnsmith" type="text" />
<button type="submit">Submit</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Loop through the input elements and concatenate the name and value:
const inputs = document.querySelectorAll('#form input')
let msg
inputs.forEach(inp => {
inp.onkeyup = () => {
msg = 'String Output: '
inputs.forEach(i => msg += `${i.name}=${i.value}&`)
console.clear()
console.log(`\r\n${msg.slice(0, -1)}\r\n\r\n`)
}
})
input {
display: block;
margin-bottom: 8px;
font:18px/1.2em Arial;
}
<form id='form'>
<input name='FirstName' placeholder='First Name' />
<input name='LastName' placeholder='Last Name' />
<input name='Example1' placeholder='Example 1' />
<input name='Example2' placeholder='Example 2' />
</form>