CODEWITHSUNDEEP
javascriptjqueryhtmlformstwitter-bootstrap
Andrew
Andrew

Reputation: 4441

Bootstrap Stateful Button on a Input Form Submit

I'd like to use the Stateful functionality of a button in a form's submit button (input). But I can not for the life of me figure out how to accomplish that.

My form executes a php page. I want the button to change during the loading of that php page (depending on content, it could take up to 20 seconds). Is this possible?

http://getbootstrap.com/javascript/#buttons

Sample Code:

<form method='post'>
<input type='text' name='test'></input>
<input type='submit' id='loading-example-btn' value='Submit' data-loading-text="Loading...">
</form>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Upvotes: 1

Views: 2130

Answers (1)

Pero P.
Pero P.

Reputation: 26992

Have you looked for errors in your browser javascript console? As it stands your js is invalid (unless you've abbreviated it?).

Assuming you are not trying to post your form using ajax, just remove the following lines and you should get the behaviour you want:

$.ajax(...).always(function () {
  btn.button('reset')
});

Additionally, this line is invalid HTML as input is a void element and doesn't require the closing </input> tag. 

<input type='text' name='test'></input>

Upvotes: 1

Related Questions