Prevent button of nested form to submit whole form

Question

in my View:

<form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />

        <div class="form-group">
            <label asp-for="foto" class="control-label">Afbeelding</label>
            @{
                if (Model.foto == null)
                {
                    <form  asp-controller="Upload" asp-action="SaveFoto" classenctype="multipart/form-data">

                        <div class="form-group row">
                            <div class="custom-file">
                                <input class="form-control custom-file-input" type="file" name="image"/>
                                <label class="custom-file-label">Bladeren....</label>
                                </div>                              
                        </div>
                        <div class="form-group">
                            <button type="submit">OK</button>
                        </div>
                        <img src="@ViewData["Filelocation"]" />
                    </form>
                }
                else
                {
                    <label>er is al een foto</label>
                }
            }
        </div>            
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>

I have a form to update the whole record, but a nested form to upload a photofile. How can I prevent the button for the photofile posting the whole form?

I have this JS :

<script>
    $(document).ready(function (e) {
        e.preventDefault();
        $(".custom-file-input").on("change",
            function () {
                console.log('processing');
                var filename = $(this).val().split("\\").pop();
                $(this).next(".custom-file-label").html(filename);
            })

    });
</script>

The controller:

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> SaveFoto(IFormFile image)
    {
        string foto = null;
        if (ModelState.IsValid)
        {
            if (image != null && image.Length > 0)
            {
                var imagepath = @"\images\speelgoed";
                var uploadpath = env.WebRootPath;
                var uniquefilename = Guid.NewGuid().ToString();
                var filename = Path.GetFileName(uniquefilename + '.' + image.FileName.Split('.')[1].ToLower());
                string fullpath = uploadpath + filename;

                imagepath = imagepath + @"\";
                var filepath = @".." + Path.Combine(imagepath, filename);
                using (var filestream = new FileStream(fullpath, FileMode.Create))
                {
                    await image.CopyToAsync(filestream);
                }

                ViewData["Filelocation"] = filepath;
            }

            return View();


        }

        return View();
    }

At this point, I can't even debug since the breakpoint I've put on the controller isn't hit... Any suggestions? thanks, James

Add an on submit event handler to the inner form and call `e.preventDefault()` in it. — , Dec 21 '19 at 16:40

score 0 · Answer 1 · answered Dec 21 '19 at 20:03

0

You can not have this functionality and structure in HTML , because we can not put one form input as a child of another form input, we can not use nested form inputs

Another answer in stackoverflow : Can you nest html forms?

answered Dec 21 '19 at 20:03

parisam

26
2

Prevent button of nested form to submit whole form

1 Answers1