αυτόματη συμπλήρωση φόρμας

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από fafos » 20 Δεκ 2010 15:43

Oraia... pame parakato..


demo: http://www.istopoli.com/tuts/blur/


Sto demo mou exo thn automath symplhrosh grafontas to onomateponymo h to thlefono..
Den se desmeuei tipota kai mporeis na zhtas automath symplhrosh kai apo alla pedia (p.x. email)..
To skeptiko einai to exhs.. symplhronontas ena pedio kai phgainontas sto epomeno h ajax na kalei ena php arxeio to opoio syndeetai me thn vash kai prospathei na vrei thn eggrafh pou tereiazei me to onoma gia paradeigma.. an vrei apotelesma pairnei ola ta dedomena kai ta kanei echo mesa sto idio to php arxeio.. oti typonei to php h ajax to lamvanei os dedomena (data) kai ta analyei dinontas ta stoixeia ths eggafhs sta analoga pedia ths formas h petaei error otan den vriskei eggrafh..


h selida ths formas...

shmantiko einai na exeis id gia kathe pedio ths formas:

Κώδικας: Επιλογή όλων

<span id="msgbox" style="display&#58;none"></span>
<form name="forma" id="forma" action="" method="post">
Ονοματεπώνυμο&#58; <input size="50" type="text" name="name" id="name">

<br>
<br>
Τηλέφωνο&#58; <input size="50" type="text" name="phone" id="phone">

<br>
<br>
Διεύθυνση&#58;<input size="50" type="text" name="address" id="address"><br>
<br>
<br>
<input type="submit" name="submit" value="submit"></form>
prosarmozeis thn forma symfona me ta dika sou dedomena.. vazeis nea pedia, allazeis action klp klp.. panta omos method=POST kai panta id se kathe pedio..

to span me id="msgbox" einai gia na mas dinei ta mhnymata lathous h epityxous eureshs ths eggrafhs...


to ajax script... prota kaleis thn vivliothikh ths jquery:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

katopin feiaxneis gia KATHE pedio pou thes na kanei enan elegxo sthn vash kai mia function gia na kalei to php arxeio (edo to leo check.php).

Κώδικας: Επιλογή όλων

<script language="javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;
&#123;

// elegxos gia name
	$&#40;"#name"&#41;.blur&#40;function&#40;&#41;
	&#123;
		
		$&#40;"#msgbox"&#41;.removeClass&#40;&#41;.addClass&#40;'messagebox'&#41;.text&#40;'Checking...'&#41;.fadeIn&#40;1000&#41;;

		$.post&#40;"check.php",&#123; name&#58;$&#40;this&#41;.val&#40;&#41; &#125; ,function&#40;data&#41;
        &#123;

		  if&#40;data=='no'&#41; 
		  &#123;
		  	$&#40;"#msgbox"&#41;.fadeTo&#40;200,0.1,function&#40;&#41; 
			&#123; 

			  $&#40;this&#41;.html&#40;'<br /><img src="img/stop.png" width="16" height="16" border="0"/> <font color="#cc0000">Δεν βρέθηκε εγγραφή με αυτό το ονοματεπώνυμο!</font>'&#41;.addClass&#40;'messageboxerror'&#41;.fadeTo&#40;900,1&#41;;
			&#125;&#41;;		
          &#125;
		  else
		  &#123;
		  	$&#40;"#msgbox"&#41;.fadeTo&#40;200,0.1,function&#40;&#41;  
			&#123; 
		
var exp = data.split&#40;'|'&#41;;
var phone = exp&#91;0&#93;;
var address = exp&#91;1&#93;;
$&#40;'#phone'&#41;.val&#40;phone&#41;;
$&#40;'#address'&#41;.val&#40;address&#41;;
			  $&#40;this&#41;.html&#40;'<img src="img/accept.png" width="16" height="16" border="0" />'&#41;.addClass&#40;'messageboxok'&#41;.fadeTo&#40;900,1&#41;;	
			&#125;&#41;;
		  &#125;
				
        &#125;&#41;;
 
	&#125;&#41;;



