adding a loading.gif image to .val()

Question

How can I add a loading.gif image to .val() in my script?

I have tried:

this.submitButton.val('<input type="image" src="http://localhost:8000/loader.gif">').prop('disabled', true);

But it doesn't work! Any suggestions ?

Answer 1

   init: function() {
       this.form = $('#billing-form');
       this.submitButton = this.form.find('input[type=submit]');
       this.submitButtonValue = this.submitButton.val();

       var stripeKey = $('meta[name="publishable-key"]').attr('content');
       Stripe.setPublishableKey(stripeKey);

       this.bindEvents();
    },

    bindEvents: function() {
        this.form.on('submit', $.proxy(this.sendToken, this));
    },

    sendToken: function(event) {
        this.submitButton.val('<input type="image" src="http://localhost:8000/loader.gif">').prop('disabled', true);

        Stripe.createToken(this.form, $.proxy(this.stripeResponseHandler, this));

        event.preventDefault();
    },

Html is just a standard button like so:

     <input type="submit" value="Subscribe"> 

Answer 2

this might be a solution to your problem:

<button type="submit">Button</button>

$(document).ready(function(){
    $('button').on('click', function(){
       $(this).append('<img src="" width="10" height="10" />'); 
    });
});

notice that I have used button in my example, not input, as inputs do not allow to apply any content inside

if you want to stick to the input markup, consider adding it some class when loading, eg.

.loading {
    background: url(...)
}

here is a jsfiddle to first example: http://jsfiddle.net/Xu84a/