formularz - javascript Opcje

[cycofiasz]

Witam, zrobiłem taki skromny skrypt php do uploadu plików (mp3) i wszystko śmiga elegancko.

Chciałbym jednak urozmaicić go o taki kosmetyczny efekt, że po kliknięciu "Wyślij" pokazywał by się animowany gif w jakimś miejscu stronki podczas gdy plik upa się na serwer... Podobna rzecz jest przy dodawaniu filmów na youtube.

Za pewne chodzi tu o zdarzenie "onsubmit", ale zielony jestem w javascripcie...

[skowron-line]

np.

[HTML] pobierz, plaintext 
<form action="" method="" onsubmit="pokaz();">
// twoje inputy
<input type="submit" name="submit"  id="submit">
</form>
<span id="loader" style="visibility:hidden"><img src="loader.gif" border="0"></span>
[HTML] pobierz, plaintext 

Kod JS.

[HTML] pobierz, plaintext 
function pokaz() {
document.getElementById( 'loader' ).style.visibility='visible';
}
[HTML] pobierz, plaintext 

Pisane z palca

[cycofiasz]

Brawa dla tego Pana, pełna profeska.

Jeszcze jedno: jak zrobić żeby po kliknięciu submit oprócz tego gifa pojawił się odmierzasz czasu (ile minęło sekund od kliknięcia).

Chodzi o to by można było to wrzucić do tego span'a pod obrazkiem gif o którym była mowa wyżej.

Ten post edytował cycofiasz 28.07.2008, 17:24:02

[skowron-line]

[HTML] pobierz, plaintext 
<script type="text/javascript">
function pokaz() {
document.getElementById( 'loader' ).style.visibility='visible';
setInterval( timex(), 1000 );
}
var sek = 0;
function timex() {
document.getElementById( 'timeLoader' ).style.visibility='visible';
document.getElementById( 'timeLoader' ).setHTML = sek;
sek++;
}
</script>
<form action="" method="" onsubmit="pokaz();">
// twoje inputy
<input type="submit" name="submit" id="submit">
</form>
<span id="loader" style="visibility:hidden"><img src="loader.gif" border="0"></span>
<span id="timeLoader" style="visibility:hidden;display:block;"></span>
[HTML] pobierz, plaintext 

Znów pisane z palca

Ten post edytował skowron-line 28.07.2008, 20:54:06

[cycofiasz]

tym razem cuś mi nie działa

[skowron-line]

[HTML] pobierz, plaintext 
<script type="text/javascript">
function pokaz() {
document.getElementById( 'loader' ).style.visibility='visible';
setInterval( "timex();", 1000 );
}
var sek = 1;
function timex() {
document.getElementById( 'timeLoader' ).style.visibility='visible';
document.getElementById( 'timeLoader' ).innerHTML = sek;
sek++;
}
</script>
<form action="" method="" onsubmit="pokaz();">
// twoje inputy
<input type="submit" name="submit" id="submit">
</form>
<span id="loader" style="visibility:hidden"><img src="loader.gif" border="0"></span>
<span id="timeLoader" style="visibility:hidden;display:block;"></span>
[HTML] pobierz, plaintext 

Pomyłeczka nie setHTML tylko innerHTML przywyczajenie do Mootools -a

Ten post edytował skowron-line 29.07.2008, 08:08:07

[cycofiasz]

Dzięki, już działa. Może uda mi się jeszcze tutaj dowiedzieć jak zmienić więcej parametrów stylu css po kliknięciu? Jak trzeba rozdzielić te parametry?

np:

[HTML] pobierz, plaintext 
document.getElementById( 'loader' ).style.visibility='visible';
[HTML] pobierz, plaintext 

i chciałbym jeszcze zmienić jednocześnie height='50px'

[skowron-line]

[HTML] pobierz, plaintext 
document.getElementById( 'loader' ).style.visibility='visible';
document.getElementById( 'loader' ).style.height='50px';
[HTML] pobierz, plaintext