//elegxos gia phone	
	$&#40;"#phone"&#41;.blur&#40;function&#40;&#41;
	&#123;

		$&#40;"#msgbox"&#41;.removeClass&#40;&#41;.addClass&#40;'messagebox'&#41;.text&#40;'Checking...'&#41;.fadeIn&#40;1000&#41;;

		$.post&#40;"check.php",&#123; phone&#58;$&#40;this&#41;.val&#40;&#41; &#125; ,function&#40;data&#41;
        &#123;
		  if&#40;data=='no'&#41; 
		  &#123;
		  	$&#40;"#msgbox"&#41;.fadeTo&#40;200,0.1,function&#40;&#41; 
			&#123; 

			  $&#40;this&#41;.html&#40;'<br /><img src="img/stop.png" width="16" height="16" border="0" /> <font color="#cc0000">Δεν βρέθηκε εγγραφή με αυτό το τηλέφωνο!</font>'&#41;.addClass&#40;'messageboxerror'&#41;.fadeTo&#40;900,1&#41;;
			&#125;&#41;;		
          &#125;
		  else
		  &#123;
		  	$&#40;"#msgbox"&#41;.fadeTo&#40;200,0.1,function&#40;&#41;  
			&#123; 
var exp = data.split&#40;'|'&#41;;
var name = exp&#91;0&#93;;
var address = exp&#91;1&#93;;

$&#40;'#name'&#41;.val&#40;name&#41;;
$&#40;'#address'&#41;.val&#40;address&#41;;
			  $&#40;this&#41;.html&#40;'<img src="img/accept.png" width="16" height="16" border="0" />'&#41;.addClass&#40;'messageboxok'&#41;.fadeTo&#40;900,1&#41;;	
			&#125;&#41;;
		  &#125;
				
        &#125;&#41;;
 
	&#125;&#41;;	
	
		
&#125;&#41;;
</script>
edo zhtao otan symplhrothei ena apo ta pedia me id name h phone na trexei to php arxeio sto background kai na kanei elenxo gia na dei ean epalhtheuetai h eggrafh..

