How can I send nested forms in one Post request?

Question

I want to send multiple forms in one form and send that form with post request to controller method. But collection comes null and it can not get. My form like this:

<form method="post" action="PageView/Create">
    <form>
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="1">
    </form>
    <form>
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="11">
    </form>
</form>

grid.js

const form = document.createElement('form');
form.method = 'post';
form.action = 'PageView/Create';
for (var i = 0; i < collection.length; i++) {
    const form2 = document.createElement('form');
    for (const key in collection[i]) {
        if (collection[i].hasOwnProperty(key)) {
            const hiddenField = document.createElement('input');
            hiddenField.type = 'hidden';
            hiddenField.name = key;
            hiddenField.value = collection[i][key];
            form2.appendChild(hiddenField);
        }
    }
    form.appendChild(form2);
}
document.body.appendChild(form);
form.submit();

PageView.cs

[HttpPost]
public ActionResult Create(List<PageCategoryPageViewModel> collection)
{
    try
    { 
        _pageCategoryPageService.DeletePageCategoryPage();
        collection.ForEach(x=>_pageCategoryPageService.CreatePageCategoryPage(x));
        return View("SuccessPage");
    }
    catch
    {
        return View("ErrorPage");
    }
}

Because I have to send all of them when I click on one button @SourabhSomani — aynilda, Nov 14 '19 at 08:49
https://stackoverflow.com/questions/379610/can-you-nest-html-forms — Yury Tarabanko, Nov 14 '19 at 08:59
@YuryTarabanko I cannot send via ajax also. List collection comes null — aynilda, Nov 14 '19 at 09:06
If you are submitting the form it needs to conform to some standard so you should use categoryID[] and such instead of this. — , Nov 14 '19 at 09:08

score 0 · Answer 1 · answered Nov 14 '19 at 09:16

You will need to have a form structure as shown below

<form method="post" action="PageView/Create">
        <input type="hidden" name="categoryID" value="1">
        <input type="hidden" name="pageID" value="1">
</form>
<form>
    <input type="hidden" name="categoryID" value="1">
    <input type="hidden" name="pageID" value="11">
</form>

Also you should use different form field names, since the field names will conflict with each other when the form is submitted to a specific controller method if used same in every form.

<script type="text/javascript">

    // Creating a form data object
    var formData = new FormData();


    len = document.querySelectorAll("form").length;

    var form, data, pair;

    all_forms =     document.querySelectorAll("form");

    for(i = 0; i < len; i++){


        form = all_forms[i];

        data = new FormData(form);

        for (pair of data.entries()) {
            formData.append(pair[0], pair[1]);
        }

    }

    // get all values related to a form field
    // console.log(formData.getAll('pageID'));

    // For ajax request
    var req = new XMLHttpRequest();

    req.open("POST", "http://localhost/", true);

    req.send(formData);



</script>

You can use any javascript utility for sending an Ajax request.

How can I send nested forms in one Post request?

1 Answers1