1

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

smack-a-bro
  • 691
  • 2
  • 13
  • 27

2 Answers2

2

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">
sksallaj
  • 3,872
  • 3
  • 37
  • 58
  • Why does this work in fiddle but not when I put it on my page? – smack-a-bro Oct 10 '13 at 18:23
  • can I see what your page looks like? you can make your own jsfiddle.. and dump all the content in one of the boxes.. and then save it so I can look at it. – sksallaj Oct 10 '13 at 19:07
0

You are missing quotes in you image url

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

Bojana Šekeljić
  • 1,056
  • 1
  • 12
  • 30
  • 1
    if the page is HTML5 the quotes are optional http://dev.w3.org/html5/html-author/#unquoted-attr – Jonathan Marzullo Oct 10 '13 at 17:26
  • @Mr.Bacciagalupe That doesn't mean it's supported in all, or even most, browsers as of now. – Lewis Goddard Mar 17 '14 at 00:30
  • @Lewis Goddard all modern browsers (Firefox, Chrome, Opera, even IE10, and IE11 .. also even IE8 and IE9 document modes) support HTML5 optional attribute quote syntax. In HTML5 quotes are optional unless its a string with special characters. http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#intro-early-example – Jonathan Marzullo Mar 18 '14 at 12:34