CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvc
MrMustafa
MrMustafa

Reputation: 305

How to prevent submit depend on result of AJAX

In ASP.NET MVC Project, i want button to not make submit if the result come from AJAX code is false.

But the it always make submit.

That is the code:

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{

    <input name="CategoryID" id="myCategoryId" type="text" value="0" />

    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />


    <input class="btn btn-primary" id="myid" type="submit" value="Add" />
}

and that is Javascript code:

$('#myid').on('click', function(event) {

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {

            if (!result) {

                event.preventDefault();
            }
        }
    });
});

Upvotes: 0

Views: 1726

Answers (4)

TanvirArjel
TanvirArjel

Reputation: 32069

Cleanest way to do so:

$(document).on('submit','form' function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();

    $this = $(this);

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result) {
                $this.submit();
            }
        }
    });
});

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

What I know from a very long time is the Form default redirect action will not wait until ajax returned its result .. So you can use a boolean variable to control that .. see the next code

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      e.preventDefault();   // prevent the default redirect
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        DefaultFormAction = true;   // return default action to true
        $this.submit();       // then submit the form again
      } ,10000);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

To test the Form default redirect action will not wait until ajax returned its result you can use e.preventDefault() inside the setTimeout and even you make a time is 1ms without $this.submit() it will still use the default redirect

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        e.preventDefault();   // prevent the default redirect
      } , 1);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

Upvotes: 1

Dillan Wilding
Dillan Wilding

Reputation: 1111

I'd replace the submit button input element with a button element so that clicking the button will trigger the onclick event without submitting the form. Then when you get the ajax response you can conditionally use jQuery to submit the form. This might require some tinkering to get the form from the onclick but it'll prevent you from submitting the form too early like I suspect your problem is.

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{
    <input name="CategoryID" id="myCategoryId" type="text" value="0" />
    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
    <button class="btn btn-primary" id="myid">Add</button>
}

and

$('#myid').on('click', function(event) {
    var data = {
        CategoryName: $("#myCategoryNameId").val(),
        CategoryID: $("#myCategoryId").val()
    };
    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result) {
                $('#myid').closest('form').submit();
            }
        }
    });
});

Upvotes: 2

MikNiller
MikNiller

Reputation: 1280

To elaborate on my comment above. change 

  <input class="btn btn-primary" id="myid" type="submit" value="Add" />

to

  <input class="btn btn-primary" id="myid" type="button" value="Add" />

And in your success function, change

if (!result) {
   event.preventDefault();
}

to

if (result) {
   $('#myid').closest("form").submit();
}

This way you will only submit the form when result is true, it the ajax call fails or result is false then the form won't be submitted.

DISCLAIMER: The code above may not work, but i hope you get the generel idea.

Upvotes: 1

Related Questions