πως να κάνω submit πολλές φόρμες με ένα button

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

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

Απάντηση
invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 21 Ιαν 2011 19:25

Γειά σας, έχω μια html σελίδα και έχω μέσα 4 φόρμες και ένα κουμπί.

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

<form id="test1" onsubmit="return Validate1&#40;&#41;;"></form>
<form id="test2" onsubmit="return Validate2&#40;&#41;;"></form>
<form id="test3" onsubmit="return Validate3&#40;&#41;;"></form>
<form id="test4"></form>

<INPUT TYPE="button" value="Submit All">
θέλω όταν πατάω στο κουμπί να γίνονται submit οι 3 φόρμες. Βρήκα το εξής :

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

<HTML>
<HEAD>
<TITLE>Submit Multiple Forms</TITLE>
<style>form&#123;height&#58;25px;&#125;</style>
<SCRIPT LANGUAGE="JavaScript">
/* Collect all forms passed by array and post it */
function submitFormsById&#40;arFormsSubmit&#41;
&#123;
var formCollector = document.createElement&#40;"form"&#41;;
with&#40;formCollector&#41;
&#123;
method = "post";
action = "test.asp";
name = "formCollector";
id = "formCollector";
style.display = "none";
&#125;

for&#40;var ix = 0; ix<arFormsSubmit.length;ix++&#41;
appendFormVals2Form&#40;document.getElementById&#40;arFormsSubmit&#91;ix&#93;&#41;, formCollector&#41;;

document.body.appendChild&#40;formCollector&#41;;
formCollector.submit&#40;&#41;;
&#125;

/* Collect all forms in document to one and post it */
function submitAllDocumentForms&#40;&#41; &#123;
var arrDocForms = document.getElementsByTagName&#40;'form'&#41;;
var formCollector = document.createElement&#40;"form"&#41;;
with&#40;formCollector&#41;
&#123;
method = "post";
action = "test.asp";
name = "formCollector";
id = "formCollector";
&#125;

for&#40;var ix=0;ix<arrDocForms.length;ix++&#41; &#123;
appendFormVals2Form&#40;arrDocForms&#91;ix&#93;, formCollector&#41;;
&#125;

document.body.appendChild&#40;formCollector&#41;;
formCollector.submit&#40;&#41;;

&#125;

/* Function&#58; add all elements from ``frmCollectFrom// and append them to ``frmCollector// before returning ``frmCollector//*/
function appendFormVals2Form&#40;frmCollectFrom, frmCollector&#41; &#123;
var frm = frmCollectFrom.elements;
for&#40;var ix = 0 ; ix < frm.length ; ix++&#41;
frmCollector.appendChild&#40;frm&#91;ix&#93;&#41;;
return frmCollector;
&#125;

</SCRIPT>
</HEAD>

<BODY>

FORM1&#58;
<FORM METHOD=POST ACTION="test.asp" NAME="form1" id="form1">
<INPUT TYPE="text" NAME="box1" size="20" value="BOX1_value">
</FORM>
FORM2&#58;
<FORM METHOD=POST ACTION="test.asp" NAME="form2" id="form2">
<INPUT TYPE="text" NAME="box2" size="20" value="BOX2_value">
</FORM>

<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitFormsById&#40;Array&#40;'form1','form2'&#41;&#41;">

</BODY>
</HTML>
αλλά δεν φαίνεται να δουλεύει...

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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 21 Ιαν 2011 19:42

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

<script>
function submitAll&#40;&#41;&#123;
for&#40;var i=1; i<=3; i++&#41;&#123;
document.getElementById&#40;'test'+i&#41;.submit&#40;&#41;;
&#125;
&#125;
</script>

<form id="test1" onsubmit="return Validate1&#40;&#41;;"></form>
<form id="test2" onsubmit="return Validate2&#40;&#41;;"></form>
<form id="test3" onsubmit="return Validate3&#40;&#41;;"></form>
<form id="test4"></form>

<INPUT TYPE="button" value="Submit All" onclick="submitAll&#40;&#41;"> 
Για δοκίμασε έτσι...
Οι φόρμες έτσι άδειες είναι?

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 21 Ιαν 2011 19:51

κάτι παρόμοιο έκανα και γω πρίν αλλά δεν δούλεψε...

