[AJAX/jQuery] Form ajax

**KingWoody** · 25-03-2012, 16:56

Ciao a tutti ragazzi,

ho un problema con un form in ajax: è la prima volta che uso ajax. Il codice non funziona e non riesco proprio a capire quale sia l'errore:

codice:

$(function() { 
$("#bottone").click(function() { 
var name = $("#name").val(); 
var last = $("#last").val(); 
var email = $("#email").val(); 
var city = $("#city").val(); 
var day = $("#day").val(); 
var month = $("#month").val(); 
var year = $("#year"); 
var password = $("#password").val(); 
var sex = $("#sex").val(); 
var dataString = 'name='+ name + '&last=' + username + '&password=' + password + '&sex=' + sex + '&email=' + email + '&city=' + city + '&giorno=' + day + '$mese=' + month + '&anno=' + year + '&lat=' + lat + '&long=' + long; 

if(name=='' || email=='' || password=='' || sex=='' || city=='' || day=='' || month=='' || year=='') { 
$('.success').fadeOut(200).hide(); 
$('.error').fadeOut(200).show(); 
} 
else 
{

$.ajax({ 
type: "POST", 
url: "register.php", 
data: dataString, 
success: function(){ 
$('.success').fadeIn(200).show(); 
$('.error').fadeOut(200).hide(); 
} 
}); 
} return false; 
}); 
});

Per aiutarvi posso dirvi che non funziona neanche la parte che controlla i valori degli input: posso lasciare i campi vuoti..

**br1** · 25-03-2012, 18:06

... potresti anche dirci cosa ti aspetti che faccia? ... anche perche' l'affermazione "non funziona" e' scarna di informazioni

**KingWoody** · 25-03-2012, 18:16

Sì, certo.. Hai ragione. Allora quando clicco sul bottone aggiorna semplicemente il form, e 'svuota' tutti i valori degli input.. In teoria invece dovrebbe postarli su register.php . Questo è il form se può servirti:

codice:

<form  name="register" id="registra" method = "POST">   
       <label for="nome">First name</label>
      <input id="name" name="name" type="text" maxlength="20" x-webkit-speech speech />
      <label for="nome">Last name</label>
      <input id="last" name="last" type="text" maxlength="20" x-webkit-speech speech />
      <label for="email">Email</label>
      <input id="email" name="email" type="email"   />
     </br></br>
     <label for="nome">I live in</label>
      <input name="city" id="city" type="text" onblur="search_city()" maxlength="20"  x-webkit-speech speech />
     <label for="password">Password</label>
      <input name="password" type="password" id="password" maxlength="20"/>
      </br></br>
      
     <label for="sex">I am:</label>
      <select name="sex" id="sex">
        	 <option value="">Select sex:</option>
       		 <option value="1">Male</option>
             <option value="2">Female</option>
        </select>
      </br></br>
     	<label for="nascita">Birthday: </label>
        <select name="giorno" class="day" id="day" >
        <option value="">Day</option>
	<option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
	</select>
	<select name="mese" id="month" class="month">
	<option value="">Month</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
	</select>
	<select name="anno" id="year" class="year">
	<option value="" selected>Year</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>
    <option value="1959">1959</option>
    <option value="1958">1958</option>
    <option value="1957">1957</option>
    <option value="1956">1956</option>
    <option value="1955">1955</option>
    <option value="1954">1954</option>
    <option value="1953">1953</option>
    <option value="1952">1952</option>
    <option value="1951">1951</option>
    <option value="1950">1950</option>
    <option value="1949">1949</option>
    <option value="1948">1948</option>
    <option value="1947">1947</option>
    <option value="1946">1946</option>
    <option value="1945">1945</option>
    <option value="1944">1944</option>
    <option value="1943">1943</option>
    <option value="1942">1942</option>
    <option value="1941">1941</option>
    <option value="1940">1940</option>
    <option value="1939">1939</option>
    <option value="1938">1938</option>
    <option value="1937">1937</option>
    <option value="1936">1936</option>
    <option value="1935">1935</option>
    <option value="1934">1934</option>
    <option value="1933">1933</option>
    <option value="1932">1932</option>
    <option value="1931">1931</option>
    <option value="1930">1930</option>
  	</select>
   
  <center> <input type="button" id="bottone" value="Sign up" /></center>
  <span class="error" style="display:none; color:#FF0000;font-size:12px; "> Please Enter Valid Data</span>
<span class="success" style="display:none;color:#00BF00;font-size:12px;"> Registration Successfully</span>
</form>

**cavicchiandrea** · 25-03-2012, 18:44

qui manca il .val() var year = $("#year");

**KingWoody** · 25-03-2012, 19:04

Sì beh non penso sia quello il problema xD.. Comunque grazie

**cavicchiandrea** · 25-03-2012, 19:57

prova cosi:

codice:

$(function() { 
$("#bottone").click(function() {
ControllaForm()}); 
});
function ControllaForm(){ 
var name = $("#name").val(); 
var last = $("#last").val(); 
var email = $("#email").val(); 
var city = $("#city").val(); 
var day = $("#day").val(); 
var month = $("#month").val(); 
var year = $("#year").val(); 
var password = $("#password").val(); 
var sex = $("#sex").val(); 
var dataString = 'name='+ name + '&last=' + username + '&password=' + password + '&sex=' + sex + '&email=' + email + '&city=' + city + '&giorno=' + day + '$mese=' + month + '&anno=' + year + '&lat=' + lat + '&long=' + long; 
if(name=='' && email=='' && password=='' && sex=='' && city=='' && day=='' && month=='' && year=='') { 
$('.success').fadeOut(200).hide(); 
$('.error').fadeOut(200).show(); 
} 
else 
{
$.ajax({ 
type: "POST", 
url: "register.php", 
data: dataString, 
success: function(){ 
$('.success').fadeIn(200).show(); 
$('.error').fadeOut(200).hide(); 
} 
}); 
}
}

P.S. Attenzione non hai le variabili lat, long che invii in querysting

P.S.S. E consiglierei anche di cambiare il campo password che una parola riservata (probabilmente è ininfluente ma meglio non rischiare)

**KingWoody** · 25-03-2012, 20:21

Non funziona neanche così. La differenza è che ora non mi 'svuota' più il form ma è come se il bottone invio non funzionasse. Se clicco non fa nulla :/..
Comunque non ho capito il problema nel passare lat e long in querystring :/

**KingWoody** · 25-03-2012, 20:32

Ah, ecco: forse l'errore sta da tutt'altra parte: in questa funzione dovrebbe mancare un ";" ..

codice:

function search_city()
{

var place =  $("#city").val();

geocoder = new GClientGeocoder();
geocoder.getLatLng(place, function(point) {
    if (!point) {
		if(place == "")
		{ }
		else
		{
        alert(place + " not found. Retry!");
		document.register.city.value = "";
		$('#city').focus(); }
    } else {
		//alert(point);
        //var info = place+"</h3>Latitude: "+point.y+"  Longitude:"+point.x;
		var lat = point.y;
		var long = point.x;
       // var marker = new GMarker(point);
       // map.addOverlay(marker);
       // marker.openInfoWindowHtml(info);
    }
};

Più o meno verso la fine ma non riesco ad individuarlo.. Idee?

Discussione: [AJAX/jQuery] Form ajax

Strumenti discussione

Ricerca discussione

Visualizza

[AJAX/jQuery] Form ajax

Permessi di invio