Search code examples
htmlajaxformsrazorsubmit

Submit a form inside other form with Ajax


So, I really need some help, hope I can make myself understand. I have a software were you can import data from csv and that data is shown in an html layout, that layout has a "submit" button that triggers the ajax with the method post. Also, in that layout you can had some info, so a pop-up appears with the info to fill and this pop-up also have a "submit" button that triggers the ajax with the method post. (this pop-up is getting a layout that already exist in the software in a "normal / not pop-up" way).

My problem here, is that every time I click in the submit of the pop-up, instead of going to the POST of the pop-up it goes to the POST of the first form that is behind.

Any ideas how can I make him understand that I want the POST that is on the page of the submit button I'm clicking?

  • Layout of the import is in a html and the frame of the pop-up is also on the same page
  • Submit with the POST of the import and the POST of the pop-up are in different pages

The submit layout is equal to both case, but they are in different pages and the Ajax have different names.

            @Using (Ajax.BeginForm("Controller",
                                  "Name",
                                  Nothing,
                                  New AjaxOptions With {.HttpMethod = "POST",
                                                        .UpdateTargetId = "mydiv" + Model.MYMODAL.ToString,
                                                        .InsertionMode = InsertionMode.Replace},
                                                    New With {.id = "AJAX_ID" + Model.MYMODAL.ToString}))
                @<div id="[email protected]">
                    @Html.Partial("VIEW WHERE IS THE FORM", Model)
                    <hr />
                    <div class="btn-group-sm" style="margin-top:10px">
                        <button class="btn btn-info"
                                type="submit"
                                title="CREATE">
                            <i class="glyphicon glyphicon-plus-sign"></i>
                            <span>CREATE</span>
                        </button>
                        <button class="btn btn-default"
                                type="button"
                                title="CANCEL">
                            <i class="glyphicon glyphicon-ban-circle"></i>
                            <span>@Translate.CancelAction_dsg</span>
                        </button>
                    </div>
                </div>
            End Using
        </div>```

Solution

  • So, I changed the place where I had my pop-up and it suddenly works. I think the place where I put my pop-up the html thought it was a form inside another form, and when I move it, the html was able to identify that there was different forms apart. Thank you for the help.