inviare form json a php

[claudia88]

Scusatemi, sono inesperta di js sto usando questo plugin http://thecodemine.org/ per fare form wizard ma non riesco a capire come si fa ad inviare in php ad una pagina o comunque spedire il form via email o fare un post al db mysql, ottengo una stringa ma non capisco poi come usarla...

<div id="demoWrapper"> <h3>Inviaci le misure del tuo cane</h3> [img]../img/misure_cane/misure_cane_1.png[/img] <h5 id="status"></h5>  <form id="demoForm" method="post" action="ordine.php" class="bbq"> <div id="fieldWrapper"> <div class="step" id="first"> <span class="font_normal_07em_black">Misura la lunghezza</span>
 <label for="firstname">Lunghezza cane</label>
 <input class="input_field_12em" name="lunghezza" id="firstname" />
 </div> <!--<div id="finland" class="step"> <span class="font_normal_07em_black">Step 2 - Personal information</span>
 <label for="day_fi">Social Security Number</label>
 <input class="input_field_25em" name="day" id="day_fi" value="DD" /> <input class="input_field_25em" name="month" id="month_fi" value="MM" /> <input class="input_field_3em" name="year" id="year_fi" value="YYYY" /> - <input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" />
 <label for="countryPrefix_fi">Phone number</label>
 <input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" /> - <input class="input_field_3em" name="areaCode" id="areaCode_fi" /> - <input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" />
 <label for="email">*Email</label>
 <input class="input_field_12em email required" name="myemail" id="myemail" />
 </div>--> <div id="confirmation" class="step"> <span class="font_normal_07em_black">Last step - Username</span>
 <label for="username">User name</label>
 <input class="input_field_12em" name="username" id="username" />
 <label for="password">Password</label>
 <input class="input_field_12em" name="password" id="password" type="password" />
 <label for="retypePassword">Retype password</label>
 <input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" />
 </div> </div> <div id="demoNavigation"> <input class="navigation_button" id="back" value="Back" type="reset" /> <input class="navigation_button" id="next" value="Next" type="submit" /> </div> </form> <p id="data"></p> </div> <?php /*if (isset($_POST["lunghezza"])) { echo 'cicci'; }*/?> <?php /*form con jquery*/ ?> <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>scripts/formwizard/jquery-ui-1.8.2.custom.css" /> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/formwizard/bbq.js"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/formwizard/jquery.form.js"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/formwizard/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/formwizard/jquery-ui-1.8.5.custom.min.js"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/formwizard/jquery.form.wizard.js"></script> <script type="text/javascript"> $(function(){ $("#demoForm").formwizard({ formPluginEnabled: true, historyEnabled : true, validationEnabled: true, focusFirstInput : true, formOptions :{ success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })}, beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));}, //param data è il risultato del form dataType: 'json', resetForm: true } } ); }); </script>

grazie anticipatamente

[cavicchiandrea]

Ma non conosci lo script ne tantomeno js non sai come gestire ouput, la domanta nasce spontanea perché vuoi fare l'inserimento dei dati in quel modo?
Semplificati la vita usa un form d'inserimento dati classico e una pagina tradizionale php che eseguirà l'insert dei dati nel db e spedirà la mail.

[lukezz]

Cosi non si capisce niente ^^
Dovresti postare il codice un pò più ordinato.

[claudia88]

Originariamente inviato da lukezz
Cosi non si capisce niente ^^
Dovresti postare il codice un pò più ordinato.

devo farlo perché è un form in jquery che deve avere la possibilità di guidare l'utente che dovrà mettere i dati step by step... cmq non è tanto complicarmi la vita voglio anche capire come funzionano determinate cose, ho appena iniziato js...

ecco dove è il problema, mi ritorna la stringa sul paragrafo

<p id="data"></p>

che poi non è altro che il json del form appena compilato (data sent to the server: lunghezza=&username=&password=&retypePassword=), ora ho bisogno di prendere i dati inviati con trattamento json e fare un post in php... spero di essermi spiegata

ecco lo script

