Laravel 5: Dynamic Array in Request

Question

I have a table consisting of three input values and an "Add" button. When the "Add" button is pressed, the input values are "saved" into the row, and a new row is made. What I'm trying to do, once the form is submitted, is obtain in array format each of the rows inputted. However, the Request either only obtains the newest row (which hasn't been added anyway) or it doesn't obtain anything at all. What am I doing wrong?

My code, for reference:

<table id="data_table" class="table table-striped table-responsive">
    <thead>
        <tr>
            <th>Company Name</th>
            <th>Years at Company</th>
            <th>Months at Company</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="no-leftpad"><input type="text" id="new_name" class="length"></td>
            <td>                                                                                 
                <select id="new_years" class="form-control">
                    <option value="-">-</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>                                    
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10+</option>
                </select>
            </td>
            <td>

                <select id="new_months" class="form-control">
                    <option value="-">-</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                </select>
            </td>
            <td>
                <input type="button" class="add" onclick="add_row();" value="Add">
            </td>
        </tr>
    </tbody>
</table>

....

function add_row() {
    var new_companyname=document.getElementById("new_name").value;
    var new_years=document.getElementById("new_years").value;
    var new_months=document.getElementById("new_months").value;

    var table=document.getElementById("data_table");
    var table_len=(table.rows.length)-1;
    var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>"
                 +"<td id='companyname_row"+table_len+"'>"
                 +"<input type='text' name='company_name["+table_len+"][company_name]' value='"+new_companyname+"' disabled>"
                 +"</td>"
                 +"<td id='years_row"+table_len+"'>"
                 +"<input type='text' name='company_years["+table_len+"][company_years]' value='"+new_years+"' disabled>"
                 +"</td>"
                 +"<td id='months_row"+table_len+"'>"
                 +"<input type='text' name='company_months["+table_len+"][company_months]' value='"+new_months+"' disabled>"
                 +"</td>"
                 +"<td>"
                 +"<a type='button' value='Delete' class='fa fa-trash-o delete' onclick='delete_row("+table_len+")'></a></td></tr>";

    document.getElementById("new_companyname").value="";
    document.getElementById("new_years").value="";
    document.getElementById("new_months").value="";
}

Possible duplicate of [Multiple inputs with same name through POST in php](https://stackoverflow.com/questions/7880619/multiple-inputs-with-same-name-through-post-in-php) — Bagus Tesa, May 24 '17 at 01:00
My main concern was more on why Request wasn't taking in the inputs I was generating through the JavaScript function. I did manage to figure it out, in my answer below. — Alexander, May 24 '17 at 01:24

score 1 · Answer 1 · edited Jul 09 '17 at 20:21

1

There seems to be a typo in function add_row():

document.getElementById("new_companyname").value="";

should be:

document.getElementById("new_name").value="";

Also, if you want to temporarily persist rows it can be pushed to an array in function add_row() like:

var companyList = [];

function add_row() {
...

companyList.push({
  companyName:new_companyname,
  yearsAtCompany:new_years,
  monthsAtCompany:new_months
});

...

}

edited Jul 09 '17 at 20:21

baikho

5,203
4
40
47

answered May 24 '17 at 01:46

Harsha

11
2

The typo fix definitely helped clean it up a bit, so thank you for that. As for the array suggestion, I'll definitely keep it in mind. – Alexander May 24 '17 at 13:32

score 0 · Accepted Answer · answered May 24 '17 at 01:23

Banged at it a bit more, and I realized what the issue was: setting the inputs to "disabled" prevented the Request from obtaining it. By switching it to "readonly" I was able to get the desired effect and still obtain the array.

Though that does have me curious as to why the Request doesn't accept disabled inputs, if anyone wants to address that.

Laravel 5: Dynamic Array in Request

2 Answers2