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

What happens? Can you see any requests in your browser's developer console? Any javascript error messages? "doesn't work" does not count as a valid error description ;-) You may want to take a look e.g. here (2. answer, fetch API https://stackoverflow.com/questions/6396101/pure-javascript-send-post-data-without-a-form) that describe how to send requests from JavaScript. — Christoph Lütjen, Sep 05 '22 at 17:06
Thank you so much for the quick reply. No error whatsoever unfortunately.... — ƎMIႧЯƎƎઘƧƎMAӘ, Sep 05 '22 at 17:29
It submits the form that is redirecting to the page.. That is the result actually — ƎMIႧЯƎƎઘƧƎMAӘ, Sep 05 '22 at 17:31
I can see a form and a controller that should accept the form. I cannot see code for any other request. So "it submits the form" seems to be expected behavior? If you expect any other additional request, which line of code should trigger this request? (and did you read the linked question on how to send HTTP requests from JavaScript?) — Christoph Lütjen, Sep 05 '22 at 17:37
@ChristophLütjen At this version I have it now. The Href is supposed to target the controller sending the email.name data also submiting the form and yes i have just started reading it. Thank you very much again — ƎMIႧЯƎƎઘƧƎMAӘ, Sep 05 '22 at 17:57

score 1 · Answer 1 · edited Sep 09 '22 at 18:39

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>

Making a post request and after submitting a form

1 Answers1