vasika allazeis to id gia kapoio neo pedio (#name h #phone), to pedio pou prepei na parei to value kai na kanei elegxo: $.post("check.php",{ name:$(this).val() } ,function(data)

kai to mhnyma lathous:

Κώδικας: Επιλογή όλων

			  $&#40;this&#41;.html&#40;'<br /><img src="img/stop.png" width="16" height="16" border="0"/> <font color="#cc0000">Δεν βρέθηκε εγγραφή με αυτό το ονοματεπώνυμο!</font>'&#41;.addClass&#40;'messageboxerror'&#41;.fadeTo&#40;900,1&#41;;
to spoudaiotero kommati edo einai auto opou pairno ta dedomena pou tha mou steilei to php arxeio apo thn vash:

Κώδικας: Επιλογή όλων

var exp = data.split&#40;'|'&#41;;
var phone = exp&#91;0&#93;;
var address = exp&#91;1&#93;;
$&#40;'#phone'&#41;.val&#40;phone&#41;;
$&#40;'#address'&#41;.val&#40;address&#41;;
afou perasei epityxos kai vrei thn eggrafh mesa sto php arxeio typonei ta dedomena me ena echo (tha deis parakato) xorizontas ta me kapoion xarakthra o opoios den xrhsimopoioume sta dedomena pou exoume sthn vash.. ego xrhsimopoihsa thn katheto (|) (kathetos einai mhn paei to myalo sas sto ponhro :lol: ) esy mporeis kapoio allo xarakthra (p.x. % h ^) arkei na mhn yparxei sigura se kapoia eggrafh..

me thn split() ths jquery (analogo ths explode ths php) kano ta dedomena array kai ta pairno ena ena gia na ta valo sta pedia ths formas:
var exp = data.split('|'); thlefono = var phone = exp[0]; valeto sto pedio me id=phone: $('#phone').val(phone);

gia kathe pedio pou tsekaroume auta einai diaforetika.. afou exoume to onomatepvnymo os metro anazhthshs den xreiazetai na to epistrepsoume apo thn vash mas opote epistrefoume mono to phone kai thn address.. antistoixa otan psaxnoume me thlefono gyrname to name kai thn address.. parakato einai to php opou analyetai kalytera..

to check.php...

Κώδικας: Επιλογή όλων

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test';
$conn = mysql_connect&#40;$dbhost,$dbuser,$dbpass&#41; or die&#40;'wrong'&#41;;
$db = mysql_select_db&#40;$dbname,$conn&#41;;
mysql_query&#40;' set character set utf8 '&#41;;
mysql_query&#40;"SET NAMES 'utf8' "&#41;; 

$cat = mysql_real_escape_string&#40;$_POST&#91;name&#93;&#41;;
$cat_en =mysql_real_escape_string&#40;$_POST&#91;phone&#93;&#41;;

//query gia name
if&#40;$cat&#41;&#123;
 	$query = "SELECT * FROM eggrafes WHERE name='$cat'";
	$data = mysql_db_query&#40;$dbname, $query, $conn&#41;;
	$data = mysql_fetch_array&#40;$data&#41;;

if&#40;$data&#91;name&#93;&#41; &#123;
echo $data&#91;phone&#93;.'|'.$data&#91;address&#93;;

&#125; else &#123;
echo 'no';
&#125;
&#125;



//query gia phone
if&#40;$cat_en&#41;&#123;
 	$query_en = "SELECT * FROM eggrafes WHERE phone='$cat_en'";
	$data_en = mysql_db_query&#40;$dbname, $query_en, $conn&#41;;
	$data_en = mysql_fetch_array&#40;$data_en&#41;;

if&#40;$data_en&#91;phone&#93;&#41; &#123;
echo $data_en&#91;name&#93;.'|'.$data_en&#91;address&#93;;


&#125; else &#123;
echo 'no';
&#125;
&#125;

?>
katarxas syndeesai me thn vash kai asfalizeis ta dedomena pou stelnei h forma me kapoion tropo (edo xrhsimopoio thn mysql_real_escape_string())..

parakato gia kathe pedio anazhthsh feiaxno kai ena query opou leo vres apo thn vash thn eggrafh me onomateponymo= $cat (dhl. to $_POST[name]) h me thlefono = $cat_en (dhl. to $_POST[phone]).. mporeis na dhmiourghseis kai alla paromoia queries gia alla pedia anazhthshs (p.x. email)..

to query arxizei na psaxnei sthn vash... an den vrei eggrafh tha kanei ena echo 'no';, tha to parei h ajax kai tha mas dosei mhnyma oti h eggrafh den yparxei..

an vrei eggrafh tha kanei echo ta dedomena pou exoume sthn vash mas:

echo $data[phone].'|'.$data[address];

edo vlepeis ton diaxoristh pou exo valei (|) kai pou legame prohgoumenos... opos proeipa pairnoume ola ta dedomena ektos auto ths anazhthshs! auto to echo tha to parei to ajax, tha to xorisei ana pedio kai tha to emfanisei automata sta analoga pedia ths formas mas..

icons kai style einai thema goustou pos tha ta kaneis.. auta douleuoun kala me UTF-8.. me alla encodings isos exeis provlhmata sta ellhnika..

auta mono...
:lol:
Τελευταία επεξεργασία από το μέλος fafos την 16 Φεβ 2011 03:04, έχει επεξεργασθεί 2 φορές συνολικά.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

scor
Δημοσιεύσεις: 82
Εγγραφή: 19 Ιουν 2010 02:10

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από scor » 20 Δεκ 2010 15:59

ευχαριστώ πολύ ...

πιάνω δουλειά να το φτιάξω ...

και επανέρχομαι όταν θα έχω πρόβλημα ή πλήρη επιτυχία ..

:)

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από vassilism » 21 Δεκ 2010 00:15

Α ρε πατρίδα καλιτέχνη, μάγεψες πάλι :clap:

scor
Δημοσιεύσεις: 82
Εγγραφή: 19 Ιουν 2010 02:10

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από scor » 21 Δεκ 2010 12:47

