formularz + js Opcje

[attimo]

Witam,

Chce zrobić formularz który przy błędnym wpisaniu któregoś z pól nie będzie odświeżał strony tylko wyświetli komunikat gdzie znajduje się błąd.

Formularz wygląda tak:

[HTML] pobierz, plaintext 
<form action = "<? echo $_SERVER['PHP_SELF'];?>"method = "post" name="forma" onsubmit="sprawdz()" > 
[HTML] pobierz, plaintext 

poniżej pola np.

[HTML] pobierz, plaintext 
<input type='text' name='imie'/>
<input type='submit' name='ok' value='ok'/>
[HTML] pobierz, plaintext 

kod js

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
function sprawdz()
{
	var imie = document.forms['forma']["imie"].value;
	if (imie == "")
	{
		alert("nic nie wpisales");
	}
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Nie sugerujcie się treścią to tylko prosty przykład opisujący mój problem polegający na tym, że strona się odświeża a chce aby wyświetlił sie tylko błąd bez odświerzania.

[kur3k]

Nie piszę w JS, jednak bym wrzucił to w pętle ;>

Ale pamiętaj, że nie każdy obsługuje JS.

Masz w PHP

[PHP] pobierz, plaintext 
		<?php
			if (empty($_POST['submit'])) {
			echo "<form method=\"post\" action=\"\"> 
				<table summary=\"Formularz zamówienia\" class=\"formularz\">
					<tr>
						<td>Imię, nazwisko:</td>
						<td><input type=\"text\" name=\"imie\" class=\"kontakt_pola\" /></td>
					</tr>
					<tr>
						<td>Numer kontaktowy:</td>
						<td><input type=\"text\" name=\"kontakt\" class=\"kontakt_pola\" /></td>
					</tr>
					<tr>
						<td>Adres e-mail:</td>
						<td><input type=\"text\" name=\"email\" class=\"kontakt_pola\" /></td>
					</tr>
					<tr>
						<td>Wiadomość:</td>
						<td><textarea name=\"tresc\" rows=\"\" cols=\"\" class=\"kontakt_tresc\"></textarea></td>
					</tr>
					<tr>
						<td></td>
						<td><input type=\"submit\" name=\"submit\" value=\"Wyślij\" class=\"kontakt_przycisk\" /> <input type=\"reset\" value=\"Usuń\" class=\"kontakt_przycisk_dwa\" /></td>
					</tr>
					</table>
					</form>"; }
				elseif (!empty($_POST['imie']) && !empty($_POST['kontakt']) && !empty($_POST['email']) && !empty($_POST['tresc'])) 
				{
					$message = "\nImię, naziwsko: $_POST[imie]\n\nNumer kontaktowy: $_POST[kontakt]\n\nAdres e-mail: $_POST[email]\n\nTresc wiadomości: $_POST[tresc]";
					$header = "From: $_POST[email]";
					@mail("pawel@niewazne.pl","POSITUM - nowa wiadomosc!","$message","$header")
					or die('<br /> Forumlarz konatktowy aktualnie nie działa poprawnie, spróbuj ponownie!');
					echo "<div id=\"kontakt_wiadomosc\">Wiadomość została wysłana poprawnie!</div> <br /> Postaramy się odpisać jak najszybciej jest to możliwe, czekaj!";
				}
			else echo "<div id=\"kontakt_blad\">BŁĄD - wypełnij wszystkie pola formularza kontaktowego!</div> <br /> Wróć do działu <a href=\"kontakt\" title=\"\">kontakt</a>.";
		?> 	
[PHP] pobierz, plaintext 

Nie będę Ci podawać kodu CSS, sam sformatuj sobie już :]

[QooBooS]

Witam.
Wystarczy dodać mały szczegół - return.
Oprócz tego proponuję zrobić to nieco inaczej:
funkcję niech wywołuje wciśnięcie przycisku 'OK', a nie zdarzenie onSubmit formularza.
Będzie to wyglądało tak:
Z form usuwasz zdarzenie onSubmit:

[HTML] pobierz, plaintext 
<form action = "<? echo $_SERVER['PHP_SELF'];?>"method = "post" name="forma">
[HTML] pobierz, plaintext 

Do przycisku 'OK' dodajesz onClick i zmieniasz go z type='submit' na type='button':

[HTML] pobierz, plaintext 
<input type='button' name='ok' value='OK' onClick='return sprawdz();'/>
[HTML] pobierz, plaintext 

A w funkcji dodajesz odpowiednio:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function sprawdz(){	
var imie = document.forms['forma']["imie"].value;
var nazwisko = document.forms['forma']['nazwisko'].value;
if (imie == "")
{
alert("Nie wpisales imienia!");
return false;
} else if (nazwisko == "")
{
alert("Nie wpisales nazwiska!");
return false;
} else {
return true;
document.forms['forma'].submit();
}
</script>
[HTML] pobierz, plaintext 

Co tu zrobiłem:
Sprawdzasz każde pole z osobna. Jeśli jest puste, wyświetlasz komunikat i nie wysyłasz formularza, a jeśli wszystkie są wypełnione - zwraca true i wykonuje submit() dla formularza (innymi słowy - wysyła go ). Pole nazwisko wymyśliłem, żeby pokazać Ci, jak to wygląda z większą ilością pól.

[attimo]

Niestety po kliknieciu w przycisk nic sie nie dzieje

Wiecie może dlaczego ?

[gothye]

zobacz jak to wygląda u mnie (wyszukiwarka prosta) :

[HTML] pobierz, plaintext 
<script type='text/javascript'>
		function checkform(frm){
			if(frm.f_key.value==''){
				alert('Łatwiej będzie mi coś znaleść jeśli podasz czego mam szukać :) ');
				return false;
			}
		}
	</script>	
 
	<form method="post" action="{$ROOT}/szukaj" onsubmit='return checkform(this);'>
		<input type="text" class="text" value="" name="f_key" id="s">
 	<input type="submit" value="Szukaj" name="s_key">&nbsp;&nbsp;<a href='szukaj'>Zaawansowane szukanie</a>
	</form>
[HTML] pobierz, plaintext 

[wiiir]

dodatkowo mozesz po kazdej zmianie pola sprawdzic wartosc pola poprzez onChange
jesli pola te definiuja np email login itd mozesz ajaxem sprawdzic czy email jest wolny czy nie, poczym podac odpowiednia informacje przy danym polu
jesli nie chcesz wyslac formularza z bledami mozesz zrobic sobie funkcje js ktora zbada ci wszystkie pola a pozniej wywola submit
czyli document.nazwa_fomularza.submit...

[attimo]

Poprawiłem kod i teraz działa poprawnie tylko mam jeszcze jedno pytanie.

np.

[JAVASCRIPT] pobierz, plaintext 
function sprawdz(){	
var imie = document.forms['forma'].imie.value;	
var nazwisko = document.forms['forma'].nazwisko.value;
var haslo = document.forms['forma'].haslo.value;
if(imie == "")
{
	alert("nie wpisales imienia");
	return false;
}
else if(nazwisko == "")
{
	alert("nie wpisales nazwiska");
	document.forms['forma'].nazwisko.style.border = "2px solid #FF0000";
	return false;
 
}
else if(haslo == "")
{
	alert("Nie wpisales hasla");
	return false;
}
else
{
	return true;
}
}
[JAVASCRIPT] pobierz, plaintext 

Ustawiłem styl w razie gdyby nazwisko zostało źle wpisane, teoretycznie działa. Tylko, że jeśli wpisze coś do tego pola nadal jest aktywny ten styl czyli czerwona ramka a chciałbym aby po wpisaniu było normalnie.

Ten post edytował attimo 1.03.2010, 17:11:37

[QooBooS]

Zrób tak:
Do pola, które ma być wyróżnione (nazwisko), dodaj:

[HTML] pobierz, plaintext 
onChange="document.forms['forma'].nazwisko.style.border = 'none';"
[HTML] pobierz, plaintext 

Teraz po zmianie zawartości pola, ramka będzie automatycznie usuwana.
Możesz też zamiast onChange użyć onFocus - wtedy ramka zniknie po uaktywnieniu tego pola (np. kliknięciu w nim)

Ten post edytował QooBooS 1.03.2010, 21:19:34

[attimo]

Z tym sobie poradziłem, ale bez Ajaxa to raczej nie ma sensu. Jeśli pole to np. login to po przejsciu do następnego trzeba byłoby sprawdzić to poprzednie z użyciem php a dokładniej sprawdzić czy w bazie nie ma już takiego użytkownika. mógłbym użyć dla inputa onChange ale nie bardzo wiem jak miała by wyglądać taka funkcja sprawdzająca w ajaxie.

[wiiir]

ajax nie sluzy do sprawdzania twoich pol tylko komunikacji z serwerem.. musisz napisac sobie funkcje ktora pobierze wartosc pola, nastepnie zbudowac sobie ajaxa, albo skorzystac z gotowych rozwiazan typu jQuery, ajax, wysle ci ta wartosc do skryptu php, w php sprawdzasz sobie czy istnieje np uzytkownik, pozniej musisz jeszcze obsluzyc powrot ajaxa i koniec, nie wiem jak dziala ajax w jQuery bo korzytam ze swojego ajaxa, u mnie jest tak ze w powrocie wykonywana jest funkcja taka jaka wsakrze przy wywolaniu ajaxa,
np:

[HTML] pobierz, plaintext 
ajax(plik.php, parametry, funkcja przy powrocie)
[HTML] pobierz, plaintext 

teraz mi przyszlo do glowy ze JQ fajnie obsluguje JSON-a wiec mozesz sobie zwrocic json-a a potem tylko eval();

Ten post edytował wiiir 2.03.2010, 08:54:09