CODEWITHSUNDEEP
phphtmllaravel-5
Alexander
Alexander

Reputation: 1029

Laravel 5: Dynamic Array in Request

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="";
}

Upvotes: 2

Views: 314

Answers (2)

Harsha
Harsha

Reputation: 11

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
});

...

}

Upvotes: 1

Alexander
Alexander

Reputation: 1029

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.

Upvotes: 0

Related Questions