Μπορώ να υποκλιθώ στην μαγεία που ονομάζεται fafos :respect: :respect:

όλα δούλεψαν άψογα... :clap: :clap:

nikdim
Δημοσιεύσεις: 41
Εγγραφή: 14 Ιούλ 2010 18:14

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από nikdim » 19 Φεβ 2011 18:22

Πραγματικά πολύ καλό

scor
Δημοσιεύσεις: 82
Εγγραφή: 19 Ιουν 2010 02:10

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από scor » 21 Φεβ 2011 15:26

θέλω σε αυτή τη φόρμα τώρα όπως είναι να της προσθέσω να κάνει check μόνο όταν πατήσω ένα button με id=check..

και όχι όταν βγαίνω από το textbox..

δοκίμασα και άλλαξα το

Κώδικας: Επιλογή όλων

$&#40;"#Code"&#41;.submit&#40;function&#40;&#41; 
   &#123; 

      $&#40;"#msgbox"&#41;.removeClass&#40;&#41;.addClass&#40;'messagebox'&#41;.text&#40;'Γίνεται έλεγχος...'&#41;.fadeIn&#40;1000&#41;;  
όπου code το id του πεδίου που κάνει έλεγχο στη βάση..

έχω κοιτάξει εδώ
http://api.jquery.com/submit/
αλλά έχω μπερδευτεί λιγάκι. καθώς εδώ το submit το κάνει με το id της φόρμας στο function και αν εγώ αλλάξω και ακολουθήσω το παράδειγμα από κάτω ναι μεν θα κάνει submit αλλά δεν θα μου κάνει check στη βάση..

πως πρέπει να το στήσω ; πρέπει να φτιάξω άλλο function ή απλά να τροποποιήσω αυτό που έχουμε. :-?
: - )

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από fafos » 21 Φεβ 2011 16:13

opou #Code to id ths formas... oxi tou pediou.. meta kaneis enan elegxo poio pedio exei symplhrothei kai zhtas na trexei ta dedomena...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

scor
Δημοσιεύσεις: 82
Εγγραφή: 19 Ιουν 2010 02:10

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από scor » 21 Φεβ 2011 16:38

ναι το έχω δοκιμάσει έτσι όπως το λες και πάλι δε μου δούλεψε (με το id της φόρμας)..

πρέπει τον έλεγχο να τον τρέξω μέσα στο fuction submit ;

επίσης αυτό που έχεις δημιουργήσει με το blur πρέπει να το αφήσω ;

(έχω δοκιμάσει διάφορους συνδυασμούς χωρίς αποτέλεσμα μέχρι στιγμής..)
: - )

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από fafos » 21 Φεβ 2011 16:51

scor έγραψε:ναι το έχω δοκιμάσει έτσι όπως το λες και πάλι δε μου δούλεψε (με το id της φόρμας)..

πρέπει τον έλεγχο να τον τρέξω μέσα στο fuction submit ;

επίσης αυτό που έχεις δημιουργήσει με το blur πρέπει να το αφήσω ;

(έχω δοκιμάσει διάφορους συνδυασμούς χωρίς αποτέλεσμα μέχρι στιγμής..)
ta blur feugoun kai feiaxneis mia synthikh opou zhtas an to pedio name exei value na psaxnei sto onomateponymo, an to pedio phone exei value na psaxnei sto thlefono..

h filosofia tou script pantos den einai gia submit.. exo dosei kapou allou ena vohthima gia energeies me to submit..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

scor
Δημοσιεύσεις: 82
Εγγραφή: 19 Ιουν 2010 02:10

αυτόματη συμπλήρωση φόρμας

Δημοσίευση από scor » 22 Φεβ 2011 08:25

ναί από κάποιο σημείο και μετά το κατάλαβα ότι το συγκεκριμένο script είναι στημένο να λειτουργεί με blur..

και για το submit πρέπει να στηθεί από την αρχή..
θα κάνω ένα search εδώ στο forum για να βρώ το βοήθημα που λες..

ευχαριστώ
: - )

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες