Submitting Ajax Forms from net5.0 MVC or Razor application

Question

I have a working Controller that processes a Form that is using a View Model. I was able to program the razor or View page to use a JQuery Ajax to submit the form, however, it looks like the page is getting refreshed or there is a submit happening. After the processing step, the returned value gets displayed on a white clean browser page, ignoring the from the Success function of the Ajax processor. How do i get the Ajax success code to return and processed properly so I can display the appropriate message to the User.

    function SubmitForm() {
      $.ajax({
        type: "POST",
        url: $("#myForm").attr("action"),
        success: function(msg) {
          $("#Response").html(msg);
        },
        error: function(req, status, error) {
          alert(error);
        }
      });
    }

    <div class="col-lg-8 mt-5 mt-lg-0">
      <form id="myForm" asp-controller="Contact" asp-action="Index">
        <div class="row">
          <div class="col-md-3 form-group">
            <label asp-for="FirstName" class="u-label"></label>
            <input type="text" asp-for="FirstName" class="form-control" placeholder="Your Name" required>
            <span style="color:darkgoldenrod;" asp-validation-for="FirstName"></span>
          </div>
          <div class="col-md-3 form-group">
            <label asp-for="LastName" class="u-label"></label>
            <input type="text" asp-for="LastName" class="form-control" placeholder="Your Name" required>
            <span style="color:darkgoldenrod;" asp-validation-for="LastName"></span>
          </div>
          <div class="col-md-6 form-group">
            <label asp-for="Email" class="u-label"></label>
            <input type="email" placeholder="Email" asp-for="Email" class="form-control" required>
            <span style="color:darkgoldenrod;" asp-validation-for="Email"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 form-group">
            <label asp-for="Subject" class="u-form-control-hidden u-label"></label>
            <input type="text" placeholder="Subject" asp-for="Subject" class="form-control" required>
            <span style="color:darkgoldenrod;" asp-validation-for="Subject"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 form-group">
            <label asp-for="Message" class="u-form-control-hidden u-label"></label>
            <textarea placeholder="Message" rows="5" cols="50" asp-for="Message" class="form-control" required=""></textarea>
            <span style="color:darkgoldenrod;" asp-validation-for="Message"></span>
          </div>
        </div>
        <br />
        <div class="row">
          <div class="col" style="padding:10px!important;">
            <button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>
          </div>
        </div>
      </form>
      <hr />
      <span id="Response"></span>
    </div>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

You can see this [thread](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) to see how to prevent the default form submit. — Yinqiu, May 06 '21 at 01:16

score 1 · Accepted Answer · answered May 10 '21 at 06:29

Here is a working demo:

Change

<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>

to

<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>

ajax($("#myForm").serialize can help post form data to action):

function SubmitForm() {
            $.ajax({
                type: "POST",
                url:  $("#myForm").attr("action"),
                data: $("#myForm").serialize(),
                success: function (msg) {
                    $("#Response").html(msg);
                },
                error: function (req, status, error) {
                    alert(error);
                }
            });
        }

action:

public string Index(ModelA m)
        {
            return "success";
        }

result:

Thank you for your feedback. My issue is not that the form's content is not being processed; they are. What is happening with my attempt at this Ajax is that my return text is not being processed my the Ajax code and I am getting a white page with the text from the return "success" of the action controller. I am not sure how to fix this, so I have to use ViewBag to pass messages to the Index page to let my users know that their form was processed successfully. — Johnny, May 11 '21 at 09:11

score 0 · Answer 2 · answered May 06 '21 at 05:20

Check if this works out for more details of preventDefault take a look over https://www.w3schools.com/jsref/event_preventdefault.asp

function SubmitForm(e) {
      e.preventDefault(); //prevent default event functionality
      $.ajax({
        type: "POST",
        url: $("#myForm").attr("action"),
        success: function(msg) {
          $("#Response").html(msg);
        },
        error: function(req, status, error) {
          alert(error);
        }
      });
    }

Submitting Ajax Forms from net5.0 MVC or Razor application

2 Answers2