bonjour à tous
Je vous explique mon problème par l'image : Pour une admin de newsletter, je souhaiterai pouvoir inscrire/désinscire des emails d'une liste en un clic sur une checkbox. Je vous mets ci-dessous l'image avec le html, vous comprendrez de suite le principe.


Par ailleurs, j'ai donc parcouru le tuto AJAX, mais là ou je pêche, c'est dans le ciblage de mes éléments de formulaire, voici mon code JS :

function makeRequest()
{
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { alert(xhr.responseText); }
	} 
	var abo = encodeURIComponent(document.getElementById("input_abo").value);
	var liste = encodeURIComponent(document.getElementById("input_liste").value);
	var box = encodeURIComponent(document.getElementById("input_box").value);
	xhr.open("GET", "test.php?abo=" + abo + "&liste=" + liste + "&box=" + box + "", true);
	xhr.send(null);
}

A ce stade, ça semble fonctionner, sauf le ciblage, chaque clic modifie uniquement le premier enregistrement... Et au fonds c'est plutôt normal.

Mon code comporte donc au moins une erreur : les ID des éléments de formulaire sont répétés... Par bon.

Mais comment faire, alors ?
Merci d'avance à ceux qui me guideront dans la voix du bonheur de toucher AJAX du doigt

doudi

Bonjour,
Il est normal qu'avec des ID, ben ça fonctionne pas.
Fais-ça avec le name de tes inputs, ce qui donne :

function makeRequest(form)
{
	var xhr = new XMLHttpRequest(); //Pense aux pauvres qui ont IE < 7 ! Essaie avec un ActiveXObject pour eux !
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { alert(xhr.responseText); }
	} 
	var abo = encodeURIComponent(form.getElementsByName("input_abo")[0].value);
	var liste = encodeURIComponent(form.getElementsByName("input_liste")[0].value);
	var box = encodeURIComponent(form.getElementsByName("input_box")[0].value);
	xhr.open("GET", "test.php?abo=" + abo + "&liste=" + liste + "&box=" + box + "", true);
	xhr.send(null);
}

Et, en HTML :

<form onchange="makeRequest(this);"><!-- ... --></form>

En espérant t'avoir aidé (même si il y a de nombreuses autres manières de parvenir à tes fins),
cbasile06

je teste ça de ce pas (il ne me reste que très peu de temps, je dois partir, mais je continuerais demain).

Le scrip étant coté admin, je connais les administrateurs, ils utilisent FF, d'ou mon choix d'ignorer IE

à priori, je n'arrive toujours pas à obtenir les valeurs voulues. Cette fois, les valeurs ne sont pas transmises, autrement dit, ceci ne fonctionne pas :

function makeRequest(form)
{
    (...)
    var abo = form.getElementsByName("input_abo")[0].value;
    (...)
}

je reverrais demain, mais si tu as une toute autre methode à proposer, je suis disposer à t'écouter

En tout cas merci de ton coup de main
@ suivre...

doudi

Edit : le debug m'indique : form.getElementsByName is not a function

(Désolé, je n'étais pas disponible hier)
En effet, j'ai oublié que getElementsByName ne fonctionnait que sur document et pas sur tous les éléments, shame on me.
En plus, j'avais pas fait attention, mais tes names ne sont pas les mêmes que les id...
C'était valide via un framework, je ne sais plus lequel.
Dans ce cas, si tes inputs sont toujours dans le même ordre, tu peux utiliser getElementsByTagName('input'), qui, lui, fonctionne avec les formulaires (et tous les éléments en fait).
C'est peut-être mieux de faire un code générique pour tous les formulaires, un truc dans le genre :

/*
 * makeRequest(HTMLFormElement form, Function rappel[, bool xml = false[, string force[, ...]]])
 * Le bool xml pour retourner le responseText ou le responseXML
 * Les force(s) pour forcer l'envoi de données si le nom est l'un d'eux (button cliqué...)
 */
function makeRequest(form, rappel)
{
	var type = 'Text';
	//Si on a précisé si le XML était voulu ou pas, on change le type en fonction
	if(typeof arguments[2] != 'undefined')
		type = (arguments[2] == false) ? 'Text' : 'XML';
	var force = {};
	for(var i = 3; i < arguments.length; i++)
		force[arguments[i]] = true;
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
			rappel(xhr['response' + type]);
	}
	//On prend tous les éléments dans le formulaire
	var elements = form.getElementsByTagName('*'), uri = '';
	for(var i = 0, longueur = elements.length; i < longueur; i++)
	{
		var element = elements[i];
		//On n'inclut l'élément que si il a un nom
		if(element.hasAttribute('name'))
		{
			//Cas des selects : on parcourt les options pour savoir laquelle (lesquelles) on inclut
			if(element.nodeName.toLowerCase() == 'select')
			{
				var options = element.getElementsByTagName('option');
				for(var j = 0, l = options.length; j < l; j++)
				{
					//Si l'option est séléctionnée, on la met dans l'URI
					if(options[j].selected)
					{
						uri += encodeURIComponent(element.getAttribute('name')) + '=' + encodeURIComponent(options[j].value)+ '&';
					}
				}
			}
			//Test un peu compliqué.
			//En fait, c'est "Si : 
			// - L'élement à un type radio ou checkbox et qu'il est "checked"
			// - Ou l'élément à un type, mais ni radio, ni checkbox, ni submit, ni button, ni reset (ceux-là, on ne les mets car on n'a pas "cliqué" dessus)
			// - Ou l'élément n'a pas de type (considéré comme un type text par la plupart des navigateurs)"
			else if((element.hasAttribute('type') && ((element.getAttribute('type') == 'radio' || element.getAttribute('type') == 'checkbox') && element.checked) || (element.getAttribute('type') != 'radio' && element.getAttribute('type') != 'checkbox' && element.getAttribute('type') != 'submit' && element.getAttribute('type') != 'button' && element.getAttribute('type') != 'reset')) || !element.hasAttribute('type') || typeof force[element.getAttribute('name')] != 'undefined')
				uri += encodeURIComponent(element.getAttribute('name')) + '=' + encodeURIComponent(element.value)+ '&';
		}
	}
	//On enlève le dernier caractère - soit uri est vide, donc ça ne change rien, soit on enlève le "&" final
	uri = uri.substr(0, uri.length - 1);
	//Si il faut faire une requête de type POST...on envoie par POST 
	if(form.hasAttribute('method') && form.getAttribute('method').toLowerCase() == 'post')
	{
		xhr.open('POST', form.getAttribute('action'), true);
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
		xhr.send(uri);
	}
	//Sinon, on fait une méthode GET
	else
	{
		xhr.open('GET', form.getAttribute('action') + '?' + uri, true);
		xhr.send(null);
	}
}

En espérant t'avoir été plus utile que la dernière fois,
cbasile06