<script type="text/javascript">
			$(function(){
				$("#demoForm").formwizard({ 
				 	formPluginEnabled: true,
				 	historyEnabled : true,
				 	validationEnabled: true,
				 	focusFirstInput : true,
				 	formOptions :{
						success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
						beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));}, //param data è il risultato del form
						dataType: 'json',
						resetForm: true
				 	}	
				 }
				);
  		});
    </script>

non capisco da qui come mandarlo ad un eventuale pagina php o buttarlo su database mysql... perché fin'ora ottengo solo la stringa in formato testo in json (ottenuta da beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));}, //param data è il risultato del form)

data sent to the server: lunghezza=&username=&password=&retypePassword=

data sent to the server: lunghezza=&username=&password=&retypePassword=

[Vindav]

la documentazione del plugin l'hai letta? ci sarà sicuramente un parametro da inserire dove indichi l'url. Per esempio

formOptions :{
....
url:"url php"
...
}

[claudia88]

Originariamente inviato da Vindav
la documentazione del plugin l'hai letta? ci sarà sicuramente un parametro da inserire dove indichi l'url. Per esempio

formOptions :{
....
url:"url php"
...
}

l'ho letta su http://thecodemine.org/# (la trovi sotto) ma non riesco proprio a capire, non parla di url... ci sto uscendo pazza!

[Vindav]

leggendo un po' la documentazione ho notato che questo plugin include altri plugin(non è il massimo ) quindi dovresti leggerti anche la documentazione dei plugin che include. Uno dei plugin (form plugin, http://jquery.malsup.com/form/#options-object) ha il parametro url.

[claudia88]

Originariamente inviato da Vindav
leggendo un po' la documentazione ho notato che questo plugin include altri plugin(non è il massimo ) quindi dovresti leggerti anche la documentazione dei plugin che include. Uno dei plugin (form plugin, http://jquery.malsup.com/form/#options-object) ha il parametro url.

grazie per gli aiuti, ho cambiato e sono passata a questa http://net.tutsplus.com/tutorials/ja...th-javascript/ che sembra essere molto più intuitiva.
Nell'esempio http://d2o0t5hpnwv4c1.cloudfront.net...I/regForm.html potete vedere i sorgenti, non capisco come prendere la stringa inviata e mandarla ad un db ad esempio o cmq postarla...

grazie nuovamente, spero che qualcuno riesca ad aiutarmi...

[Vindav]

basta che inserisci quel benedetto parametro url e hai risolto, se avessi provato quello che ti ho scritto, la discussione sarebbe già terminata, ora passi ad un altro plugin, di cui dovresti rileggerti tutta la documentazione.
Se non lo hai ancora capito questa è l'unica modifica che devi fare

formOptions :{
....
url:"url php"
...
}

non mi sembra cosi complesso
auguri

[stezxx85]

Dunque, la faccenda è molto più semplice di quanto sembri. Ora nello specifico non sono andato a vedere i plug in che hai usato ma il funzionamento di ajax con jQuery è semplice:

$('.bottone invia').click(function(){

$.ajax({
  type: 'POST', //<-- questo è il tipo di chiamata che si vuole effettuare GET o POST
  url: 'pagina.php', //<-- questa è la pagina php che si occupa di gestire i dati che le inviamo
  data: 'var1=a&var3=b&var3=c', //<-- questi sono i dati che invieremo alla pagina php
  beforeSend: function(){
    //qui scriveremo l'eventuale funzione che vogliamo venga eseguita dopo il click e prima dell'invio dei dati
  },
  success: function(response){
    //qui scriveremo la funzione che vogliamo eseguire se la chiamata ha avuto successo
    //ad esempio alert('Dati inviati con successo');
  },
  error: function(){
    //qui invece la funzione da eseguire nel caso in cui ajax non trovi la pagina php
    //o non riesc a comunicare con la pagina
    //NB se la pagina php per errori nel suo codice non riesce ad eseguire la funzione
    //per cui è stata scritta, error non verrà comunque invocata
  }
})

}) 

E secondo me, se il tuo form è semplice, perdi più tempo a studiare il plug in che a fare tu quello che ti serve...