CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user4584963
user4584963

Reputation: 2533

IE 11 still submits form without .submit() inside click handler

I had a tough time wording my question.

Basically when a submit button in a form is clicked I want the button disabled and the button text replaced with a font awesome icon until the POST request goes through. I have the following jquery.

  $('div').on('click', '.btn-disabler', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    $(this).css("background-image", "none");
    if ($(this).parents('form') && !$(this).hasClass('btn-facebookauth')) {
      $(this).parents('form').submit();
    }
  });

And the button part of my form.

<form>
   <button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
      <span class="btn-label">Log in</span>
   </button>
</form>

My problem is IE 11. In IE with the above code, on click, the button text disappears but the fa icon doesn't show, the button is just blank. The form submits fine.

When I remove the if statement:

  $('div').on('click', '.btn-disabler', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    $(this).css("background-image", "none");
  });

the button shows the icon correctly and also submits the form? Why is the form submitting when I have removed .submit()? In chrome when I remove the if statement, the icon for the button changes correctly, but the form doesn't submit it just hangs (as expected).

I'm basically trying to troubleshoot the icon not appearing after clicking the submit button in IE while it works fine in chrome.

Upvotes: 0

Views: 1208

Answers (2)

Manuel Koch
Manuel Koch

Reputation: 361

The submit button is supposed to submit the form, so it works as expected in IE. If you want to manually submit the form by theform.submit() use a button of type button.

<form>
   <button name="button" type="button" class="btn btn-primary submit-button btn-disabler">
      <span class="btn-label">Log in</span>
   </button>
</form>

Upvotes: 1

2pha
2pha

Reputation: 10165

Javascript 

// wait for document ready before trying to attach listener.
$(document).ready(function() {
  // Add a submit listener to the form
  $('#myform').submit(function(e){
    // save this jquery object into a variable as we might access this a few times. In this case it will be the form.
    var theform = $(this);
    // save the button to a variable.
    var thebtn = theform.find(".btn-disabler");
    // prevent the form from submitting (could also return false at the end of this function)
    e.preventDefault();
    thebtn.append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    theform.find('.btn-label').addClass('invisible');
    thebtn.css("background-image", "none");
    if (!thebtn.hasClass('btn-facebookauth')) {
      theform.submit();
    }
  });
});

html 

<form id="myform">
   <button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
      <span class="btn-label">Log in</span>
   </button>
</form>

All the above is untested

Upvotes: 1

Related Questions