How to merge items in an array on a form submit?

Question

This form has a text input for each day of the week, as well as an "Add Another" button to create more inputs under each day. The submissions go through but only the first value that's entered into the input gets posted to the Spreadsheet's cell.

So for example, if the user has multiple entries entered in for SUNDAY_NOTES, like so:

SUNDAY_NOTES = "Late."

SUNDAY_NOTES = "This thing."

SUNDAY_NOTES = "Something."

... then only "Late" ends up in the spreadsheet's cell with my current code. Ideally, I'd like to have a comma-separated or linebreak-separated string in the cell: ("Late., This thing., Something."). I'm using the following code (which I copied) to post the submissions to a Google Spreadsheet.

<form method="post" id="timesheet" >
 <input type="text" name="SUNDAY_NOTES">
 <input type="text" name="SUNDAY_NOTES">
  // user can click a button to keep adding more SUNDAY_NOTES fields

 <input type="text" name="MONDAY_NOTES">
   // and so forth

 <input type="submit" id="submit" />
</form>

<script>

    var $form = $('form#timesheet'),
    url = 'https://script.google.com/macros/s/abcd123456789/exec'

    $('#submit').on('click', function(e) {
        var jqxhr = $.ajax({
        url: url,
        method: "GET",
        dataType: "json",
        data: $form.serializeArray()
            }).success(
                console.log('success')
            );
    })
</script> 

(This question doesn't accurately describe the use-case of my form, I just overly-simplified it for posting purposes)

Answer 1

to have an array of inputs values with same name, add [] after the name like : name="SUNDAY_NOTES[]" ,

so replace <input type="text" name="SUNDAY_NOTES"> with <input type="text" name="SUNDAY_NOTES[]">

then join the array values with a comma with

data : $form.serializeArray().map((e) => { return e.value}).join(',')

$form.serializeArray() will have an array of objects, that's why it's useful to use .map() to retun an array of values to be able to join them.

$(document).ready(function() {
  var $form = $('form#timesheet');

  $form.submit(function(e) {
    e.preventDefault();

    var myValues = $form.serializeArray().map((e) => {
      return e.value
    }).join(',');

    console.log(myValues);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="timesheet">
  <input type="text" name="SUNDAY_NOTES[]">
  <input type="text" name="SUNDAY_NOTES[]"> // user can click a button to keep adding more SUNDAY_NOTES fields

  <input type="text" name="MONDAY_NOTES[]"> // and so forth

  <input type="submit" id="submit" />
</form>

EDIT :

in order to keep the structure as is ( key, value pairs ), create a function group that loops through an array and add the values to the key

function group(arr){
    var tempArr = [];
    arr.forEach(function(e){          
      if(!tempArr[e.name]) tempArr[e.name] = e.value
      else tempArr[e.name] += ',' + e.value
  });

  return tempArr;
}

$('#submit').on('click', function(e) {
    var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: group($form.serializeArray())
    // rest of your code

here's a fiddle : https://jsfiddle.net/cwgL6L0L/29/ ( check the console )