αυτό ας πούμε δεν δουλεύει

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

<script type="text/javascript">


function add&#40;&#41;
&#123;

	document.getElementById&#40;'storephoto'&#41;.submit&#40;&#41;;


&#125;
</script>
 <form name="storephoto" id="storephoto" method="post" enctype="multipart/form-data"  action="">
 <?php 
 
 //define a maxim size for the uploaded images in Kb
 define &#40;"MAX_SIZE","1000"&#41;; 

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
 function getExtension&#40;$str&#41; &#123;
         $i = strrpos&#40;$str,"."&#41;;
         if &#40;!$i&#41; &#123; return ""; &#125;
         $l = strlen&#40;$str&#41; - $i;
         $ext = substr&#40;$str,$i+1,$l&#41;;
         return $ext;
 &#125;

//This variable is used as a flag. The value is initialized with 0 &#40;meaning no error  found&#41;  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
 if&#40;isset&#40;$_POST&#91;'addnew'&#93;&#41;&#41; 
 &#123;
 	//reads the name of the file the user submitted for uploading
 	$image=$_FILES&#91;'image'&#93;&#91;'name'&#93;;
 	//if it is not empty
 	if &#40;$image&#41; 
 	&#123;
 	//get the original name of the file from the clients machine
 		$filename = stripslashes&#40;$_FILES&#91;'image'&#93;&#91;'name'&#93;&#41;;
 	//get the extension of the file in a lower case format
  		$extension = getExtension&#40;$filename&#41;;
 		$extension = strtolower&#40;$extension&#41;;
 	//if it is not a known extension, we will suppose it is an error and will not  upload the file,  
	//otherwise we will do more tests
 if &#40;&#40;$extension != "jpg"&#41; && &#40;$extension != "jpeg"&#41;&#41; 
 		&#123;
		//print error message
 			echo '<h4>Μόνο jpg,jpeg φωτογραφίες</h4>';
 			$errors=1;
 		&#125;
 		else
 		&#123;
//get the size of the image in bytes
 //$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93; is the temporary filename of the file
 //in which the uploaded file was stored on the server
 $size=filesize&#40;$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;&#41;;

//compare the size with the maxim size we defined and print error if bigger
if &#40;$size > MAX_SIZE*1024&#41;
&#123;
	echo '<h4>Πολύ μεγάλη φωτογραφία &#40;έως 1ΜΒ&#41;</h4>';
	$errors=1;
&#125;

//we will give an unique name, for example the time in unix time format
$image_name=time&#40;&#41;.'.'.$extension;
//the new name will be containing the full path where will be stored &#40;images folder&#41;
$newname="images/stores/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy&#40;$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;, $newname&#41;;
if &#40;!$copied&#41; 
&#123;
	echo '<h4>Η φωτογραφία δεν ανέβηκε</h4>';
	$errors=1;
&#125;&#125;&#125;&#125;

//If no errors registred, print the success message
 if&#40;isset&#40;$_POST&#91;'addnew'&#93;&#41; && !$errors && $filename&#41; 
 &#123;
 	echo "<h4>Η φωτογραφία ανέβηκε</h4>";
 &#125;

 
 ?>
 <table>
 <tr><td><input type="file" name="image"></td></tr>
 </table>
  </form>    

<INPUT TYPE="button" value="Submit All" onclick="add&#40;&#41;">


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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 21 Ιαν 2011 20:23

Πήρα τον κώδικα τον τελευταίο, πρόσθεσα στο action ένα υποτιθέμενο url και κάνει μια χαρά submit. Τι εννοείς δεν σου δουλεύει?

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 21 Ιαν 2011 21:11

θα έπρεπε να σου κάνει upload μια φωτογραφία , δεν κάνει όμως, εγώ στο action αφήνω "" και η φόρμα απλά αναβοσβήνει χωρίς να ανεβάζει την φώτο

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 22 Ιαν 2011 00:13

Βασικά εκτελεί μόνο το πρώτο

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

document.getElementById&#40;'test'&#41;.submit&#40;&#41;; 
document.getElementById&#40;'test2'&#41;.submit&#40;&#41;; 
document.getElementById&#40;'test3'&#41;.submit&#40;&#41;;
έβαλα ένα textbox σε κάθε φόρμα και απο 1 echo $_POST και αυτό που κατάλαβα είναι ότι εκτελείτε μόνο το πρώτο document.getElementById('test').submit(); αν αλλάξω σειρά θα τρέξει πάλι το πρώτο όποιο και να είναι...

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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 22 Ιαν 2011 09:14

