Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Wykonywanie funkcji bez reloadu
Forum PHP.pl > Forum > Gotowe rozwiązania > Szukam
matjanos
9.07.2009, 14:38:28
Witam.
Mam krótki formularz i chciałbym, aby po każdym przełączeniu focusa (kliknięciu kursorem w inny input) była wykonywana funkcja sprawdzająca poprawność zawartości własnie opuszczonego inputa.
Funkcja ta wykorzystująca innerHTML wyświetlałaby odpowiedni tekst obok inputa.
Chodzi o coś w rodzaju techniki wykorzystanej w formularzu rejestracyjnym forum.php.pl
skowron-line
9.07.2009, 14:47:11 
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function sprawdz( obj )
  3. {
  4. if( obj.value == "" )
  5. {
  6. alert( 'blad' );
  7. }
  8. }
  9. </script>
  10.  
  11. </script>
  12.  
  13. <input type="text" onclick="sprawdz( this );" onblur="sprawdz( this );">
[HTML] pobierz, plaintext


*pisane z palca, reszte doczytaj.
piotrooo89
9.07.2009, 14:50:24
z palucha:

[HTML] pobierz, plaintext 
  1. <script>
  2. function pokaz(co, gdzie)
  3. {
  4. 	var gdzie = document.getElementById(gdzie);
  5. 	gdzie.innerHTML=co;
  6. }
  7. </script>
  8. <form action="" method="get">
  9. 	<input type="text" name="t1" id="t1" onBlur="pokaz(this.value, 't1l')" /><span id="t1l"></span>
  10. 	<input type="text" name="t2" id="t2" onBlur="pokaz(this.value, 't2l')" /><span id="t2l"></span>
  11. </form>
[HTML] pobierz, plaintext
matjanos
10.07.2009, 15:50:30
Bardzo mi pomogło! Dzięki!
Nie chcą zakładać nowego tematu zapytam od razu w tym o jeszcze jedną rzecz.
Mam taki kod (wyślę cały bo nie wiem co tu sie może przydać):

Kod
<script>
function pokaz(co, gdzie)
{
var gdzie = document.getElementById(gdzie);

if(co==""){gdzie.innerHTML="<font color='red'><ul style='list-style-image:url(images/no.gif);'><li>Błąd: Wpisz komentarz.</li></ul></font>";
gdzie1.innerHTML="<input type='submit' value='Wyślij' style='margin-left:63px; float:left;' name='sub' disabled='disabled'>";}
else if(co=="Treść komentarza"){gdzie.innerHTML="<font color='red'><ul style='list-style-image:url(images/no.gif);'><li>Błąd: Zmień komentarz z domyślnego</li></ul></font>";
gdzie1.innerHTML="<input type='submit' value='Wyślij' style='margin-left:63px; float:left;' name='sub' disabled='disabled'>";}
else gdzie.innerHTML="<font color='green'><ul style='list-style-image:url(images/yes.gif);'><li>Poprawne dane</li></ul></font>";}

function pokaz1(co, gdzie)
{
var gdzie = document.getElementById(gdzie);


if(co==""){gdzie.innerHTML="<font color='red'><ul style='list-style-image:url(images/no.gif);'><li>Błąd: Wpisz nick</li></ul></font>";
gdziesub.innerHTML="<input type='submit' value='Wyślij' style='margin-left:63px; float:left;' name='sub' disabled='disabled'>";}
else gdzie.innerHTML="<font color='green'><ul style='list-style-image:url(images/yes.gif);'><li>Poprawne dane</li></ul></font>";

}

</script>



<form action='wpisy.php' method='post'>
<div style='margin-left:60px;'>Twój nick:</div>
<span id='nick1' style="font-size:13px; float:right; line-height:1em; margin-right:70px;"> </span>
<input type="text" name="nick" onBlur="pokaz1(this.value, 'nick1')" style="float:left; margin-right:25px;margin-left:60px;"><div style="text-align:left; float:left;">
<span id='nick1' style="font-size:13px; float:right;"> </span>
<input type="checkbox" name="an" onclick="if(this.checked==true){ nick.disabled=true; nick.value='Anonim';}else{ nick.disabled=false; nick.value='';}"
id="an" style='float:both; margin-left:60px;' /><label for="an" style="font-size:10px; color:grey;">Zaznacz jeśli chcesz być anonimowy</label></div><br />




<textarea name="com" rows="8" cols="35" style="color: gray; font-style: italic; margin-left:60px; " onBlur="pokaz(this.value, 'com1')">Treść komentarza</textarea><br />



<input type="submit" value="Wyślij" style="margin-left:60px; float:left;" name="sub" id="sub" OnMouseOver="pokaz(blad, 'val')">&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size:13px; margin-bottom:15px;" id='com1'> </span> <br />
</form>

I chciałbym żeby podczas kiedy ktoś błędnie uzupełni pole blokował się guzik submit.
co zrobic?
skowron-line
10.07.2009, 15:52:21 
[HTML] pobierz, plaintext 
  1. document.getElementsByName( 'sub' )[0].disabled = true;
[HTML] pobierz, plaintext

To zablokuje submita.


@UP
piotrooo89 takim sposobem robi się lekki bajzel w kodzie lepiej robić to dynamicznie
javascript nextsibling 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="advajax.js"></script>
  4. <script type="text/javascript">
  5.  
  6. function insertAfter( referenceNode, newNode )
  7. {
  8. 	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  9. }
  10.  
  11. function request( object, file )
  12. {
  13. 	var oD = document.createElement( 'div' );
  14. 	insertAfter( object, oD );
  15.  
  16. 	advAJAX.get({
  17. 		url: file,
  18. 		mimeType: 'text/html',
  19. 		onSuccess : function(obj) 
  20. 		{
  21. 			oD.innerHTML = obj.responseText;	 
  22. 		}
  23. 	});
  24. 	object.setAttribute( 'onclick',"" );// special 4 IE
  25.  
  26. }
  27.  
  28. </script>
  29. </head>
  30. <body>
  31. Just one click <br />
  32. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  33. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  34. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  35. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  36. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  37. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  38. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  39. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  40. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  41. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  42. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  43. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  44. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  45. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  46. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  47. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  48. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  49. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  50. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  51. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  52. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  53. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  54. <a href="javascript:void(0);" onclick="javascript:request( this, 'a.txt' );">Click me 2 get text from A file</a><br />
  55. <a href="javascript:void(0);" onclick="javascript:request( this, 'b.txt' );">Click me 2 get text from B file</a><br />
  56. </body>
  57. </html>
[HTML] pobierz, plaintext

Przykład wklejam bo nie mogłem znaleść adresu na który to wrzuciłem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.