CODEWITHSUNDEEP
javascriptjquery
Vojtech
Vojtech

Reputation: 2603

How to submit a form after confirming submit? jQuery, AJAX

Good day, I have a simple html page containing this form:

<form:form method="post" action="details" modelAttribute="code">
  <form:input path="code"/>
  <br/>
  <input type="submit" value="Submit" />
</form:form>

When I press the Submit button I need to check whether there are some records in the database for given code using jQuery AJAX. If yes then popup jQuery UI dialog to ask user whether he really wants to display record details (because it's a paid service). If he confirms I need to submit the form. This is my script on the html page:

$(document).ready(function() {

  // Bind an event handler to the submit event
  $('form#code').submit( function() {

    // Check whether there are some records in the DB using AJAX
    $.ajax({
      url: 'getResultCount',
      type: 'post',
      dataType: 'html',
      data: $("form#code").serialize(),
      success: function(result) {
        if(result == 'null') {
          $('div#results').html('<p>No records found for ' + $('input#code').val() + '.</p>');
        } else {
          // At leat one record was found so ask the user
          $('#dialog-confirm').dialog({
            resizable: false,
            draggable: false,
            height: 240,
            width: 450,
            modal: true,
            buttons: {
              "Display details": function() {
                // User confirmed, submit the form
                $('form#code').submit();
              },
              Cancel: function() {
                $(this).dialog("close");
              }
            }
          });
        }
      }
    });

    return false;
  });

});

When I press "Display details" button nothing happens. I think it is because I'm entering the same submit handler which returns false. How to solve it so that form submit is executed? Please advise. Thank you in advance. Vojtech

Upvotes: 1

Views: 2197

Answers (3)

epascarello
epascarello

Reputation: 207501

Change

$('form#code').submit();

to

$('form#code')[0].submit();

It will skip the jQuery onsubmit function.

Basic example: http://jsfiddle.net/4Ax6m/

Upvotes: 4

abc123
abc123

Reputation: 18763

You'd need to wait for the .ajax to succeed since it is currently running in async mode.

So disable it using the async option on ajax. Documentation Here

ANSWER SPECIFICALLY FOR YOU

JS

$(document).ready(function () {
    // Bind an event handler to the submit event
    $('form#code').submit(function () {
        // Check whether there are some records in the DB using AJAX
        $.ajax({
            url: 'getResultCount',
            type: 'post',
            dataType: 'html',
            data: $("form#code").serialize(),
            async: false,
            success: function (result) {
                if (result == 'null') {
                    $('div#results').html('<p>No records found for ' + $('input#code').val() + '.</p>');

                    //No Records found, submitting!!
                    return true;
                } else {
                    // At leat one record was found so ask the user
                    $('#dialog-confirm').dialog({
                        resizable: false,
                        draggable: false,
                        height: 240,
                        width: 450,
                        modal: true,
                        buttons: {
                            "Display details": function () {
                                // User confirmed, submit the form
                                return true;
                            },
                            Cancel: function () {
                                //TODO: Don't think you need this line?
                                $(this).dialog("close");

                                //CANCEL!!!
                                return false;
                            }
                        }
                    });
                    //User skipped Dialog somehow...ignoring....DO NOT SUBMIT
                    return false;
                }
            }
        });
    });
});

Note: This will return true and false to continue the submit process to the server

Upvotes: 1

Markus
Markus

Reputation: 202

There is one simple answer: Do not use <input type="submit" ... />.

You can instead use <button onlick="handler()">Submit</button>, where handler() is your function bound to the submit-event of the form in the above code. If your handler decides that the form should be submitted just submit it programmatically. Edit: Which is actually already in your code.

Upvotes: 1

Related Questions