Menu
I would like to change the result of my form's data before submitting but I am struggling with my script
My HTML
<form>
<table>
<tr class="row_1">
<td>
<input name="flavour_1" type="text"><br>
<input name="flavour_2" type="text">
</td>
<td>
<input name="taste_1" type="text"><br>
<input name="taste_2" type="text">
</td>
</tr>
<tr class="row_2">
<td>
<input name="flavour_1" type="text"><br>
<input name="flavour_2" type="text">
</td>
<td>
<input name="taste_1" type="text"><br>
<input name="taste_2" type="text">
</td>
</tr>
</table>
<button type="button" id="serForm">Serialize Form </button>
</form>
Javascript:
$("#serForm").on('click', function() {
var db = $("form").serializeArray();
for (var m = 0; m < db.length; m++) {
var e = db[m],
name = e.name,
value = e.value;
var parts = name.split(/_(?=\d+$)/);
if (parts.length === 2) {
name[parts[0]] = name[parts[0]] || [];
name[parts[0]][parts[1] - 1] = e;
delete e;
}
}
})
I am trying to get a result like or similar to this.
"flavour": [{"row_1_flavour_1_value", "row_1_flavour_2_value"},{"row_2_flavour_1_value", "row_2_flavour_2_value"}],
"taste": [{"row_1_taste_1_value", "row_1_taste_2_value"},{"row_2_taste_1_value", "row__taste_2_value"}]
Note
There is a possibility of having multiple rows (not only 2) and they are not named row_n the name is just for example purpose
213
You can combine the use of Array.prototype.filter(), Array.prototype.map(), RegExp.prototype.test() and finally Array.prototype.reduce().
Code:
$('#serForm').on('click', function () {
var db = $('form').serializeArray(),
getFormRowValues = (arr, str, numPerRow) => arr
.filter(el => new RegExp(str).test(el.name))
.map(el => el.value)
.reduce((a, c, i) => ((a[i / numPerRow | 0] = a[i / numPerRow | 0] || []).push(c), a), []),
result = {
flavour: getFormRowValues(db, 'flavour', 2),
taste: getFormRowValues(db, 'taste', 2)
};
console.log(result);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr class="row_1">
<td>
<input name="flavour_1" value="flavour_1_value" type="text"><br>
<input name="flavour_2" value="flavour_2_value" type="text">
</td>
<td>
<input name="taste_1" value="taste_1_value" type="text"><br>
<input name="taste_2" value="taste_2_value" type="text">
</td>
</tr>
<tr class="row_2">
<td>
<input name="flavour_1" value="flavour_1_value" type="text"><br>
<input name="flavour_2" value="flavour_2_value" type="text">
</td>
<td>
<input name="taste_1" value="taste_1_value" type="text"><br>
<input name="taste_2" value="taste_2_value" type="text">
</td>
</tr>
</table>
<button type="button" id="serForm">Serialize Form </button>
</form>This solutions isn't as index heavy but I think it a bit more simple.
$("#serForm").on('click', function() {
var flavourArr = getInputValuesByName('flavour');
var tasteArr = getInputValuesByName('taste');
console.log(flavourArr);
console.log(tasteArr);
})
function getInputValuesByName(name){
var arr = [];
$('form input[name*="' + name + '"]').each(function(k,v){
var parentClass = $(v).closest('tr').attr('class');
arr.push(parentClass + "_" + $(v).val());
});
return arr;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table>
<tr class="row_1">
<td>
<input name="flavour_1" value="flavour_1_value" type="text"><br>
<input name="flavour_2" value="flavour_2_value" type="text">
</td>
<td>
<input name="taste_1" value="taste_1_value" type="text"><br>
<input name="taste_2" value="taste_2_value" type="text">
</td>
</tr>
<tr class="row_2">
<td>
<input name="flavour_1" value="flavour_1_value" type="text"><br>
<input name="flavour_2" value="flavour_2_value" type="text">
</td>
<td>
<input name="taste_1" value="taste_1_value" type="text"><br>
<input name="taste_2" value="taste_2_value" type="text">
</td>
</tr>
</table>
<button type="button" id="serForm">Serialize Form </button>
</form>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
