[JQUERY] Problema invio valori da form

**makno** · 10-02-2011, 17:33

Ciao a tutti, ho un problema con l'invio di un form con ajax.
In pratica il form contiene input e select, ma uno di questi è richiamato con jquery (funzione click su div che popola un altro div col risultato di un file php. Questo per selezionare i mittenti).
Es:

codice:

<html>
<form>
<div id="comuni"></div>
<div id="regione"></div>
<div id="mittenti"></div>
</form>
</html>

codice:

<script>
$("div#comuni").click(function( ){
var PR = "comuni";
$.ajax({
method:"POST", url:"refresh_select.php", data:"PR="+PR,
complete: function(data){
$('div#mittenti').load("refresh_select.php?PR=comuni").fadeIn(400);
}
}); return false; }); 

$("div#regione").click(function( ){
var PR = "regione";
$.ajax({
method:"POST", url:"refresh_select.php", data:"PR="+PR,
complete: function(data){
$('div#mittenti').load("refresh_select.php?PR=regione").fadeIn(400);
}
}); return false; }); 
</script>

Il punto è questo: quando clicco sull'invio del form, in POST arrivano tutti i valori dei campi preesistenti nel form, tranne quelli popolati tramite jquery.
Le select mittenti non passano valori al file php.
Ho notato poi una cosa strana: quando visualizzo, su firefox, la porzione di sorgente che mi interessa, trovo il form chiuso e le input e select tutte fuori, comprese quelle NON richiamate da jquery.
Avete dei consigli?
Grazie mille per l'attenzione.

**Vindav** · 10-02-2011, 18:27

Mi sa che hai le idee un po' confuse , effettui due chiamata ajax nella stessa funzione... ti consiglio di andare a riguardati come funziona il metodo load di jquery. Se devi popolare il div ti basta fare cosi:

codice:

<script>
$("div#comuni").click(function( ){
$('div#mittenti').load("refresh_select.php?PR=comuni").fadeIn(400);
});

$("div#regione").click(function( ){
$('div#mittenti').load("refresh_select.php?PR=regione").fadeIn(400);
});
</script>

**makno** · 10-02-2011, 19:05

Originariamente inviato da Vindav
Mi sa che hai le idee un po' confuse , effettui due chiamata ajax nella stessa funzione... ti consiglio di andare a riguardati come funziona il metodo load di jquery. Se devi popolare il div ti basta fare cosi:

codice:

<script>
$("div#comuni").click(function( ){
$('div#mittenti').load("refresh_select.php?PR=comuni").fadeIn(400);
});

$("div#regione").click(function( ){
$('div#mittenti').load("refresh_select.php?PR=regione").fadeIn(400);
});
</script>

Devo dire che questa me la sono cercata.
In effetti il codice che ho incollato era soltanto un tentativo, logicamente errato, fatto soltanto dopo aver provato correttamente con un dataresult.
Perdona questa leggerezza e se puoi aiutami a capire perchè quel select non invia il suo valore al file php.
Ciao!

**Vindav** · 11-02-2011, 10:02

metti il codice html completo (select e input box di cui parli nel primo post) altrimenti viene difficile aiutarti

**makno** · 11-02-2011, 11:27

Ok, ecco l'html, un po' confusionario ma dovrebbe rendere l'idea.
E' semplicemente un form con input e select delle quali quelle che riguardano il mittente sono richiamate dal .load di jquery e vanno a popolare il div "mittenti".
Quando clicco sull'invio, il form passa al file php tutti i valori degli input e select, tranne quelli precedentemente richiamati con .load.

codice:

<form action="cerca.php?page=1&PR=2" method="post" name="cerca" enctype="multipart/form-data">
 <tr>
