Swap Image src of submit button onClick or onSubmit

I have a form on a page that uploads images to my server.  The number of images that are uploaded is dependent upon how many the user chooses.  Once the user has chosen, I use DOM and Javascript to build the file form elements and submit (type image) button.

I want to swap the image source of the button to an uploading image and disable the button until the page reloads after completion. At that point, the file form elements and the button no longer appear, just the results of their upload.

I have searched quite a bit to find an answer but to no avail.  I have read that because the button is created in DOM, it cannot be accessed by getElementById.  I continue to get element is undefined error.

Here is the code that creates the form:
function makeUploadFields(c){
      var container = document.getElementById('FileUpload');
      var tbl     = document.createElement("table");
      tbl.setAttribute("id", "lgform");
    var tblBody = document.createElement("tbody");
            
      for(var r = 1; r <= c; r++){
            // creates a table row
            var row = document.createElement("tr");

                var formText = null;
                        var formField = null;
            
                        if(r == 1){
                              formText = 'Primary Picture:';
                              } else if (r > 1 && r < c) {
                              formText = 'Picture #' + r + ':';
                              } else if (r == c) {
                              formText = 'Final Picture:';
                              }
                              
                        var cell = document.createElement("td");
                        cell.setAttribute("className", "lgformText");
                        cell.setAttribute("class", "lgformText");
                var cellText = document.createTextNode(formText);
                cell.appendChild(cellText);
                row.appendChild(cell);
                        var cell2 = document.createElement("td");
                        var cellText2 = document.createElement("input");
                        cellText2.setAttribute("type", "file");
                        cellText2.setAttribute("name", "pic" + r);
                        cellText2.setAttribute("class", "lgFormElements");
                        cellText2.setAttribute("className", "lgFormElements");
                        cell2.appendChild(cellText2);
                        row.appendChild(cell2);
                        cell2.setAttribute("className", "formElements");
                        cell2.setAttribute("class", "formElements");
                    tblBody.appendChild(row);
        }
        var row2 = document.createElement("tr");
                  var cell3 = document.createElement("td");
                  row2.appendChild(cell3);
                  var cell4 = document.createElement("td");
                  cell4.setAttribute("class", "lgFormElements");
                  cell4.setAttribute("className", "lgFormElements");
                  row2.appendChild(cell4);
                  var submitButton = document.createElement('input');
                  submitButton.type = 'image';
                  submitButton.value = 'UploadPix';
                  submitButton.name = 'UploadPix';
                  submitButton.src = '../images/but_uploadPix.png';
                  submitButton.setAttribute("className", "formButtons");
                  submitButton.setAttribute("class", "formButtons");
                  submitButton.onclick = swapUploadButton;
                  cell4.appendChild(submitButton);
                  tblBody.appendChild(row2);
                  
            // put the <tbody> in the <table>
        tbl.appendChild(tblBody);            
            container.appendChild(tbl);
            }      

And the swapUploadButton function:

function swapUploadButton(){
      var uploadingImage = document.picUpload.UploadPix;
            uploadingImage.src = "../images/progress.gif";
            }

Any help is greatly appreciated!
dragboatrandyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
The problem is that input type=image is NOT!!! part of the form elements collection (for some strange reasons).
herefore you cannot reference it by document.formname.
Give not only a name but also an "id" attribute and get the button image by:
 var uploadingImage = document.getElementByid('UploadPix');




0
dragboatrandyAuthor Commented:
Ok, I modified the code to:

function swapUploadButton(){
      var uploadingImage = document.getElementById('UploadPix');
            uploadingImage.src = "../images/progress.gif";
            }
            

function makeUploadFields(c){
      var container = document.getElementById('FileUpload');
      var tbl     = document.createElement("table");
      tbl.setAttribute("id", "lgform");
    var tblBody = document.createElement("tbody");
            
      for(var r = 1; r <= c; r++){
            // creates a table row
            var row = document.createElement("tr");

                var formText = null;
                        var formField = null;
            
                        if(r == 1){
                              formText = 'Primary Picture:';
                              } else if (r > 1 && r < c) {
                              formText = 'Picture #' + r + ':';
                              } else if (r == c) {
                              formText = 'Final Picture:';
                              }
                              
                        var cell = document.createElement("td");
                        cell.setAttribute("className", "lgformText");
                        cell.setAttribute("class", "lgformText");
                var cellText = document.createTextNode(formText);
                cell.appendChild(cellText);
                row.appendChild(cell);
                        var cell2 = document.createElement("td");
                        var cellText2 = document.createElement("input");
                        cellText2.setAttribute("type", "file");
                        cellText2.setAttribute("name", "pic" + r);
                        cellText2.setAttribute("class", "lgFormElements");
                        cellText2.setAttribute("className", "lgFormElements");
                        cell2.appendChild(cellText2);
                        row.appendChild(cell2);
                        cell2.setAttribute("className", "formElements");
                        cell2.setAttribute("class", "formElements");
                    tblBody.appendChild(row);
        }
        var row2 = document.createElement("tr");
                  var cell3 = document.createElement("td");
                  row2.appendChild(cell3);
                  var cell4 = document.createElement("td");
                  cell4.setAttribute("class", "lgFormElements");
                  cell4.setAttribute("className", "lgFormElements");
                  row2.appendChild(cell4);
                  var submitButton = document.createElement('input');
                  submitButton.type = 'image';
                  submitButton.value = 'UploadPix';
                  submitButton.name = 'UploadPix';
                  submitButton.id = 'UploadPix';
                  submitButton.src = '../images/but_uploadPix.png';
                  submitButton.setAttribute("className", "formButtons");
                  submitButton.setAttribute("class", "formButtons");
                  submitButton.onclick = swapUploadButton;
                  cell4.appendChild(submitButton);
                  tblBody.appendChild(row2);
                  
            // put the <tbody> in the <table>
        tbl.appendChild(tblBody);            
            container.appendChild(tbl);
            }      

