2011-01-06 12 views
1

Ich mache ein einfaches Formular, das 5 input Elemente für Teile einer Adresse hat. Ich benutze jQuery, um eine AJAX-Anfrage an eine PHP-Datei auf meinem Server zu erstellen und zu senden. Aus irgendeinem Grund ist meine jQuery nicht in der Lage, die Werte von meinen input Elementen zu lesen. Was könnte falsch sein?jQuery und AJAX?

Hier ist meine jQuery:

$('#submitButton').click(function(){ 
    $('#BBRequestBox').html('<img src="images/loading.gif" />'); 

    alert('Info: ' + $('#name').val() + ' ' + $('#street').val() + ' ' 
        + $('#city').val() + ' ' + $('#state').val() + ' ' 
        + $('#zip').val() + ' '); 
    $.ajax({ 
     type: "POST", 
     url: "./bbrequest.php", 
     data: { 
      name: $('#name').val(), 
      street: $('#street').val(), 
      city: $('#city').val(), 
      state: $('#state').val(), 
      zip: $('#zip').val() 
     }, 
     success: function(msg){ 
      $('#BBRequestBox').html('<p>' + msg + '</p>'); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown){ 
      $('#BBRequestBox').html('<p> There\'s been an error: ' 
       + errorThrown + '</p>'); 
     } 
    }); 
    return false; 
}); 

Hier ist mein HTML:

     <div id="BBRequestBox"> 
          <form action="#"> 
           <label>Name:</label><input type="text" name="name" id="name" class="textbox" /> 
           <label>Street:</label><input type="text" name="street" id="street" class="textbox" /> 
           <label>City:</label><input type="text" id="city" class="textbox" /> 
           <label>State:</label><input type="text" id="state" class="textbox" /> 
           <label>Zip:</label><input type="text" id="zip" class="textbox" /> 
           <input type="submit" value="Send Me a Bitachon Builder!" id="submitButton" /> 
          </form> 
         </div> 

EDIT:

Live-Beispiel bei Bitachon.org/new. Klicken Sie auf "Holen Sie sich den Bitachon Builder. (Linke Fußzeile Link)

+0

Ist die alert() Linie der Arbeit? –

+0

@MikeRobinson Warnt undefiniert für jede Variable. – Moshe

+0

Die Warnung funktioniert gut, wenn ich sie verwende: http://jsfiddle.net/Damien_at_SF/cKmrT/ –

Antwort

1

OK, so, weil Sie den Inhalt der Anfrage-Box mit Ihrem Laden Bild zu ersetzen, werden Sie tatsächlich die Umbauten zu entfernen, die Daten enthalten VOR sie processing ... als solche, wenn Ihre jQuery-Funktion für die Elemente aussieht, ist es sie nicht finden können und was das betrifft ihre Werte ...

Wenn Sie diese Zeile entfernen: $('#BBRequestBox').html('<img src="images/loading.gif" />'); es funktioniert ...

Ich arbeite an einem Weg dorthin < in der Zwischenzeit, dass die Lade Bild zu erhalten - Sieht aus wie Sie bereits die Lösung für die unten haben: P

+0

Ein lokales Array, um die Werte zu halten sollte erstellt werden und dann das Bild platziert. – Moshe

+0

nah, jeder hat es übersehen :) nur eines dieser Dinge: D froh, es ist behoben! –

0

Ich weiß nicht, warum Ihr Code nicht funktioniert, aber ich schlage vor, in die serialize() jQuery function statt manuell Konstruieren Sie Ihr Datenobjekt .. Es wird die reduzieren Menge an Code müssen Sie schreiben, was Ihr Fehler beseitigen könnte.

Und wir alle wissen, dass coding smaller eine gute Idee ist. :-)

1

Es sollte funktionieren. Meine Vermutung die Eingabeelemente existieren nicht ist Wenn Sie versuchen, Ihren Click-Handler anzuhängen, versuchen Sie, Ihren js einzupacken:

$(document).ready(function(){ 
    // Your stuff goes here 
}); 
+0

Guter Anruf, jsfiddle kümmert sich um all das für Sie, das ist, warum mein Link funktioniert :) +1 –

+0

Ich benutze das bereits. – Moshe

2

Sie ersetzen den HTML-Code Ihrer Anforderungsbox durch das Lade-GIF. So sind die Eingänge nicht mehr vorhanden, wenn Sie versuchen, auf sie zuzugreifen.

$('#BBRequestBox').html('<img src="images/loading.gif" />'); 

Sie so etwas tun könnte:

$('#BBRequestBox').prepend('<img src="images/loading.gif"/>').find('form').hide(); 
+0

+1. Das sieht so aus. Das JSFiddle, mit dem in den Kommentaren verlinkt wird, enthält das '# BBRequestBox'div nicht, so dass es das nicht erfasste. – Yahel

+0

Interessante Lösung. Ich benutze das Array für jetzt, es sei denn, es gibt einen gültigen Grund, nicht zu. (Ich bin offen für eine Erklärung, warum das besser ist.) – Moshe

+0

Es ist nur ein Beispiel für eine einfache Lösung, indem Sie nur eine Zeile ändern müssen :) – Andy