jQuery get closest form on button click

Question

i want to make an ajax request when i press on the form button i need to get the form itself my code is

$(document).ready(function() {
        $(document).on('click', '.finalEdit', function (e) {
            e.preventDefault();
            var form = $(this).closest('form');
            $.ajax({
                data: form.serialize(),
                url: form.attr('action'),
                type: "POST",
                dataType: "html",
                success: function (result) {
                    // feel free to execute any code 
                    // in the success callback
                    $('#divToRefresh').html(result);
                },
                error: function (result) {
                alert("Failed");
            }
            })

            return false;
        });

$(this).closest('form') gets another form in the page i don't know why

this is the form i am looking for

<tr hidden="hidden">
            @using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { @class = "Edit-form" }))
            {
                @Html.ValidationSummary(true)
                <td>
                    @Html.HiddenFor(model => model.supplier.SupplierID, new { @Value = item.SupplierID })
                </td>
                <td>
                    @Html.TextBoxFor(model => model.supplier.SupplierName, new { @Value = item.SupplierName })
                </td>
                <td>
                    <input type="submit" value="Edit" class="finalEdit"/>
                </td>



            }
        </tr>

try `e.target` vs. `this` as `this` may be referring to the document vs. the clicked element. As in `var form = $(e.target).closest('form');` — Forty3, Jul 31 '17 at 21:05
Which form is is getting? From the code shown, there is only one form. If you have a form inside of a form, then [it is not valid html](https://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form). Have you verified the integrity of the rendered HTML? — Joe Lissner, Jul 31 '17 at 21:14
it's getting the form from the parent html. this code is in a patial view. — Mohamed Kandeel, Jul 31 '17 at 21:17
If this code is in a partial view, and the containing page also has a `Html.BeginForm` call, then I suspect you have nested forms. — Forty3, Jul 31 '17 at 21:20
@MohamedKandeel - can you try `$(e.target).closest('.Edit-form')` seeing that the form is being assigned the css class Edit-form? — Forty3, Jul 31 '17 at 21:35
@MohamedKandeel - if you are working in Chrome, you can right-click the Submit button, click Inspect, then in the developer tools console keep trying different jQuery selectors until you get the form you are looking for (note: $0 is the element you "inspected" so starting with `$($0).closest('form')` should give you your current (incorrect) form.) — Forty3, Jul 31 '17 at 21:37
i already tried that too but it didn't work i am so stuck in this — Mohamed Kandeel, Jul 31 '17 at 21:38
Any chance you can post the rendered HTML to the original question? That way we can see the HTML structure you are dealing with? — Forty3, Jul 31 '17 at 21:38
@MohamedKandeel - can you create a jsfiddle or codepen with the rendered code? Or even a subsection containing just the form elements? — Forty3, Aug 01 '17 at 01:00
Did you try giving an Id to the button and handling the button click event through the Id to get access to the Form? — pso, Aug 01 '17 at 11:45
i can't give it an id cuz they are several buttons. i solved this issue but another problem apeared so i will post it now anyways — Mohamed Kandeel, Aug 01 '17 at 11:48

score 2 · Answer 1 · answered Mar 04 '20 at 18:50

If the .finalEdit button is within the form tags, you can use this.form to get the form that the element belongs to. You can then wrap it in $() to get a jQuery object of the form element: var form = $(this.form);.

If it's not finding the form, make sure that the tags are properly nested and closed. Also make sure that the input does not have a form attribute.

score 0 · Accepted Answer · answered Aug 01 '17 at 11:54

0

the $(this).closest('form') wasn't getting another form. it didn't get any form actually.

i don't know why .closest('form') didn't work in that scenario

anyways this line of code worked for me

var form = $(this).parent().parent().children(":first");

answered Aug 01 '17 at 11:54

Mohamed Kandeel

147
1
9

jQuery get closest form on button click

2 Answers2

Linked