Solved

Swap Image src of submit button onClick or onSubmit

Posted on 2007-03-30
18
596 Views
Last Modified: 2013-11-19
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!
0
Comment
Question by:dragboatrandy
  • 10
  • 8
18 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 18825575
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
 

Author Comment

by:dragboatrandy
ID: 18825909
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 18826132
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
 

Author Comment

by:dragboatrandy
ID: 18826230
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 18826320
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
 

Author Comment

by:dragboatrandy
ID: 18826336
No, could you give me a sample?  I have done other advanced features on this page, but this one I am struggling with
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18826341
OK, give me a second...
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18826459
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
 

Author Comment

by:dragboatrandy
ID: 18827235
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 18828265
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
 

Author Comment

by:dragboatrandy
ID: 18847992
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
 

Author Comment

by:dragboatrandy
ID: 18848468
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
 

Author Comment

by:dragboatrandy
ID: 18848487
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 18848523
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
 

Author Comment

by:dragboatrandy
ID: 18848829
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 18848969
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
 

Author Comment

by:dragboatrandy
ID: 18852119
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
 

Author Comment

by:dragboatrandy
ID: 18852957
How about showing a layer on click that has a animated gif file?
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now