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.

That wasn't meant as a fix for your issue, just as a fix for var test=[]; test.append(txt); which would have been giving you an script error - check your console for other errors. — fdomn-m
– fdomn-m, Commented Apr 3, 2020 at 13:52
I don't fully understand what your issue is and why you need var test=[] or $tds.eq(0) for anything. For "make row editable", I recommend you render both the input and a label/span in each cell then $().toggle() between them - it'll be much more reliable than recreating/delete ($(this).html(txt)) the inputs each time. — fdomn-m
– fdomn-m, Commented Apr 3, 2020 at 13:54
At the moment, when you click save, it overwrites any inputs with their value (so deletes the inputs). You've not included the code, but a guess would be that you insert/create new inputs when you click edit (otherwise edit+save will only work once). Rather than do this, use $tds.find("input").hide().next().show() (or similar, based on your HTML, which, again, you've not included so can't be specific). — fdomn-m
– fdomn-m, Commented Apr 3, 2020 at 14:15
Here is the table with the inputs I want to pass: You mentioned on the title you're trying to submit a selected row. What do you want to submit, the whole table or just a single row where you clicked the save button? — Jerdine Sabio
– Jerdine Sabio, Commented Apr 12, 2020 at 15:13

Jerdine Sabio · Accepted Answer · 2020-04-12 17:22:47Z

3

+50

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

edited Apr 12, 2020 at 17:22

answered Apr 12, 2020 at 15:47

Jerdine Sabio

6,0052 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

J.C Over a year ago

I have tried both your solution however I get undefined in the alert popup and not the values?

Jerdine Sabio Over a year ago

@JuniorCortenbach oh okay, i just checked, the .save is on the <i> element and not on the <a>. I added another .parent()

Jerdine Sabio Over a year ago

@JuniorCortenbach $(this).parent().parent().parent()

Jerdine Sabio Over a year ago

@JuniorCortenbach I added another answer try $(this).parent().parent().parent().find("input").eq(1).val()

Jerdine Sabio Over a year ago

@JuniorCortenbach nice! you're welcome, good luck with the project

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related