Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

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

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 16 Δεκ 2009 18:01

Σε ένα thread το οποίο είχα δημιουργήσει έψαχνα να βρω κάποιο τρόπο ούτως ώστε να δημιουργώ δυναμικά κάποια textboxes ή comboboxes κλπ. για να μπορώ μετά να εισάγω στη βάση δεδομένων τις εγγραφές. Λύση τότε δεν είχα βρει...

Κάθησα, έψαξα να βρω στο ίντερνετ αλλά εκεί τίποτα..Όσο googling και να έκανα δεν βρήκα κάτι το οποίο θα με βοηθούσε και θα μου έλυνε τα προβλήματα. Δυστυχώς..

Έτσι είπα να ξεκινήσω να φτιάξω κάτι από μόνος μου και το αποτέλεσμα μπορώ να πω ότι με δικαιώνει..

Αρχικά φτιάχνουμε μια φόρμα μέσα στο html ή php αρχείο που επιθυμούμε και μέσα σε αυτό βάζουμε τα εξής:

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

<form id="form1" name="form1" method="post" action="eee.php">
<div id="xa"></div>
<p><input type="button" value="Add" onClick="generateRow&#40;&#41;"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
Σε αυτή τη form έχουμε ένα κουμπάκι που κάνει "Add" εισαγωγή νέων γραμμών για να γράψουμε μέσα σε textboxes ή ό,τι έχουμε επιλέξει και ένα κουμπί που κάνει insert τα rows στη βάση δεδομένων.

Τώρα μέσα στην eee.php έχουμε

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

<?php
$con = mysql_connect&#40;"localhost","root",""&#41;;
if &#40;!$con&#41;
&#123;
die&#40;'Could not connect&#58; ' . mysql_error&#40;&#41;&#41;;
&#125;
mysql_select_db&#40;"pinakas", $con&#41;;

foreach&#40;$_POST&#91;'name'&#93; as $row=>$aa&#41;
&#123;
$name=$aa;
$surname=$_POST&#91;'surname'&#93;&#91;$row&#93;;
$age=$_POST&#91;'age'&#93;&#91;$row&#93;;
&#125;

foreach&#40;$_POST&#91;'name'&#93; as $row=>$aa&#41;
&#123;
    $name = mysql_real_escape_string&#40;$aa&#41;; 
    $surname= mysql_real_escape_string&#40;$_POST&#91;'surname'&#93;&#91;$row&#93;&#41;;
    $age= mysql_real_escape_string&#40;$_POST&#91;'age'&#93;&#91;$row&#93;&#41;;

    $sqlquery= "INSERT INTO testingtable &#40;name, surname, age&#41;
VALUES &#40;'$name','$surname','$age'&#41;";

    mysql_query&#40;$sqlquery&#41;;
&#125;

mysql_close&#40;$con&#41;
?> 

Για το τέλος άφησα το αρχείο javascript το οποίο το τοποθετούμε μέσα στο <head></head> του html ή php αρχείου μας. Το javascript είναι το εξής :

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

function generateRow&#40;&#41; &#123;

var d=document.getElementById&#40;"xa"&#41;;
d.innerHTML+="<p><input name='name&#91;&#93;' type='text' id='name&#91;&#93;' size='15'> <input name='surname&#91;&#93;' type='text' id='surname&#91;&#93;' size='15'> <input name='age&#91;&#93;' type='text' id='age&#91;&#93;' size='15'>";
&#125;
Το μόνο πρόβλημα το οποίο αντιμετωπίζω είναι στον firefox. Στον internet explorer εισάγω δεδομένα στην πρώτη γραμμή και μετά πατάω το κουμπί για προσθήκη και όλα λειτουργούν μια χαρά. Στον firefox, εισάγω δεδομένα και με το που πατάω προσθήκη νέας γραμμής, χάνονται τα προηγούμενα που έχω γράψει.

Εκτός από το συγκεκριμένο πρόβλημα, κατά τη γνώμη μου θα μπορούσε να γίνει ένα βοήθημα το συγκεκριμένο στην περίπτωση που κάποιος ψάχνει να βρει κάτι τέτοιο,οπότε θα μπορέσει να βοηθηθεί..



