Using a repeat.for for an array to Edit in a form not returning values

Help Requests
1

I am trying to use an array to fill out a series of editable input fields. Then I am taking those fields and sending them to a perl script to save the data to our database.

The problem is that when I try to use var formData = new FormData(invoiceForm) to send the data, that it doesn’t properly fill out the values of the form.

What I end up with when I read the logs of the perl script is this:

invoice.pl fdat
$VAR1 = {
          'r.origName' => '^@',
          'old_storage_account' => 'true',
          'old_potential_bad_debt' => 'true',
          'old_internal_adjustment' => 'false',
          'storage_account' => 'on',
          'r.name' => 'test^@',
          'original_invoice' => '',
          'REMOTE_USER' => 'RSS',
          'debt_no' => '30',
          'clt_ref_no' => 'ORD190049845 011',
          'status_date' => '2020-12-19',
          'status_code' => 'Select A Status',
          'old_status_date' => '2020-12-19',
          'old_status_code' => '102',
          'SAVE' => '1',
          'debt_id' => '635360',
          'original_original_invoice' => '',
          'potential_bad_debt' => 'on',
          'debt_id_no' => '635360-30',
          'activity_note' => '',
          'clt_id' => '8022'
        };

Where the r.name and r.origName are supposed to be filled out as values like user_defined_freeform|Account Name and user_defined_freeform|Account Name|orig and then have their values be what is put into the input field.

My html looks like this:

                                    <template repeat.for="r of user_defined_freeform"
                                        ref="udfValues">
                                        <template if.bind="r.value == 'HEADER'">
                                            <template if.bind="r.line > 1">
                                                <br>
                                            </template>
                                            <tr colspan="2">
                                                <td class="udfTdHeader">
                                                    <b>${r.label}</b>
                                                </td>
                                            </tr>
                                        </template>
                                        <template else>
                                            <tr>
                                                <td class="udfTdHeader lt_tan" align="right"
                                                    valign="center" width="30%">
                                                    ${r.label}
                                                </td>
                                                <template if.bind="r.user_edit ==1">
                                                    <td class="lt_tan" contenteditable 
                                                        element.ref="r.name"
                                                        textcontent.bind="r.value">

                                                    </td>
                                                </template>
                                                <td class="lt_tan" valign="top" width="70%">
                                                    <template if.bind="r.user_edit == 1">
                                                        <input type="text" name="r.name"
                                                            ref="r.name"
                                                            size="30" value.bind="r.value"
                                                            onkeyup.call="canSave()">
                                                        <input type="hidden" name="r.origName"
                                                            element.ref="r.origName"
                                                            value.one-time="r.value">
                                                    </template>
                                                    <template else>
                                                        ${r.value || ''}
                                                    </template>
                                                </td>
                                            </tr>
                                        </template>

and my javascript file looks like this where I am trying to save things is following:

    async saveInvoice()
    {
        const self = this;
        var url = 'http://[ip address]/invoice.pl';
        var invoiceForm = document.forms['invoiceForm'];

        if (invoiceForm)
        {
            var formData = new FormData(invoiceForm);
            formData.append('SAVE', 1);
            formData.append('REMOTE_USER', this.user);

            this.save = 1;

            var i = 0;
            var udfLength = this.user_defined_freeform.length;

            for (i; i < udfLength; i++)
            {
                var udfName = this.user_defined_freeform[i].name;
                //var domName = this.udfValues[i];

                console.log('domName', this.udfValues);
                console.log('udfName', udfName);
                console.log('udf name', invoiceForm.udfName);

            }
            
            return self.httpClient
            .fetch(url, {
                body: formData,
                method: 'POST'
            })
                .then (async (response) => {
                    this.message = await response.json();
                    //console.log('message', this.message);
                    //alert(this.message[0].message);

                    this.goto_dbtr(this.debt_id_no);
                    this.save = 0;
                });

        }
        
    }

If you notice above in the html, I tried to use element.ref and contenteditable to try to see if I could access the values that way, but I was unable to.

What am I doing wrong?

Thanks