Now, as soon as I click the button, it disappears but no replacement image appears.  I know that the image is on the server, and that the path is correct.
0
ZvonkoSystems architectCommented:
Your code works in my tests with local images.
Put in the form tag in the onSubmit event handler some alert() to see the image changed.
And that is the problem perhaps that without alert submit suspension you do not see the input type image changing its attribute.

I solve such type=image problems by a work around.
I create a submit button, give it a name (not "submit" as name, better "Submit") and set its style to be hidden.
In a regualr image I do the onClick event handler let call the form submit button onclick() mehod.

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

dragboatrandyAuthor Commented:
I'm sorry, the answer is a bit confusing.  Are you saying to use an image, and just apply an onclick event handler to submit the form?
0
ZvonkoSystems architectCommented:
No. Calling submit() of the form will let your file upload fail, because it disturbs the file upload control by scripting.
Calling a Submit button onclick() method is not forbidden in file upload as I can remember, but I am not sure :)

Another or even better work around is to place at that location where your type=imige button is located one submit button and redesign that submit button with CSS style attributes to be an image. You know how to change button to image style?

0
dragboatrandyAuthor Commented:
No, could you give me a sample?  I have done other advanced features on this page, but this one I am struggling with
0
ZvonkoSystems architectCommented:
OK, give me a second...
0
ZvonkoSystems architectCommented:
Here we go:
<style>
input.subButton {
  height: 77px;
  width: 77px;
  border: none;
  background-image: url('smily.jpg') ;
  background-repeat: no-repeat;
}
</style>

and the button:
var submitButton = document.createElement('input');
                  submitButton.type = 'submit';
                  submitButton.value = '';
                  submitButton.name = 'UploadPix';
                  submitButton.id = 'UploadPix';
                  submitButton.src = 'test2.gif';
                  submitButton.setAttribute("className", "formButtons subButton");
                  submitButton.setAttribute("class", "formButtons");
                  submitButton.onclick = swapUploadButton;
                  cell4.appendChild(submitButton);
                  tblBody.appendChild(row2);
                 
            // put the <tbody> in the <table>
        tbl.appendChild(tblBody);            
            container.appendChild(tbl);
            }      
     

function swapUploadButton(){
   this.style.backgroundImage = "url('listCollapsed.png')";
}

</script>
0
dragboatrandyAuthor Commented:
I tried the solution as proscribed, and the only thing it does is makes a button that is empty and only about 50 px wide.  All of the upload function still works, but the button doesn't disppear and be replaced with the new image.

Would this be easier if it was a static coded button, instead of DOM built.

Thanks!
0
ZvonkoSystems architectCommented:
Change the type of button from "submit" to "button"
Tune then your images and image dimensions untill you get the images the way you want.

I supose that the image change when submit action is running is delayed.

For that I have the next trick.
But give me first the feedback that image change is swapping as you want it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dragboatrandyAuthor Commented:
I have tried all of the prescribed items and to no avail.  Is the only problem because the submit button (image button) in this case is created by Javascript and the DOM.  Would it be simpler to do if the submit button was static?
0
dragboatrandyAuthor Commented:
Zvonko,

I redid it just as you described with one update.  

modified these values to make them work:
                  submitButton.setAttribute("className", "subButton");
                  submitButton.setAttribute("class", "subButton");

It does work as described in FireFox, but not in IE.  In IE, displays a blank button the style set width and height, and submits and uploads the file, but the proper background image does not display and it does not switch the image on submit.

Thank you!
0
dragboatrandyAuthor Commented:
I did some investigating and tried a few things and figured out that I need to put this in the css style

background: url('../images/but_uploadPix.png') ;

I guess IE doesn't use background-image.

Thank you so much for your help in this manner, it was rather simple looking at it now.  Much appreciated!
0
ZvonkoSystems architectCommented:
IE for sure does use background-image, but it works also with background: alone.
Such effects as you got is mostly typos followed by browser cache not refreshing.

Anyway, main goal is that it works.
Se you.
0
dragboatrandyAuthor Commented:
I have run into another problem.  In FireFox, the animated gif works just fine, even it if the image is not preloaded.  If I preload the images, In IE, the image swaps, but appears to only show one frame of the animated gif.  Any ideas?

Here is the code that I use to preload the images.

Image1 = new Image(200,24)
Image1.src = "../images/progress.gif"

Thanks!
0
ZvonkoSystems architectCommented:
That has noting to do with preloading.
The problem is that animated gifs stop their frame processing as soon as an event occure.
I do not know any workaround for it. I wonder why animation goes on in FF while submitting.
What I could imagin is that a popup with the animated gif would continue the animation, but for that small extra you get a bag of new problems, like popup blocker and close of pupup at submit end.


0
dragboatrandyAuthor Commented:
Is there a way to set a timer that can load one image then 2 seconds later load a second, and then just loop?  The problem is that if someone is uploading 10 pictures it make take awhile and most people are pretty impatient and don't want to wait and then think the page is hung, when in actuality, it is still uploading.  I am trying to make sure they know the files are still uploading.
0
dragboatrandyAuthor Commented:
How about showing a layer on click that has a animated gif file?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.