All geek questions in one place

Manipulate the result of form data

I want to change the result of my form 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 similar 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

It is possible to have several rows (not only 2), and they are not called row_n , this name, for example, is intended for purposes

+5
source share
2 answers

You can combine using 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>
+1
source

This solution is not as strong as the index, but I think it is a little easier.

 $("#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>
+1
source

Source: https://habr.com/ru/post/1271187/

More articles:


All Articles