caricare dati all'interno di un tag div html

[pepi]

Ciao,
ho realizzato una pagina web in html5 che contiene il seguente form per la raccolta dei dati:

<form action="http://localhost/uptest/modulo.php" method="post">
		<div id="inputazienda">
		  
		    <span id="sprytextfield1">
		      <label for="azienda">AZIENDA</label>
              <input type="text" name="azienda" id="azienda">
            <span class="textfieldRequiredMsg">Inserire un valore.</span></span>
	      
      </div>
      
    <div id="inputindirizzo">
        
          <span id="sprytextfield3">
            <label for="indirizzo">INDIRIZZO COMPLETO</label>
            <input type="text" name="indirizzo" id="indirizzo">
            <span class="textfieldRequiredMsg">Inserire un valore.</span></span>
        
      </div>
    <div id="inputref">
       
          <span id="sprytextfield2">
            <label for="referente">CONTATTO</label>
            <input type="text" name="referente" id="referente">
            <span class="textfieldRequiredMsg">Inserire un valore.</span></span>
        
      </div>
      <div id="inputemail">
        
          <span id="sprytextfield4">
          <label for="email">E-MAIL CONTATTO</label>
          <input type="text" name="email" id="email">
          <span class="textfieldRequiredMsg">Inserire un valore.</span><span class="textfieldInvalidFormatMsg">Non valido.</span></span>
        
      </div>
      <div id="inputtel">
        
          <span id="sprytextfield5">
          <label for="tel">TELEFONO CONTATTO</label>
          <input type="text" name="tel" id="tel">
          <span class="textfieldRequiredMsg">Inserire un valore.</span><span class="textfieldInvalidFormatMsg">Non valido.</span></span>
        
      </div>
     <div id="inputtipo">
        
          <span id="spryselect1">
            <label for="tipologia">EVENTO DA REALIZZARE</label>
            <select name="tipologia" size="" id="tipologia">
            <option value="" selected label="">
            <option value="PROMOZIONE c/o PUNTO VENDITA" label="PROMOZIONE c/o PUNTO VENDITA">
            <option value="PROMOZIONE c/o STAND FIERISTICO" label="PROMOZIONE c/o STAND FIERISTICO">
            <option value="CONGRESSO" label="CONGRESSO">
            <option value="FESTA AZIENDALE" label="FESTA AZIENDALE">
            </select>
            <span class="selectRequiredMsg">Selezionare una voce.</span></span>
        
      </div>
      <div id="inputlocation">
        
          <span id="sprytextfield6">
            <label for="location">LOCALITA' EVENTO</label>
            <input type="text" name="location" id="location">
            <span class="textfieldRequiredMsg">Inserire un valore.</span></span>
        
      </div>
      <div id="inputmese">

   	      <span id="spryselect2">
   	        <label for="mese">DATA EVENTO</label>
        	    <select name="mese" id="mese">
                <option value="" selected label="">
            <option value="GENNAIO" label="GENNAIO">
            <option value="FEBBRAIO" label="FEBBRAIO">
            <option value="MARZO" label="MARZO">
            <option value="APRILE" label="APRILE">
            <option value="MAGGIO" label="MAGGIO">
            <option value="GIUGNO" label="GIUGNO">
            <option value="LUGLIO" label="LUGLIO">
            <option value="AGOSTO" label="AGOSTO">
            <option value="SETTEMBRE" label="SETTEMBRE">
            <option value="OTTOBRE" label="OTTOBRE">
            <option value="NOVEMBRE" label="NOVEMBRE">
            <option value="DICEMBRE" label="DICEMBRE">
      	      </select>
   	    <span class="selectRequiredMsg">Selezionare una voce.</span></span>
      
     </div>
      <div id="inputanno">
        
          <span id="spryradio1">
            <label>
              <input type="radio" name="anno" value="2010" id="anno1_0">
              2010</label>
            <br>
            <label>
              <input type="radio" name="anno" value="2011" id="anno1_1">
              2011</label>
            <br>
            <span class="radioRequiredMsg">Effettuate una selezione.</span></span>
        
      </div>
    <div id="inputinvio">
