Simple Image Display On Click

[icesolid]

Hello everyone!

I am new to this DHTML concept. I have been programming in PHP for years, using the basic HTML, CSS and JavaScript concepts everyone uses (tables, rollover images, underline links on rollover, scrollbar effects, etc.). However after checking out dynamicdrive.com I was truly intrigued at how powerful and useful this DHTMLstuff can be.

I have a form that is submitted to a PHP scripted page on a button click. I was wondering if I could have the button "SAVE And Exit" become disabled and have the value of the button change to "Please wait..." upon the user clicking it.

I also wanted to have an image display below the button "Please wait.." after the user clicks the "SAVE And Exit" button, this image would be a loading bar that I have created (animated gif image). The reason for this is after the user clicks "SAVE And Exit" they are uploading 20 photos which take PHP time to upload, to this "Please wait.." button text and loader image would appear until PHP finished and the next process in PHP I have programmed would continue. I saw that dynamicdrive.com had loader bars, but thats really not what I am looking for, like I said something really simple.

I have looked through your scripts on your site and found scripts that perform the action I am looking for, but they are really more than what I need (they allow show/hide; I only want show and disable). Once again I am looking for something very simple.

Suggestions Welcomed!!!

[Twey]

<input id="upload" type="submit" value="Save &amp; Exit" onclick="setLoading(true)" />
<img src="loaderImage.png" style="visibility:hidden;" id="loader" />

<script type="text/javascript">
var uploadButtonId = "upload",
  loaderImageId = "loader";

function setLoading(yes) {
  var seal = document.getElementById(uploadButtonId),
    baskingShark = document.getElementById(loaderImageId);

  seal.value = yes ? "Please wait..." : "Save & Exit";
  seal.disabled = yes;

  baskingShark.style.visible = yes;
}
</script>

setLoading(true) to enable the loader; setLoading(false) to disable it.

[icesolid]

Using the code posted above the Save & Exit text changes and the button is disabled, however the image does not show up. I did rename the image to the image on my directory.

[Twey]

Yes, you're right, I made a stupid error.

<input id="upload" type="submit" value="Save &amp; Exit" onclick="setLoading(true)" />
<img src="loaderImage.png" style="visibility:hidden;" id="loader" />

<script type="text/javascript">
var uploadButtonId = "upload",
  loaderImageId = "loader";

function setLoading(yes) {
  var seal = document.getElementById(uploadButtonId),
    baskingShark = document.getElementById(loaderImageId);

  seal.value = yes ? "Please wait..." : "Save & Exit";
  seal.disabled = yes;

  baskingShark.style.visibility = yes ? "visible" : "hidden";
}
</script>

[icesolid]

This code works great, only draw back is that it doesen't actually submit to the page defined in the <form> tag. It just stays at the page with the loader image.

My <form> tag:

<form method="post" action="upload.php">

Anyone?

[Twey]

Remove the onclick from the submit button, and put

onsubmit="setLoading(true);return true;"

in the form tag.

[icesolid]

That worked, but now none of the values in the form are submitted?

For example: $_POST["save"] is not recognized in PHP as being submitted.

[icesolid]

Anyone with any ideas of why when the form is submitted I loose all of my form values?

[Twey]

Really? Well, that's odd... did you specify method="post" in your form tag?

[icesolid]

Yup, sure did.