Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to trigger couple functions in beforeSubmit. First, I want to check whether the selected option is valid. Second, I want to use a modal window and have the user confirm the changes. Here is some of the code:

 <script type="text/javascript" language="javascript" src="scripts/jquery-latest.js"></script>
 <script type="text/javascript" language="javascript" src="scripts/jquery.form.js" ></script>
 <script type="text/javascript" language="javascript" src="scripts/jquery.simplemodal-1.4.3.js"></script>
 <link rel="stylesheet" type="text/css" href="css/modalWins.css" />
 <script>
$().ready(function() {
$('#myForm').submit(function() {                        
    var options = { 
        success: showResponse,
        beforeSubmit: chkService,
        dataType: "json",
        url:'actCustomer.cfm?vw=saveSvc&acctNum=1'
    $('#myForm').ajaxSubmit(options);
    return false;   
showResponse = function(responseText, statusText) {
    alert('am i here? ' + responseText); 
    $.ajax({
        type: "post",      
        url: "actCustomer.cfm?vw=save", 
        cache: false,       
        success: function(result) {
            alert(result);
        error: function(xmlHttpRequest, status, err) {
            confirm('Error: '+err);
            $('#errDiv').html(err);
chkService = function(arr, $form, options) {
    formData = 'service='+$('#svc').val();
    $.ajax({
        type: "post",      
        url: "actCustomer.cfm?vw=chkStuff", 
        data: formData,
        cache: false,       
        success: function(result) {
            result = $.trim(result);
            if (result == 'Invalid') {
                $('#errDiv').html('Invalid Selection').addClass('req'); 
                return false;
            } else if (result == 'Valid') {
                return confirmUpdates(arr, $form, options);
            } else {
                $('#errDiv').html(result);
                return false;
        error: function(xmlHttpRequest, status, err) {
            confirm('Error: '+err);
            $('#errDiv').html(err);
// should we continue with the updates?
confirmUpdates = function(arr, $form, options) {
    var dispMsg = 'some information here about updates.';
    $('#msg-header').html('Confirmation of Updates!');
    $('#msg-content').html(dispMsg).css('color','black');
    $('#msg-action').html('<div align="center" style="margin-top:30px;"><input type="button" name="btnModSubmit" id="btnModSubmit" class="button submit" value="Continue"/><input type="button" name="btnModClose" id="btnModClose" class="button close" value="Cancel" style="margin-left:30px"/></div>');
    $("#Msg").html('<table style="font-size:11px; color:#333; margin-left:35px;"><tr><td><img border="0" src="images/ajax-loader.gif"/></td><td style="font-weight:bold">Confirming updates...</td></table>');
    $('#basic-modal-content').modal({ minHeight:320, minWidth:455 });
    $('#btnModSubmit').click(function(){
        // continue with the updates.
        alert('continue >>');
        return true;
    $('#btnModClose').click(function(){
        /* $.modal.close();
        $("#formMsg").hide();
        $('#formSub').show(); */
        window.location.reload();
 </script>
  <form name="myForm" id="myForm" action="" method="post">
service:<input type="text" name="svc" id="svc" value="1">
    <input type="submit" name="submit" id="submit" class="button submit" value="Proceed"/>
 </form>
The problem I am having is that as soon as I cannot have 
      return confirmUpdates(arr, $form, options); 
work properly. It does launch the modal window, but it doesn't wait for the btnModSubmit click. It submits the form and I see the am i here? warning. 
If the ajax call to stuff.cfm in chkOptions is valid, now go do the confirmUpdates. If the user clicks on btnModSubmit then return true to execute showResponse. If user clicks on btnModClose, then return false and don't execute showResponse. I am stuck at this point.
Is there a way to fix this?
    var options = { 
        beforeSubmit: function(arr, $form, options) { 
            chkService(arr, $form, options);
            confirmUpdates(arr, $form, options);
            return false;
        dataType: "json",
        url:'actCustomer.cfm?vw=saveSvc&acctNum=1'
    $('#myForm').ajaxSubmit(options);
    return false;   
chkService runs first. Then, it goes to confirmUpdates. In there, I have a submit and cancel button. If they click on submit, then i send them to another function to save the form: 
  saveForm(arr, $form, options);
Hope it helps to someone. 
thanks
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.