Pass all input values from a row in jQuery datatable to asp.net mvc

Question

Here is the table with the inputs I want to pass:

Code:

        $(document).ready(function () {

            var table;

            $("#makeEditable").on("mousedown", "td .fa.fa-minus-square", function (e) {
                table.row($(this).closest("tr")).remove().draw();
            })

            $("#makeEditable").on('mousedown.edit', "i.edit.material-icons", function (e) {           
                $(this).text("save").removeClass().addClass("save material-icons");
                var $row = $(this).closest("tr").off("mousedown");
                var $tds = $row.find("td").not(':last');//.not(':first');

                $.each($tds, function (i, el) {
                    var txt = $(this).text();
                    $(this).html("").append("<input type='text' class=\"form-control valid\" value=\"" + txt + "\">");
                });

            });

            $("#makeEditable").on('mousedown', "input", function (e) {
                e.stopPropagation();
            });
$("#makeEditable").on('mousedown.save', "i.save.material-icons", function (e) {
    var ubicacionesJquery = { ubicacion_id : $(this).attr("data-id"), armario: "input1", cajon: "input2" };

    $.ajax({
                    type: 'POST',
                    data: ubicacionesJquery,
                    url: '/gestiondeubicaciones/Editar',
                    cache: false,
                    success: function (result) {
                    }
           });

    $(this).text("edit").removeClass().addClass("edit material-icons");
    var $row = $(this).closest("tr");
    var $tds = $row.find("td").not(':last'); 

    $.each($tds, function (i, el) {
        var txt = $(this).find("input").val()
        $(this).html(txt);
    });
});

Here is the html in My controller when NOT in editing mode

@using (Html.BeginForm("AnadirEditar", "gestiondeubicaciones", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <table class="table table-hover table-bordered" id="makeEditable">
        <tfoot>

            <tr>
                <td>
                    <div class="form-group">
                        @Html.TextBoxFor(a => a.armario, new { @class = "form-control", @id = "addArmario" })
                        @Html.ValidationMessageFor(model => model.armario, "", new { @class = "text-danger" })
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        @Html.TextBoxFor(a => a.cajon, new { @class = "form-control", @id = "addCajon" })
                        @Html.ValidationMessageFor(model => model.cajon, "", new { @class = "text-danger" })
                    </div>
                </td>
                <td>
                    <a class="popup-add" href="#" onclick="AddData();" title="Anadir">
                        <i class="add material-icons">add_box</i>
                    </a>
                </td>
            </tr>
        </tfoot>
        <thead>
            <tr>
                <th>Armario</th>
                <th>Cajon</th>
                <th></th>
            </tr>
        </thead>
    </table>
}

And here is the html in the controller when in EDITING mode

 <table id="newRow" style="display:none">
        <tbody>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                    <i class="material-icons" aria-hidden="true">edit</i>
                    <i class="delete material-icons">delete</i>
                </td>
            </tr>
        </tbody>
    </table>

Here is the html that is generated when not in editing mode

<table class="table table-hover table-bordered dataTable dtr-inline" id="makeEditable" role="grid" aria-describedby="makeEditable_info" style="width: 1749px; position: relative;">
    <tfoot>

        <tr>
            <td rowspan="1" colspan="1">
                <div class="form-group">
                    <input class="form-control" id="armario" name="armario" type="text" value="">
                    <span class="field-validation-valid" data-valmsg-for="armario" data-valmsg-replace="true"></span>
                </div>
            </td>
            <td rowspan="1" colspan="1">
                <div class="form-group">
                    <input class="form-control" id="cajon" name="cajon" type="text" value="">
                    <span class="field-validation-valid" data-valmsg-for="cajon" data-valmsg-replace="true"></span>
                </div>
            </td>
            <td rowspan="1" colspan="1"><input type="submit" value="Salvar" class="btn btn-primary"> <a class="popup-add" href="#" onclick="AddData();" title="Anadir"><i class="add material-icons">add_box</i></a></td>
        </tr>
    </tfoot>
    <thead>
        <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 721.767px;" aria-label="Armario: Activar para ordenar la columna de manera descendente" aria-sort="ascending">Armario</th><th class="sorting" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 721.767px;" aria-label="Cajon: Activar para ordenar la columna de manera ascendente">Cajon</th><th class="sorting" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 190.767px;" aria-label=": Activar para ordenar la columna de manera ascendente"></th></tr>
    </thead>

    <tbody><tr role="row" class="odd">
            <td class="sorting_1" tabindex="0">Grande E3</td>
            <td>232</td>
            <td><a class="popup-edit"><i id="editSave" data-armario="Grande E3" data-id="23" class="edit material-icons" title="Detalles">edit</i></a><a class="popup-delete" href="#" onclick="DeleteData(23);" title="Eliminar"><i class="delete material-icons">delete</i></a></td></tr>
            <tr role="row" class="even"><td class="sorting_1" tabindex="0">Grande F23</td>
            <td>527m</td>
            <td><a class="popup-edit"><i id="editSave" data-armario="Grande F23" data-id="29" class="edit material-icons" title="Detalles">edit</i></a><a class="popup-delete" href="#" onclick="DeleteData(29);" title="Eliminar"><i class="delete material-icons">delete</i></a></td>
            </tr>
   </tbody>
</table>

This is what change when in editing mode.

<td><input type="text" class="form-control valid" value="232"></td>

Where I wrote "input1" and "input2" I would like to have $tds[0] and $tds1 but I don't know how to do int, I tried creating a var test=[]; and then test.append(txt); but it did not work.

Any help would be appreciated. Thank you.

Answer 1

It seems that you're deleting and adding elements and refreshing the table. You should bind your event on a parent because binding the event directly at an element will not persist if you delete them. You could do this by using $(document).on().

Then, since you're aware of where the input element is, which is 2 nodes away from the button, you could use .parent(). Once you're on the parent node, use .find() to access your input field.

Add this event;

$(document).on("click",".save",function(){

   // .parent() = a
   // .parent().parent() = td
   // .parent().parent() = tr
   // .parent().parent().parent().find("input") = look for input fields inside that row

   alert($(this).parent().parent().parent().find("input").val());
});

---

OR if you're aware of the IDs of the input fields and you have more than one, you could do;

$(document).on("click",".save",function(){
   // for example if you used id="input1" and id="input2"
   alert($(this).parent().parent().parent().find("#input1").val());
   alert($(this).parent().parent().parent().find("#input2").val());
});

---

Since you aren't naming your input fields, you could use .eq(index);

$(document).on("click",".save",function(){
   alert($(this).parent().parent().parent().find("input").eq(0).val());
   alert($(this).parent().parent().parent().find("input").eq(1).val());
});

---

Or if you want to use .closest()

$(document).on("click",".save",function(){
   alert($(this).closest("tr").find("input").eq(0).val());
   alert($(this).closest("tr").find("input").eq(1).val());
});