Home Return true/false on submit button click, based on ajax response
Reply: 2

Return true/false on submit button click, based on ajax response

atoms
1#
atoms Published in 2018-01-12 14:54:13Z

Based on some JSON I recieve from an ajax request, I wish to either allow or deny a submit button press (return true/false).

I've attempted to implement a promise, however, I can still see 'product unavailable' is called before I recieve my ajax response.

Is the issue down to it being a form/submit button? Or is this still possible?

var oAH = {

    ValidateSubmit : function(self){

        // send request to handler
        $.ajax({
            type: "POST",
            url: "",
            data: aData,
            cache: false})
        .done(function(data) {

            var oJSON = JSON.parse(data);
            if(oJSON.Status === 1){
                // return true to allow form to submit
                return true;
            }else{
                console.log('product unavailable (error message)');
                return false;
            }
        })


    }
}


// click handler
$('#submitButton').on('click', function(){
    return oAH.ValidateSubmit(this);
}
dfsq
2#
dfsq Reply to 2018-01-12 15:15:36Z

You have number of issues. The most obvious one is that you can't just return from asynchronous code (promise) to use its return value (it's undefined!).

What you need to do is

  1. prevent form submission by default for all cases.
  2. treat promise properly and check returned flag. If it's true, submit form manually using DOM API (form submit method).
  3. make sure you use onsubmit event instead of button onclick.

All together it would look something like this:

var oAH = {

  ValidateSubmit: function(self) {

    // send request to handler
    return $.ajax({
      type: "POST",
      url: "",
      data: aData,
      cache: false
    })
      .then(function(data) { // <----- make sure you use .then
        return data.Status === 1;
      });
  }
}


// form onsubmit handler, form has id form for example, etc.
$('#form').on('submit', function(e) {
  var form = this;
  e.preventDefault()

  return oAH.ValidateSubmit(this)
    .then(function(canSubmit) {
      if (canSubmit) {
        form.submit();
      }
    });
});
Gonzalo
3#
Gonzalo Reply to 2018-01-12 15:08:57Z

I think what you try to do is not possible. The UI event must be processed at the moment and the ajax request is async. You could prevent form submiting when clicked, disable button and wait for ajax to return a value and then submit form or not in a callback, something like this:

var oAH = {
    ValidateSubmit : function(self){

        // send request to handler
        $.ajax({
            type: "POST",
            url: "",
            data: aData,
            cache: false})
        .done(function(data) {

            var oJSON = JSON.parse(data);
            if(oJSON.Status === 1){
                // return true to allow form to submit
                submitForm();
            }else{
                console.log('product unavailable (error message)');
            }
        })


    }
}

function submitForm() {
    $('#myForm').submit();
    $('#submitButton').removeAttr('disabled');
}

// click handler
$('#submitButton').on('click', function(e){
    //prevent submitting
    e.preventDefault();
    // Disable, you could show a loading animation/gif
    $(this).attr('disabled','disabled');
    // call ajax
    oAH.ValidateSubmit(this);
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.394553 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO