CODEWITHSUNDEEP
jquery
smack-a-bro
smack-a-bro

Reputation: 741

Replace submit button with loading gif

I'm not a jquery expert by any means and I cannot figure this out. 

<input class="button" name="save" type="submit" onclick="$(this).replaceWith('<img src=images/loading.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">

The code does replace the button but with a broken image icon. However, if I right click the broken image and copy the url its the correct and valid path to the loading.gif.

I also have added the <script> tags in the <head>.

Anybody have an idea to fix this?

Thanks

Upvotes: 1

Views: 4756

Answers (2)

sksallaj
sksallaj

Reputation: 4010

Just save yourself the headache and put the javascript in it's own tag, thus removing the headache of escaping quotes; in the example, notice the "/" before the "images" in the source.

Note: if the images folder is in a level higher than the file you are calling from, you need to put the url as "../images/loading.gif"

javascript in the tag

 <script type="javascript">
     $(function(){
         $("input[name='save']").click(function(e){
             $(this).replaceWith('<img src="/images/loading.gif" />');
             console.log(this);
             $('#myForm').submit();
         });
     });
</script>

and in your html:

<input class="button" name="save" type="submit" value="SUBMIT">

edit: 2/17/2013 -- alternative solution

I realized this may have not been the best solution at the time, because sometime in the future you might make edits to the html, like to either your submit button or your img src, and then would have to update the jquery script. So instead, load up both html elements, hiding one of them on the initial page load. Then during a click, you hide the button, and show the img. This is also good because you don't have to have any src urls written in your javascript.

<input class="button" name="save" type="submit" value="SUBMIT">
<img src="/images/loading.gif" />


<script type="javascript">
    $("#loadingGif").hide();

    $("input[name='save']").click(function (e) {
        $(this).hide();
        $("#loadingGif").show();
        console.log(this);
        $('#myForm').submit();
    });

<script type="javascript">

Upvotes: 2

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

You are missing quotes in you image url

<img src=images/loading.gif /> should be <img src="images/loading.gif" />

Upvotes: 0

Related Questions