<input name="invio" type="submit" id="invio" value="INVIA!">

    </div>
    </form>
    <div id="messaggio"> </div>

Attraverso il seguente php:

<html>
<body>

<?php
$con=mysqli_connect("localhost","root","root","upmodulo");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$tua_azienda=$_POST['azienda'];
$tuo_indirizzo=$_POST['indirizzo'];
$tuo_ref=$_POST['referente'];
$tua_mail=$_POST['email'];
$tuo_telefono=$_POST['tel'];
$evento=$_POST['tipologia'];
$tua_location=$_POST['location'];
$data_mese=$_POST['mese'];
$data_anno=$_POST['anno'];

$inviamodulo = "INSERT INTO updata (azienda, indirizzo, referente, email, tel, tipologia, location, mese, anno) VALUES ('$tua_azienda', '$tuo_indirizzo', '$tuo_ref', '$tua_mail', '$tuo_telefono', '$evento', '$tua_location', '$data_mese', '$data_anno')" or die ('Errore...'); 

if (!mysqli_query($con,$inviamodulo))
  {
  die('dati non inviati' . mysqli_error($con));
  }

else 

echo "Grazie " . $_POST["azienda"] .",";
echo "<br>ti contatteremo al pi&ugrave; presto!";


mysqli_close($con);
?>

</body>
</html>

mi collego alla tabella Mysql e inserisco i dati.
Tutto ok, ma la domanda è:
è possibile, e come, caricare il risultato di "echo" direttamente all'interno del <div id="messaggio"> </div> della pagina html invece che nella canonica pagina php?

Spero di essere stata chiara.... grazie!

 

[criric]

Ciao,
puoi rinominare l'setensione della pagina html in php e inserire il codice php nel div messaggio
la action del form dovra richiamare la stessa pagina
oppure usi ajax

 

[borgo italia]

ciao
un'osservazione: non inserire così brutalmente i dati nel db, potresti avere delle brutte sorprese

 

[pepi]

Grazie Criric, in realtà volevo evitare la trasformazione in php anche perchè volevo mantenere tutte le formattazioni, i css, le preimpostazioni (calcola che sto lavorando su Dreamweaver CS6 e le griglie a layout fluidi....)
Quindi, non c'è alcun modo di farlo mantenendo l'html?
(preciso che non lo conosco ajax....)

Grazie Borgo Italia, cosa intendi con "non inserire così brutalmente i dati nel db, potresti avere delle brutte sorprese" ?

 

[Jonn]

Ma infatti questa dubbia "trasformazione in php" non cambia niente sulla funzionalità della pagina, tutto il codice html rimane esattamente così com'è, uguale per il css che esegue il suo lavoro al meglio ed allo stesso modo.

