cerco esempio form dopo form

luigi777 · 20 Ott 2014

salve è possibile fare un form che dal primo vada al secondo?
se si , mi potete fare un esempio piccolo?

Dovrei recuperare la variabile upload_image_url, e portarmela nel secondo form.

mi dite come fare?

grazie mille e buona serata.

MarcoGrazia · 20 Ott 2014

Sulla stessa pagina?
Ma che devi realizzare?

luigi777 · 21 Ott 2014

si, perché vorrei fare un upload per le 'immagini e poi al secondo step inserire il testo e il titolo e dopo vanno inserirti al database.

hai un'esempio ?

spiego meglio:

1) Upload immagine che carico (FORM 1)
2) Inserisco titolo, descrizione, stato di pubblicazione (FORM 2) + query al database.

secondo te è fattibile ?

grazie mille.

MarcoGrazia · 22 Ott 2014

L'upload se ho capito bene avviene nel filesystem e non ne database, la cosa migliore che puoi fare è spezzare la cosa in in due file, uno presente il form di inserimento, e l'altro carica l'immagine.
Il trucco è usare un iframe, ti spiego

Nella pagina col form...

HTML:

<form id="file_upload_form" method="post" action="upload_file.php" enctype="multipart/form-data">
  <fieldset><legend>&nbsp;Inserisci i dati come richiesto&nbsp;</legend>
    <p>
      <label for="immagine">Immagine </label>
      <input type="file" id="immagine" name="upfile" value="">&nbsp;
      <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
    </p>
    <iframe id="upload_target" name="upload_target"></iframe>
    <p><input type="submit" name="invia" value="INVIA"></p>
    <script>
      function init() {
        document.getElementById('file_upload_form').onsubmit=function() {
          document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
        }
      }
      window.onload=init;
    </script>
  </fieldset>
</form>

Questo form manda ad un altro file che fa tutto il lavoro sporco l'immagine da salvare ( vedi tu se su filesystem o su database, io preferirei usare solo quest'ultimo ).
Il form lavora così: in action c'è il file di destinazione, ma lo script che vedi in fondo redireziona l'output nell'iframe, in pratica quando premi invio invece di finire su un'altra pagina, il browser rimane lì dove sta e tutti i messaggi finiscono nell'iframe.
Questo come vedi carica solamente l'immagine, ma tu mettici pure gli elementi di input per il Titolo, una didascalia, quello che vuoi e prima di inviare il tutto fagli fare un controllo preventivo per evitare che qualcuno invii al database immagini senza titolo o titoli senza immagini

Ovviamente nel file remoto ci infili tutta la procedura di verifica remota, perché è meglio non fidarsi deli utenti, quindi se qualcuno invia campi obbligatori in bianco, tu mandi un messaggio di attenzione, che appare nell'iframe, mentre la pagina non efettuando un refresh rimane ferma così com'è.
Questo è il sistema di caricamento più usato perché non usa ajax, è veloce e similmente ad ajax la pagina sembra modificarsi dinamicamente, anche se c'è il trucco.
Insomma buono studio

Ah dimenticavo, se vuoi far apparire l'immagine appena caricata, la fai caricare nell'iframe.

luigi777 · 24 Ott 2014

ok, va bene ora provo il sistema..

ma tanto è solo per il mio sito ed nella parte che amministro ci entro solo io..
ti ringrazio molto e buona serata.

luigi777 · 24 Ott 2014

quasi riuscito.. ve lo posto..

ora ho fatto piccolo esempio preso da tutorial.. etc....

la cosa funziona.. il termine in inglese è: Multipage Form

PHP:

<?php
if(isset($_POST["submit"]))
{
	
	move_uploaded_file($_FILES['upload_file']['tmp_name'], "photo/".$_FILES['upload_file']['name']."");
	$message ="".$_POST["textImage"]."";
	$message .="".$_FILES['upload_file']['name']."";
	
	echo $message;
}
?>
<!DOCTYPE html>
<head>
<title>Multipage Form</title>
<style>
ul {list-style-type:none;}

/* CSS Progress Bar */
.meter { 
	width:235px;
	height: 20px;
	position: relative;
	background: #555;
	border:solid 2px #000;
}
.meter > span {
	padding-left: 5px;
	display: block;
	height: 100%;
	background-color: rgb(43,194,83);
	position: relative;
	overflow: hidden;
}
</style>

<!--Pages function-->
	    <script type=text/javascript>
		function collapseElement(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = 'none';
		}
		function expandElement(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = '';
		}
		function collapsePages()
		{
			var numFormPages = 3;
			for(i=2; i <= numFormPages; i++)
			{
				currPageId = ('page_' + i);
				collapseElement(currPageId);
			}
		}
		</script>
</head>

<body onLoad="collapsePages()">
<div id="mainForm">
<form method="post" enctype="multipart/form-data" action="step.php" onSubmit="return">
<!--Page 1-->
<ul id="page_1">
    <li>
        <h2>Immagine</h2>
        <label for="image">Upload:</label><input type="file" name="upload_file"/>
    </li>
    <li>
<input type="button"  onClick="collapseElement('page_1'); expandElement('page_2');" value="Continue"/>	
    </li>
    <div class="meter"><span style="width: 33%">1/3</span></div>
</ul>

<!--Page 2-->
<ul id="page_2">
    <li>
		<h2>Descrizione:</h2>
		<textarea cols="10" rows="10" name="textImage"></textarea>
    </li>
    <li>
	<input type="button" onClick="collapseElement('page_2'); expandElement('page_3');" value="Continue"/>	
	<input type="button" onClick="collapseElement('page_2'); expandElement('page_1');" value="Back"/>	
    </li>
    <div class="meter"><span style="width: 66%">2/3</span></div>
</ul>

<!--Page 3-->
<ul id="page_3">
    <li>
        <h2>Caricare?</h2>
    </li>
    <li>
    <input type="submit" value="Submit" name="submit">
    <input type="button" onClick="collapseElement('page_3'); expandElement('page_2');" value="Back"/>	
    </li>
    <div class="meter"><span style="width: 98%">3/3</span></div>
</ul>
</form>
</div>
</body>
</html>

ora vedo come fare..

grazie mille.

Cerca

Cerca

cerco esempio form dopo form

luigi777

Utente Attivo

MarcoGrazia

Utente Attivo

luigi777

Utente Attivo

MarcoGrazia

Utente Attivo

luigi777

Utente Attivo

luigi777

Utente Attivo

Discussioni simili