Μετά και το τέλος των διορθώσεων έχουμε το τελικό αποτέλεσμα...
Το Αρχικό html το οποίο θα έχει και τη φόρμα εισαγωγής στη βάση...

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Καταχώρηση Εγγραφών στη Βάση Δεδομένων</title>

<script>
function generateRow&#40;&#41; &#123;

var d=document.getElementById&#40;"neo"&#41;;
d.innerHTML+="<p><input name=\"name&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"surname&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"age&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" >"; 
&#125;

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="eee.php">
<div id="neo"></div>
<p><input type="button" value="Add" onClick="generateRow&#40;&#41;"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
</body>
</html>
Και τέλος το eee.php το οποίο μας κάνει όλη τη δουλειά για την εισαγωγή των δεδομένων στη βάση...

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

<?php
$con = mysql_connect&#40;"localhost","root",""&#41;;
if &#40;!$con&#41;
&#123;
die&#40;'Could not connect&#58; ' . mysql_error&#40;&#41;&#41;;
&#125;
mysql_select_db&#40;"dokimh", $con&#41;;
foreach&#40;$_POST&#91;'name'&#93; as $row=>$aa&#41;
&#123;
$name=$aa;
$surname=$_POST&#91;'surname'&#93;&#91;$row&#93;;
$age=$_POST&#91;'age'&#93;&#91;$row&#93;;
&#125;
foreach&#40;$_POST&#91;'name'&#93; as $row=>$aa&#41;
&#123;
    $name = mysql_real_escape_string&#40;$aa&#41;;
    $surname= mysql_real_escape_string&#40;$_POST&#91;'surname'&#93;&#91;$row&#93;&#41;;
    $age= mysql_real_escape_string&#40;$_POST&#91;'age'&#93;&#91;$row&#93;&#41;;


    $sqlquery = "INSERT INTO testingtable &#40;name, surname, age&#41;
VALUES &#40;'$name','$surname','$age'&#41;";

    mysql_query&#40;$sqlquery&#41;;
&#125;
header&#40;"Location&#58; pagination.php"&#41;;
mysql_close&#40;$con&#41;;
?> 
Ελπίζω να βοηθήσουμε και άλλους φίλους που θα αναζητήσουν κάτι παρόμοιο!!!

Καλές γιορτές παιδιά!!!!!!!!!!!!!!!!Καλά Χριστούγεννα!!!!!!!!!!!!!!!!!!!!!
Τελευταία επεξεργασία από το μέλος argate7 την 23 Δεκ 2009 00:45, έχει επεξεργασθεί 3 φορές συνολικά.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από korgr » 16 Δεκ 2009 19:47

tip
μελετα λιγο τον κωδικα μου στο
http://www.athensoil.gr/on_line_koinoxrista_3.php

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από dimsis » 16 Δεκ 2009 19:54

Άλλαξε την γραμμή με το d.innerHTML με αυτό:

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

d.innerHTML+="<p><input name=\"name\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"surname\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"age\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" >";
edit: lol Νότης... με έφαγες στην στροφή :)

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 17 Δεκ 2009 14:52

Dimsis, δοκίμασα αυτό που μου είπες,αλλά δεν έπαιξε ούτε και αυτό. Κάθε φορά που πληκτρολογώ πρώτα και μετά κάνω προσθήκη νέας γραμμής όλα χάνονται..και όλα αυτά γίνονται μόνο στον firefox. Στον explorer λειτουργούν όλα άψογα.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από dimsis » 17 Δεκ 2009 15:04

Κάποιο άλλο λάθος κάνεις. Το δοκίμασα και εγώ σε FX και έπαιξε μια χαρά.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 17 Δεκ 2009 17:09

Ναι, δίκιο είχες. Είχα κάνει μια μικρή βλακεία. Τώρα θα πάω να το ρυθμίσω να αποθηκεύει και στη βάση. Εσένα έτσι όπως είναι σου τα αποθηκεύει? Το κάνω όπως ακριβώς έγραψες πιο πάνω, αλλά μου αποθηκεύει μόνο το name. Το surname και το age, τα αφήνει κενό το ένα και 0 το άλλο.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από dimsis » 17 Δεκ 2009 19:45