Το submit μιας φόρμας είναι σαν να πατάς ένα link και να πηγαίνεις σε άλλη σελίδα (ή στην ίδια από την αρχή). Όταν "φύγεις" από την σελίδα, πάπαλα η εκτέλεση της js. Λογικό να εκτελείται μόνο η πρώτη. Δεν ξέρω πως θα αντιδράσει αν στα forms δώσεις target="_blank".

Βέβαια ακόμα δεν κατάλαβα γιατί το κάνεις αυτό.
Δεν μπορεί μία φόρμα να έχει όλες τις φωτογραφίες και να ανέβουν με ένα submit?

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 22 Ιαν 2011 16:35

λοιπόν με τα λίγα και τα πολλά κατάφερα να το φτιάξω. έχω τις 3 φόρμες μου όπως είναι παραπάνω και με το javascript κώδικα

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

/* Collect all forms passed by array and post it */
function submitFormsById&#40;arFormsSubmit&#41;
&#123;

var formCollector = document.createElement&#40;"form"&#41;;
with&#40;formCollector&#41;
&#123;
method = "post";
action = "";
name = "formCollector";
id = "formCollector";
style.display = "none";
&#125;

for&#40;var ix = 0; ix<arFormsSubmit.length;ix++&#41;
appendFormVals2Form&#40;document.getElementById&#40;arFormsSubmit&#91;ix&#93;&#41;, formCollector&#41;;

document.body.appendChild&#40;formCollector&#41;;
formCollector.submit&#40;&#41;;
&#125;


/* Function&#58; add all elements from ``frmCollectFrom// and append them to ``frmCollector// before returning ``frmCollector//*/
function appendFormVals2Form&#40;frmCollectFrom, frmCollector&#41; &#123;
var frm = frmCollectFrom.elements;
for&#40;var ix = 0 ; ix < frm.length ; ix++&#41;
frmCollector.appendChild&#40;frm&#91;ix&#93;&#41;;
return frmCollector;
σε συνδιασμό με ένα κουμπί που έχει

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

onClick="submitFormsById&#40;Array&#40;'formname1','formname2','formname3'&#41;&#41;"
κατάφερα να παίρνω αποτέλεσμα σε 3 διαφορετικές φόρμες , δηλαδή το echo &_POST['variable'] μου εμφανίζει αυτό που θέλω. το πρόβλημα είναι αλλού τώρα... στην 3 φόρμα θέλω να κάνω upload μια φωτογραφία στο server. ο κώδικας της φόρμας είναι αυτός

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

 <form name="photo" id="photo" method="post" enctype="multipart/form-data"  action="">

<INPUT TYPE = "hidden" Value = "yes" Name ="upload" id ="upload">

<input type="file" name="image">

  </form>  
και εδώ είναι ο κώδικας που "ανεβάζει" την φωτογραφία τον οποίο τον έχω μέσα σε <?php ?>

στο javascript στην κορυφή του html μετά την γραμμή

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

return frmCollector;

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

//define a maxim size for the uploaded images in Kb
 define &#40;"MAX_SIZE","1000"&#41;; 

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
 function getExtension&#40;$str&#41; &#123;
         $i = strrpos&#40;$str,"."&#41;;
         if &#40;!$i&#41; &#123; return ""; &#125;
         $l = strlen&#40;$str&#41; - $i;
         $ext = substr&#40;$str,$i+1,$l&#41;;
         return $ext;
 &#125;

