Ajax Leiden. Senden ohne Aktualisierung. Ich brauche Hilfe

Question

Ich habe Probleme beim Einreichen meiner Ajax-Form. Ich bin an die altmodische Art mit Auffrischung gewöhnt, aber dieses neue Zeug ist vorerst außer mir. Es ist Zeit, neue Technologien zu erlernen.

Ich habe eine Autosuggest-Box, die meine Ergebnisse aus einer Datenbank erhält und die Textbox gut gefüllt. Als ich das vor ungefähr 6 Monaten entwarf, suchte ich in der Datenbank nach dem Wert und nicht nach dem Schlüsselwert. Dies ist ein Problem heute und muss behoben werden.

When der Ajax zu meinem Skript zurückgekehrt ist, ist das Schlüssel/Wert-Paar. Nun, da ich die ID habe, muss ich diese in meine PHP-Methode übertragen, damit ich sie von dort verarbeiten kann.

Kann mir bitte jemand eine Hand geben? Es scheint einfach genug, aber noch einmal, Javascript war nie mein Ding, also bin ich verloren.

Hier ist der gesamte relevante Code. Ich glaube auch nicht, zumindest von den Code Samples, die ich bisher gesehen habe, dass ich sogar ein Form-Tag brauche. Habe ich Recht damit? Idealerweise möchte ich den gefundenen Ajax-Wert mit der Eingabetaste und NICHT mit einer Schaltfläche eingeben.

Also, nur um zu klären, das ist was passiert. Der Benutzer gibt 2 oder 3 Buchstaben ein. Der Ajax fragt die Datenbank nach einem "LIKE" -Operator ab und gibt die Übereinstimmungen zurück. Der Benutzer wählt den, den er will, und dann geht die ID zu meiner Methode und gibt den genauen Datensatz in einem anderen Fenster zurück.

<form method="post" class="hdrForm" id="search" action="../../index.php?cer=2" target="_top"> 
<input type="text" name="string" class="hdrInput" id="string" value="Quick Search"><div id="acDiv"></div> 

</form> 

---

Hinweis .. Ich brauche die "id" in dieser Funktion vorgelegt werden. Im Moment bekomme ich den POST-Wert vom Formular-Tag und das ist nicht korrekt, aber wie?

AC.chooseFunc = function(id,label) 
    { 
    document.forms.search.submit(); 
    } 

Danke für jede Hilfe, die Sie mir auf diese geben können.

Answer 1

document.getElementById("search").onsubmit = function() { 
    // Do what you want with the form 
    return false; // Stops submit continuing 
} 

Dies verschlechtert auch ordnungsgemäß (wenn Ihr Server-Seite Programm richtig geschrieben ist), dass Benutzer ohne Javascript bekommt die normalerweise im action-Attribute auf der Seite eingereichten Form ohne die AJAX.

Ich würde vorschlagen, Sie verwenden ein Framework wie jQuery. A basic tutorial (including AJAX) is available

Answer 2

Werfen Sie einen Blick auf jQuery. Es ist eine Javascript-Bibliothek. Es enthält Funktionen für Ajax.

• jQuery Ajax documentation.

Answer 3

Sie haben zwei Probleme. Eine davon ist, dass Sie das Formular sagen einreichen:

document.forms.search.submit(); 

Das ist, was Ihre Form in den Standard, nicht-xhr Weise einreichen verursacht - eine Aktualisierung verursacht. Da Ihr Formular kein Eingabeelement für die ID enthält, wird dieses auch bei einer regulären Formularübertragung nicht an den Server gesendet.

Ich stimme den Postern zu, dass es eine gute Idee wäre, jQuery oder etwas zu verwenden, um Ihre Ajax-basierte Einreichung durchzuführen. Etwas wie this könnte innerhalb Ihrer "AC.chooseFunc" -Funktion anstelle des Formulars "submit" verwendet werden.

Und ja, wenn Sie Ajax ganz gehen, brauchen Sie nicht einmal ein Formular-Tag.