Εγώ την javascript δοκίμασα μόνο, όχι και post / insert σε βάση.
Συγκεκριμένα το παρακάτω:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function generateRow&#40;&#41; &#123;

var d=document.getElementById&#40;"xa"&#41;;
d.innerHTML+="<p><input name=\"name\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"surname\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"age\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" >";
&#125; 
</script>
</head>


<body>
<form id="form1" name="form1" method="post" action="eee.php">
<div id="xa"></div>
<p><input type="button" value="Add" onClick="generateRow&#40;&#41;"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form> 
</body>
</html>
σώστο σε ένα αρχείο html και δοκίμασε το σε FX και θα δεις ότι κρατάει τις τιμές...

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 17 Δεκ 2009 19:58

Ναι, ναι Δημήτρη, όπως σου είπα και πιο πριν το δοκίμασα και τις κρατάει σωστά. Το πρόβλημα μου είναι πως περνάει την τιμή του 'name' μέσα στη βάση,αλλά δεν περνάει τις υπόλοιπες τιμές.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από dimsis » 17 Δεκ 2009 22:33

Αυτό ψάχνεις:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function generateRow&#40;&#41; &#123;

var d=document.getElementById&#40;"xa"&#41;;
d.innerHTML+="<p><input name=\"image_name&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"image_desc&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" > <input name=\"image_item&#91;&#93;\" type=\"text\" size=\"15\" onblur=\"this.setAttribute&#40;'value', this.value&#41;;\" >";
&#125; 
</script>
</head>
<body>
<form id="form1" name="form1" method="post" >
  <div id="xa"></div>
  <input type="button" value="Add" onClick="generateRow&#40;&#41;"/>
  <label>
    <input type="submit" name="submit" value="submit" />
  </label>
</form>
<?php


$con = mysql_connect&#40;"localhost","root",""&#41;;
if &#40;!$con&#41;
&#123; die&#40;'Could not connect&#58; ' . mysql_error&#40;&#41;&#41;;&#125;

mysql_select_db&#40;"dokimh", $con&#41;;
for&#40; $i=0; $i < count&#40;$_POST&#91;'image_name'&#93;&#41;; $i++&#41;
&#123; 
	$sql = "INSERT INTO gallery &#40;image_name, image_desc, image_item&#41; VALUES &#40;'&#123;$_POST&#91;'image_name'&#93;&#91;$i&#93;&#125;', '&#123;$_POST&#91;'image_desc'&#93;&#91;$i&#93;&#125;', '&#123;$_POST&#91;'image_item'&#93;&#91;$i&#93;&#125;'&#41;"; 
	mysql_query&#40;$sql&#41; or die &#40;"Something went wrong!"&#41;; 
&#125; 
mysql_close&#40;$con&#41;;
?>
</body>
</html>
άλλαξε το όνομα της βάσης από dokimh στη δική σου και τα 3 ονόματα πεδίων στα δικά σου...

Ένα γρήγορο demo: http://www.woot.gr/pg/links_insert/index.php
(σε μια άλλη βάση που είχε και paging) κλικ στο Μαζική καταχώρηση εγγραφών

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 18 Δεκ 2009 00:01

Έπρεπε να βάλω τα []...Το έκανα και δούλεψε!! Μ'άρεσε πολύ το pagination που έχεις.. Μπορείς να δώσεις καμιά συμβουλή? Είδα το css που έχεις αλλά το μόνο που δεν έχω πιάσει το πως συνδέεται με τη βάση.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από dimsis » 18 Δεκ 2009 00:50

Από εδώ είναι το paging: http://www.freestuff.gr/forums/viewtopic.php?&t=46810
Αν δεν βγάλεις άκρη πες μου να ανεβάσω κάπου όλο το πακέτο με τον κώδικα και για το batch insert / paging / edit / database. Have fun.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από argate7 » 18 Δεκ 2009 03:53

Όλα κομπλέ φίλε. Μια χαρά...Thanx και πάλι!!!

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Δημιουργία Νέων Πεδίων με τη βοήθεια της Javascript

Δημοσίευση από cordis » 22 Δεκ 2009 20:20

διόρθωσε και το αρχικό post να είναι όλα ζετ ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

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

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