Jquery Submit form and refreshes page

Question

I've met into some problems with the Jquery, this are my codes from Jquery:

<script>
  $(function() {
    var username = $( "#username" ),
      email = $( "#email" ),
      password = $( "#password" ),

      allFields = $( [] ).add( username ).add( email ).add( password ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    $("#success").dialog({
          autoOpen: false,
          height: 700,
          width: 500,
         modal: true,
         buttons: {
             "Okay": function() {
                 $( this ).dialog( "close" );
                location.reload();   
             }


         }
        });
    $( "#create1" ).dialog({
      autoOpen: false,
      height: 700,
      width: 500,
      modal: true,
      buttons: {
        "Create an account": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( username, "username", 3, 16 );
          bValid = bValid && checkLength( email, "email", 6, 80 );
          bValid = bValid && checkLength( password, "password", 5, 16 );

          bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
          bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );





          if ( bValid ) {
              $( this ).dialog( "close" );
              $( "#success" ).dialog( "open" );
              $('#createUser').submit();

          }
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }

      }

    });

    $( "#create" ).button().click(function() {
        $( "#create1" ).dialog( "open" );
      });
  });
  </script>

So the problem here is, I want to do a form submit PLUS a refresh after its form is submitted. However, the form is being submitted before it can even do a refresh. I've tried doing AJAX but it isn't working. Prior to why I have to refresh after submitting the form is because I have a list of added things in a table and I have to refresh and show the user the updated list. You guys have any idea on how do I do that? Thank you so much.

Answer 1

question is bit confusing since if you use ajax there is no need to refresh the page...

anywasy why don't you submit your form whn success dailog OK button is pressed since even create1 dialog is calling success dailog...that way you will get success dialog to.. form will get submitted after success and page will refresh..

$("#success").dialog({
      autoOpen: false,
      height: 700,
      width: 500,
     modal: true,
     buttons: {
         "Okay": function() {
             $( this ).dialog( "close" );
            //location.reload();   
            $('#createUser').submit(); //here
         }


     }
    });

note: remove the form submit in create dialog.