Making a post request and after submitting a form

Question

I am having this problem while working on an eshop I am building, I want to simply do a post request to a controller (that is not returning a view) while also submiting a form.. I do not know what is wrong with this code

<script>
        $(document).ready(function () {
            console.log("sad");     
 $("a[data-form-method='post']").click(function (event) {

                event.preventDefault();

                var element = $(this);
                var action = element.attr("href");
                element.closest("form").each(function () {
                    var form = $("#form1");
                    form.attr("action", action);
                    form.submit();
                });
            });

        });
</script>

Here is the form

 using (Html.BeginForm("SendEmailToAdmin", "Home", FormMethod.Post, new { id = "form1" }))
                {
                    @Html.Hidden("receiver", $"{user.Email}");

                   
                    <a href="@Url.Action("AdminSupport", "Home",new { receiver = user.Email })" data-form-method="post">Customer Support</a>
                }

Here is the controller

        [HttpPost]
        [Route("/Home/SendEmailToAdmin")]
        //[NonAction]
        public JsonResult SendEmailToAdmin()
        {
........
(some code
if is true )


      return Json(new { status = "Thank you very much admin for showing up. Don't forget to send us the email of your feedback on your way out" }, JsonRequestBehavior.AllowGet);
            }

(or else)
            return Json(new { status = "Something went wrong, please try again" }, JsonRequestBehavior.AllowGet);

I have tried also using a button with the id of submitDemo

  $('body').on('click', function (e) {
               e.preventDefault();
                    alert("Handler for .click() called.");

                   $.post("~/Home/SendEmailToAdmin");
            });

and also

            $("#form1").submit(function (event) {
                event.preventDefault();
                $.post('@Url.Action("SendEmailToAdmin", "Home",new { id = email })');

                document.signupform.submit();

            });

have also tried using a variable for the button and then with onclick method and so on...

  const button = document.getElementById('submitDemo');

EDIT : I HAVE TRIED THIS

Answer 1

I fount it at last.. here it goes! Jquery:

$(document).ready(function () {
  $("#submitBtn").click(function (event) {
    console.log("sad");
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "@Url.Action("SendEmailToAdmin", "Home")",
      data: "@email",
      success: function () {
        console.log("Done")
        $("#form1").submit();
      }
    });  
  });
});

html in view : I added the btn outside of the form and this way the submit form happens and also the post request!

using (Html.BeginForm("AdminSupport", "Home", FormMethod.Post, new { id = "form1" }))
{
  @Html.Hidden("receiver", $"{user.Email}");

  @*<button id="submitbutton" @user.Email=>Customer Support</button>*@
}
<button id="submitBtn" @*data-form-method="post"*@>Customer Support</button>