Cambia solo che usando un file php invece che html o altri, il server (l'host, boh chiamalo come ti pare) tratta questo file come tale, quindi invece di restituirlo direttamente al browser, lo scansiona (diciamo così) alla ricerca di istruzioni php per eseguirle, ma se c'è solo codice HTML (HTML 5 nel tuo caso) lo rimanda direttamente al browser così com'è.

Cambia dal momento in cui inserisci istruzioni php, ma questa è un'altra storia, e se le inserisci significa che già sai a cosa servono.
Ciao

 

[pepi]

Grazie a tutti.
Effettivamente l'opzione trasformazione in php è la più funzionale e non crea problemi di formattazione.

 

[borgo italia]

ciao
rispondo solo ora alla tua domanda "sulle brutte sorprese" con un esempio.
mettiamo che l'azienda si chiami "L'ASTRAGALO" quell'insignificantre apostrofo ti manda in pallino la tabella, ben che vada nel campo "azienda" trovi solamente L perchè mysql interpreta quell'apostrofo come fine stringa.
quindi come minimo

$tua_azienda=addslshes($_POST['azienda']);

senza contare tutti gli altri che se non fai appositi controlli possono essere, come minimo, vuoti o contenere qualsivoglia porcheria

 

[Jonn]

Trovo molto interessante l'osservazione di borgo italia, che però metterei in secondo piano rispetto a:
- Creare il database.
- Controllare che i dati vengano inviati correttamente.

I farei così, creato il database, controllo che il codice PHP esegua tutte le operazioni in modo corretto (inserire dati, inserire dati alfanumerici correttamente), subito dopo creerei i controlli come ha detto borgo italia per prevenire che l'eventuale inserimento di caratteri speciali possa sflippare il dati dentro le tabelle.
Interessante come discussione

 

[pepi]

Ciao, anteponendo ai diversi parametri mysql_real_escape_string() nel php sembra che mysql non abbia più problemi ad accettare caratteri "particolari".

Quello che mi domando, a questo punto, è se sia possibile evitare che qualcuno "riempia" i campi testo del form inserendo solo uno spazio vuoto invece che dei caratteri.
Vorrei che anche in questo caso, così come capita se lasciato il campo vuoto, apparisse all'utente un messaggio di errore prima che il modulo venga inviato.

Tenete presente che sto usando Campi di testo convalida Spry in Dreamweaver; dove devo intervenire per aggiungere questo particolare caso?
Sempre che si possa intervenire in tal senso...

Grazie ancora!

 

[Jonn]

L'unica cosa che so dirti adesso è che nelle input (anche se vedo che ne hai poche perchè maggiormente sono caselle di selezione) si può inserire il testo dentro la casellina che poi quando uno clicca con il mouse quest'ultimo sparisce per scriverci dentro, ed in caso la casella venga svuotata, viene mostrato nuovamente il testo (lo so perchè lo provavo per la form contatti del mio sito).
Penso che almeno per le input puoi usare quello ci scrivi qualcosa tipo:

- Campo Obbligatorio

E chi legge se non è scemo capisce... XD

 

[borgo italia]

ciao
qualsiasi controllo lato client, più o meno facilmente, è bypassabile.
per essere sicuro devi fare controlli lato server con php
es.

<?php
$nome=addslashes(trim($_POST['nome']));
if($nome==""){
	echo "non hai inserito il nome";
}
//.......
?>

 

[pepi]

Grazie Jonn, in realtà, se il campo viene lasciato vuoto, senza interazione alcuna o viene saltato con la tabulazione, il messaggio di errore "Campo obbligatorio" appare già e funziona.

L'unico problema si pone con lo spazio, perchè se al posto di digitare del testo viene cliccato solo il tasto spazio per il sistema è come se l'utente avesse compilato il campo.
Poi, è vero che sarebbe stupido non inserire dati che servono a farsi ricontattare, però, non c'è limite all'assurdità.....

E' vero che il vedere già la scritta "Campo obbligatorio" all'interno del campo limiterebbe ancor di più la possibilità che l'utente non scriva nulla, però, se ci fosse un metodo scientifico per impedirlo, sarebbe meglio..

 

[pepi]

Grazie borgo italia, non avevo visto la tua risposta.
Quindi, lato client non c'è soluzione al problema "tasto spazio".. ?

 

[Fez Vrasta]

Puoi fare un controllo con un pattern regex.

Ma tutti i controlli lato client andrebbero anche ricontrollati lato server, come già spiegato precedentemente.

 

[Jonn]

ciao
qualsiasi controllo lato client, più o meno facilmente, è bypassabile.
per essere sicuro devi fare controlli lato server con php
es.

<?php
$nome=addslashes(trim($_POST['nome']));
if($nome==""){
	echo "non hai inserito il nome";
}
//.......
?>

Secondo me questa soluzione di borgo italia è perfetta.

Per quanto riguarda il controllo sui simboli, dovresti trovare il modo di farli interpretare da php come unicode o con la codifica che usi dove vuoi rileggere le variabili in modo che nel database però vengano salvati in modo da non essere interpretati come codice SQL ma come campo di record.

Ora non so bene come funzionano i controlli per le SQL Injection perchè come ho detto in altri post, non ho mai avuto bisogno di un database (anche se mi piacerebbe per un discorso didattico).

La cosa più noiosa è appunto gestire i malintenzionati, nel senso che io potrei aprire la tua form e compilarla a ripetizione con spazi vuoti creandoti nel database una miriade di records inutili.

 

[Fez Vrasta]

http://jsfiddle.net/RBtSF/

una cosa così?