CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Bing
Bing

Reputation: 3171

When I disable submit button (after form submit) the page does not load

I have an HTML form which submits to another page via POST. Nothing special about it, except that after the form validates I try to hide and/or disable the submit button so that it cannot be double-submit, while also telling the user the next page might take a while to load.

The relevant code is:

jQuery(document).ready(function () {

    jQuery("form#form").submit(function() {
        var result = validate();
        jQuery(this).find('input[type=submit]').prop('disabled', true);
        jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()+
             "<br/><br/><span style='margin: 25px; padding: 5px; background: yellow; "+
             "width: 100%; font-weight: bold;'>Loading... this may take a few minutes! "+
             "<i class='fa fa-spinner fa-spin' style='color: blue;'></i></span>");
        return result;
    });

});

function validate() {
    return true; // Does stuff, then returns a simple true or false
}

By request, here is the (very simple) button wrapper HTML:

<div class="col-sm-12" id="submit-button-wrapper">
     <input type="submit" value="One More Step" />
</div>

When the I remove the which changes the button wrapper's HTML, the form submits just as you'd expect. When I have that line in, however, it still calls the next page and executes that code, without the displayed page ever changing.

I have tested in both Chrome and Firefox, so I know it's not a browser issue, but this is really weird behavior. What am I doing wrong?

My goal: (1) validate the user's input, (2) give the user a clue that the page is going to take a while to load and (3) display the output from the action="complete.php" page once the PHP on it has run.

Upvotes: 2

Views: 625

Answers (3)

Rami
Rami

Reputation: 67

I know that you're just showing a slight jQuery and HTML portion of the script, but that isn't quite enough to figure out your problem. Since not all of it seems to be there because you mention action="complete.php" but I don't see that within your jQuery or HTML sample of code. So I have a few questions of my own.

  1. Is the form small or large. If it's a small form then why aren't you displaying the output on the submit page? You could do that with what you currently have but a single PHP or ASP page could save you on amount of pages to make and what not. As a side note, depending on size of the form, you can do the validation on same page or continue to use action="" for it if large.

  2. Do you have need for a database file or are you saving to one? If you do/are, you could write to the DB file, have the submit open the next page and view what was saved in the database on that new page. Again, you can probably use a single PHP or ASP page.

  3. This last part sounds more valid for your purpose. You could use location.href="http://www.domain.com/home.html"; or use window.location("http://www.domain.com/home.html"); to redirect to the new page.

On another matter about some of the comments others made.

  1. You don't exactly need the + unless you're dividing each of those out into their own separate lines when you could just use one line to do that. That's probably what confused Rajesh about the '. In fact I'm not sure why you yourself mentioned the + when referring to Rajesh comment about "concat string" and "append" ,because those two have nothing to do with the +. In fact to take a guess, he might have been referring to your jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html() which kinda looks like a concat string.

  2. Speaking about append, not really needed unless for example you're doing something like giving the user the option to add rows to a form question.

Upvotes: 0

mikey
mikey

Reputation: 5160

When you return true (if validated) then the form is submitted. However, you're changing the DOM / submit button wrapper and essentially removing the submit button, right? Likely that is what is causing your problem. Leave the submit button wrapper alone. If you want to display a message display it as an overlay or hide the submit button wrapper and show the message wrapper in its place, don't remove the submit button altogether.

Upvotes: 0

Thomee
Thomee

Reputation: 59

Maybe you can achieve this with $ajax and show results on the same page.

  1. Send POST data to /some.php
  2. After sending data, give feedback to user changing button behavior
  3. When the task is complete, receive data and verify success or error and act accordingly. If OK, change button text to "complete!" or something else, and append response data to some div. If NOT OK, give feedback as well.

In code:

$("form#form").submit(function(e) {
    e.preventDefault();
    $.ajax({
        method: "POST",
        url: "some.php",
        data: $(this).serialize(),
        dataType : 'json',
        timeout: 2000,
        cache: false,
        afterSend: function() {
        /*change button behavior here*/
        },
        success: function(result) {
            if (result === "ok"){
               /*maybe append data to div and update button text to complete*/

           } else {
               /*if result not ok, send feedback*/
           }
        }
    });
});

BTW: ajax documentation http://api.jquery.com/jquery.ajax/

Upvotes: 1

Related Questions