<td>
<span class="utitle">DATA</span>
</td>
<td></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<select name="mese_prot" id="mese_prot" class="input">
<option value="" selected="selected"></option>
<option value="Gennaio">Gennaio</option>
<option value="Febbraio">Febbraio</option>
//[et cetera...]
</select>
</td>
<td width="85%">
<select name="anno_prot" id="anno_prot" class="input">
<option value="" selected="selected"></option>
<option value="2011">2011</option>
<option value="2010">2010</option>
//[et cetera...]
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background:#CCC;">
<td colspan="3"></td>
</tr>
<tr style="background:#CCC;">
<td height="20">
        	<span class="utitle">OGGETTO</span>
        </td>
        <td></td>
        <td>
        	<input type="text" name="ogg_prot" id="ogg_prot" class="input">
            <span class="utitle">INSERIRE UN SOLO TERMINE</span>
        </td>
    </tr>
    <tr style="background:#CCC;">
    	<td colspan="3" valign="top"></td>
    </tr>
    <tr style="background:#CCC;">
    	<td height="20">
        	<span class="utitle">MITTENTE</span>
        </td>
        <td></td>
        <td>
        <div style="overflow:hidden;">
        <div class="prova" id="tutto" style="float:left; border:1px dashed #000; padding:5px; background: #EC7D81; margin-right:5px;"><label>TUTTO</label></div>
		<div id="regione" style="float:left; border:1px dashed #000; padding:5px; background:#9AD6B1; margin-right:5px;"><label>REGIONE</label></div>
		<div id="comuni" style="float:left; border:1px dashed #000; padding:5px; background: #9FCBD0; margin-right:5px;"><label>COMUNI</label></div> 
		</div>
        <div id="mittenti" style="display:none; margin-top:5px;"></div>               
		   
        </td>
    </tr>
    <tr style="background:#CCC;">
    	<td colspan="3"></td>
    </tr>
    <tr style="background:#CCC;">
    	<td></td>
        <td></td>
        <td><input name="cerca" id="cerca" type="submit" class="box" value="CERCA" /></td>
    </tr>
</form>

**makno** · 14-02-2011, 13:22

Scusate, provo a semplificare il quesito o almeno renderlo più intellegibile.
Ho questa situazione: un form pieno di input che trasmette i valori di questi ad un file php che li elabora e restituisce un elenco di records.

Tutto bene fino a quando, tramite uno script jquery, cerco di popolare una select presente nel form.

Risultato: la select si popola ma il suo valore non viene inviato (unico tra i campi input) al file php di cui sopra.

Agli occhi di un semi profano parrebbe come se la select popolata attraverso la funzione jquery rimanesse ad un livello "altro" rispetto al resto del form. Il form NON VEDE la select popolata tramite jquery e non ne invia il valore al file php.

Magari è un quesito banale, ma non so proprio come rimediare.

**makno** · 15-02-2011, 15:13

Proprio nessuno che mi aiuti?

Credo che il problema riguardi il DOM. Il form viene caricato all'inizio, mentre la selct richiamata da jquery viene caricata dopo e innestata nel forum. Ecco, pare che all'invio il form veda i valori di tutti gli input e i selct originari, mentre salta quello caricato con jquery.
il comando .serialize() sul form restituisce i valori di tutti gli input tranne quello caricato con jquery.
Esiste un modo per gestire questa situazione?

**Vindav** · 15-02-2011, 18:55

finalmente sono riuscito a provare il tuo codice... nessun errore funziona tutto bene la select si popola correttamente e il form la vede e ne invia il valore... ho provato anche a stampare il risultato della funzione serialize() di jquery e anche qui la select importata c'è...

Credo che il problema sia il codice che importi dalla pagina php... deve avere qualche errore di sintassi...

Fai questa prova... creati una pagina html con scritto questo:

prova.html

codice:

<select name="prova">
<option value="prova">prova</option>
</select>

Nel javascript mettici questo:

codice:

<script>
$(document).ready(function() {

   $('#formCerca').submit(function() {
          alert($(this).attr("prova").value);
	  alert($(this).serialize());
	  return false;
   });


   $("div#comuni").click(function( ){
         $('div#mittenti').load("prova.html");
   });

});
</script>

ricordati anche di aggiungere l'id al form

codice:

<form action="cerca.php?page=1&PR=2" method="post" name="cerca" id="formCerca" enctype="multipart/form-data">

Discussione: [JQUERY] Problema invio valori da form

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY] Problema invio valori da form

semplificazione quesito

Permessi di invio