Générer dynamiquement une chaîne à partir d'un formulaire, à transmettre au fichier PHP chargé via AJAX

Question

A avoir un site de comparaison de prix avec un formulaire de saisie utilisateur dans la barre latérale. Lorsqu'un utilisateur commence à utiliser le formulaire (cases à cocher, cases d'option, etc.), je dois mettre à jour dynamiquement la zone de contenu principale (tableau de comparaison) de la page en fonction des options que l'utilisateur vérifie. Actuellement, j'utilise AJAX pour charger le contenu d'un fichier PHP dans un DIV dans la zone de contenu. Le fichier PHP a juste une requête PHP pour extraire le contenu d'une base de données et ensuite le sortir. Ce n'est pas une requête MySQL, c'est un appel PHP pour un package de comparaison de prix que j'utilise, en utilisant juste des arguments comme "+ blue + widget min_price = 10 max_price = 200" etc. La requête MySQL est ensuite gérée par le paquet.

Quand je code tout dur, ça marche bien, donc c'est un bon début. Le problème est, j'ai besoin de générer dynamiquement la chaîne de requête en fonction de ce que l'utilisateur sélectionne sur le formulaire, puis le passer au fichier PHP pendant l'appel AJAX, pour tirer le bon contenu dans le DIV. La chaîne de requête doit être mise à jour et l'appel doit avoir lieu chaque fois qu'un utilisateur modifie quelque chose sur le formulaire. Ainsi, par exemple, si un utilisateur coche une case pour la couleur "blue", j'ai besoin d'ajouter "+ blue" sur la chaîne et de renvoyer l'appel AJAX. Si elles décochent bleu, j'ai besoin de supprimer "+ bleu" et renvoyer l'appel AJAX etc etc

Je suis hors de ma profondeur à ce stade, donc j'apprécierais des conseils sur la façon de réaliser quelque chose comme ça. ..

Actuellement, j'ai ceci:

Le div contenu qui est mise à jour est appelé "pbDiv".

AJAX:

<script type="text/javascript"> 
function updateTable(str) 
{ 
if (str=="") 
    { 
    document.getElementById("pbDiv").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("pbDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","http://MYSITE//pricebox.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 

Forme:

<form> 
<select name="colour" onchange="updateTable(this.value)"> 
<option value="">Select a colour:</option> 
<option value="blue">Blue</option> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="yellow">Yellow</option> 
</select> 
</form> 

Le fichier PHP prend juste la chaîne, et fonctionne très bien. Le problème, comme vous l'avez peut-être deviné, est que cette forme ne fonctionne que pour une chose (la couleur). L'utilisation de this.value ne fait que passer le choix de cette liste déroulante. Je ne sais pas comment je pourrais utiliser plusieurs éléments de formulaire et construire une chaîne.

Answer 1

pour chaque élément de formulaire donne un identifiant unique, puis pour chaque appel fonction UpdateTable de l'article mais ne passez la valeur tout en appelant la fonction par exemple ::

maintenant modifier votre fonction UpdateTable comme celui-ci

function updateTable(){ 
var str = 'color = '+ document.getElementById('colorField').value; 
    str += 'something = '+ document.getElementById('somethingField').value; 
//now carry on your ajax stuff 
}