malheurs ajax. Soumettre sans rafraîchir. J'ai besoin d'aide

Question

J'ai des problèmes pour soumettre mon formulaire ajax. Je suis habitué à l'ancienne mode avec rafraichissement mais cette nouveauté me dépasse pour l'instant. Il est temps de commencer à apprendre de nouvelles technologies.

J'ai une boîte autosuggest qui obtient mes résultats d'une base de données et remplit la zone de texte juste très bien. Quand j'ai conçu cela il y a environ 6 mois, je cherchais dans la base de données sur la valeur plutôt que sur la valeur clé. C'est un problème aujourd'hui et doit être corrigé.

WHAT l'ajax est retourné à mon script est la paire clé/valeur. Maintenant que j'ai l'identifiant, je dois le passer dans ma méthode php pour que je puisse le traiter à partir de là.

Pouvez-vous me donner un coup de main s'il vous plaît? Cela semble assez simple mais encore une fois, javascript n'a jamais été mon truc alors je suis perdu.

Voici tout le code pertinent. En outre, je ne pense pas, au moins à partir des échantillons de code que j'ai vu jusqu'ici que j'ai même besoin d'une étiquette de forme. Ai-je raison à ce sujet? Idéalement, je veux soumettre la valeur ajax trouvée avec le bouton d'entrée et ne pas utiliser un bouton. Donc, juste pour clarifier, voici ce qui se passe. L'utilisateur tape 2 ou 3 lettres. L'ajax interroge le db sur un opérateur "LIKE" et renvoie les correspondances. L'utilisateur choisit celui qu'il veut et ensuite l'identification sort à ma méthode et renvoie l'enregistrement exact dans une fenêtre différente.

<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> 

---

Note .. Je dois le "id" dans cette fonction à soumettre. En ce moment, je reçois le POST val de l'étiquette de formulaire et ce n'est pas correct mais comment?

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

Merci pour toute aide que vous pouvez me donner à ce sujet.

Answer 1

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

Cela dégrade également grâce (si votre programme côté serveur est écrit à droite) que les utilisateurs sans javascript obtenir le formulaire soumis normalement à la page dans l'attribut d'action, sans l'AJAX.

Je vous suggère d'utiliser un framework tel que jQuery. A basic tutorial (including AJAX) is available

Answer 2

Jetez un oeil à jQuery. C'est une bibliothèque javascript. Il contient des fonctionnalités pour faire Ajax.

• jQuery Ajax documentation.

Answer 3

Vous avez deux problèmes. La première est que vous dites le formulaire pour soumettre:

document.forms.search.submit(); 

C'est la cause de votre formulaire pour soumettre à la norme, de manière non-XHR - provoquant un rafraîchissement. En outre, comme votre formulaire ne contient pas d'élément d'entrée pour l'ID, il n'est pas envoyé au serveur même avec une soumission de formulaire régulière. Je suis d'accord avec les affiches que ce serait une bonne idée d'utiliser jQuery ou quelque chose pour faire votre soumission basée sur ajax. Quelque chose comme this pourrait être utilisé à l'intérieur de votre fonction "AC.chooseFunc" au lieu du formulaire de soumission.

Et oui, si vous allez complètement ajax, vous n'avez même pas besoin d'une étiquette de formulaire.