//This variable is used as a flag. The value is initialized with 0 &#40;meaning no error  found&#41;  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
 if&#40;isset&#40;$_POST&#91;'upload'&#93;&#41;&#41; 
 &#123;
 	//reads the name of the file the user submitted for uploading
 	$image=$_FILES&#91;'image'&#93;&#91;'name'&#93;;
 	//if it is not empty
 	if &#40;$image&#41; 
 	&#123;
 	//get the original name of the file from the clients machine
 		$filename = stripslashes&#40;$_FILES&#91;'image'&#93;&#91;'name'&#93;&#41;;
 	//get the extension of the file in a lower case format
  		$extension = getExtension&#40;$filename&#41;;
 		$extension = strtolower&#40;$extension&#41;;
 	//if it is not a known extension, we will suppose it is an error and will not  upload the file,  
	//otherwise we will do more tests
 if &#40;&#40;$extension != "jpg"&#41; && &#40;$extension != "jpeg"&#41;&#41; 
 		&#123;
		//print error message
 			echo '<h4>Μόνο jpg,jpeg φωτογραφίες</h4>';
 			$errors=1;
 		&#125;
 		else
 		&#123;
//get the size of the image in bytes
 //$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93; is the temporary filename of the file
 //in which the uploaded file was stored on the server
 $size=filesize&#40;$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;&#41;;

//compare the size with the maxim size we defined and print error if bigger
if &#40;$size > MAX_SIZE*1024&#41;
&#123;
	echo '<h4>Πολύ μεγάλη φωτογραφία &#40;έως 1ΜΒ&#41;</h4>';
	$errors=1;
&#125;

//we will give an unique name, for example the time in unix time format
$image_name=time&#40;&#41;.'.'.$extension;
//the new name will be containing the full path where will be stored &#40;images folder&#41;
$newname="images/stores/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy&#40;$_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;, $newname&#41;;
if &#40;!$copied&#41; 
&#123;
	echo '<h4>Η φωτογραφία δεν ανέβηκε</h4>';
	$errors=1;
&#125;&#125;&#125;&#125;

//If no errors registred, print the success message
 if&#40;isset&#40;$_POST&#91;'upload'&#93;&#41; && !$errors && $filename&#41; 
 &#123;
 	echo "<h4>Η φωτογραφία ανέβηκε</h4>";
 &#125;

αλλά δεν δουλεύει, η φωτογραφία δεν ανεβαίνει... το $_POST['upload'] έχει τιμή άρα το isset($_POST['upload']) πρέπει να περνάει τον έλεγχο....

και για να απαντήσω στην ερώτηση σου γιατί το κάνω όλο αυτό, έχω 3 διαφορετικά <div> μέσα στην σελίδα μου και το καθένα έχει απο μια φόρμα μέσα με 1 textbox, σε ένα 4ο <div> έχω το submit button και θέλω να παίρνω τις τιμές απο κάθε φόρμα με ένα κουμπί. ελπίζω να σου έδωσα να καταλάβεις :D

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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 22 Ιαν 2011 16:41

korgr έγραψε: Βέβαια ακόμα δεν κατάλαβα γιατί το κάνεις αυτό.
Δεν μπορεί μία φόρμα να έχει όλες τις φωτογραφίες και να ανέβουν με ένα submit?
:roll:

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 22 Ιαν 2011 17:21

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

δεν τα βάζω σε μία φόρμα γιατί είναι σε διαφορετικά div το κάθε στοιχείο και δεν ξέρω αν είναι σωστό κάτι τέτοιο: (αν αυτό εννοείς σε μια φόρμα)

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

<form>

<div></div>
<div></div>
<div></div>

</form>

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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 22 Ιαν 2011 20:49

Όλα σε μία φόρμα!
Εργασία για σχολή είναι?

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 22 Ιαν 2011 21:28

όχι καμιά σχέση. α ναι έ ; δεν ήξερα αν είναι σωστό έτσι γιατί το dreamweaver μου έβγαζε warnings για unclosed loops κατι τέτοιο. θα το δοκιμάσω.

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

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από korgr » 22 Ιαν 2011 23:00

Μέσα σε ένα tag <form> μπορείς να συμπεριλάβεις οτιδήποτε. Όσα στοιχεία φόρμας βρεθούν εκεί μέσα θα γίνουν submit.

Τα warnings για loops δεν μπορεί να αφορούν την html σου. Μάλλον την php σου.

invader7
Δημοσιεύσεις: 78
Εγγραφή: 24 Ιαν 2009 22:02

πως να κάνω submit πολλές φόρμες με ένα button

Δημοσίευση από invader7 » 23 Ιαν 2011 02:30

σε ευχαριστώ πολύ έβγαλα άκρη με τη βοήθεια σου, τώρα όλα δουλεύουν. :D

Απάντηση

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

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

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