javascript derrière un onclick sur bouton radio

Version imprimable

18/08/2006, 23h48
lodan

javascript derrière un onclick sur bouton radio
Bonsoir,

J'utilise des boutosn "radio" sur mon formulaire html
Code:

1 2 <input type="radio" name="doc_select" id="doc_sel" onclick="goSelect()" value="$table.doc_select" checked>Oui <input type="radio" name="doc_select" value="$table.doc_select">Non
Je veux déclencher un javascript lorsque "Oui" est cliqué, alors j'ai écrit le source ci-dessus.

Mais que je mette goSelect ou toto comme javascript, il ne se passe rien et dans la console Javascript rien non plus.

Donc, je me dis que le onclick n'est pas reconnu ici.

Un avis sur cette syntaxe ?

Merci d'avance
19/08/2006, 01h44
Kerod

Mais ta fonction elle fait quoi ?

Et tu as aussi l'évènement onselect

Bonjour Kerod,

Ma fonction est une fonction ajax d'appel au serveur pour une liste déroulante si on clic sur oui.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function goSelect(){ getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; document.getElementById('doc_type').innerHTML = leselect; } } xhr.open("POST","Ooo_ajax_field.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); > id_select = document.form.radio[0].checked.value; xhr.send("idSelect="+idselect); }
Et j'ai comme l'inpression que c'est sur cette ligne là que cela coince :

Code:

id_select = document.form.radio[0].checked.value;

Merci d'avance

19/08/2006, 13h21
FremyCompany

Que cherches-tu à obtenir ?
Ton select tu l'a avec document.getElementById("ID")
Le state de ton select avec select.checked
Et son contenu avec select.value

Deplus, je pense que tu devrais changer ton script AJAX...
Je sais il vient du tutoriel du site, mais il fonctionne mal (et ca fait la 1000e fois que je le dis...)

Lol, cette fois je me fatigue plus à chercher le lien vers un autre thread qui parle du pb... Je te laisse le faire par toi-même ;)

==> Recherce (Forums : JS, Auteur Franckarts)

Merci Fremy,

J'ai trouvé celui-ci

Mais, je n'ai pas d'anomalie lors de l'usage du script du tuto.

Donc,je remplace cela

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getXhr(){
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
			}

Par ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function getXhr(){
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}

Et pour l'appel de le fonction, je remplace

Code:

getXhr()

Par

Code:

getXhr=GetXmlHttpRequest;

Donc c'est pour un meilleur test de la version du navigateur présent.

Ai-je bien compris ?

Pas tout à fait....
Il y a en effet une part d'amélioration de la prise en charge d'IE mais le point le plus important est surtout le fait que si tu exécute une requête alors que la précédente n'est pas terminée, la première ne sera plus jamais exécutée... et la deuxième pourrait être exécutée deux fois...

getXhr() doit être remplacé par

Code:

var xhr=getXhr();

Et la fonction getXhr doit être remplacé EN ENTIERE (il ne doit donc plus y avoir "function getXhr()" qqpart dans le script) par le code suivant (toute modification de ce code pourrait entrainer une perte de performance)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 // Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste var pickRecentProgID = function (idList){ // found progID flag var bFound = false; for(var i=0; i < idList.length && !bFound; i++){ try{ var oDoc = new ActiveXObject(idList[i]); o2Store = idList[i]; bFound = true; }catch (objException){ // trap; try next progID }; }; if (!bFound) throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur"); idList = null; return o2Store; } // Retourne un nouvel objet XmlHttpRequest var GetXmlHttpRequest_AXO=null var GetXmlHttpRequest=function () { if (window.XMLHttpRequest) { return new XMLHttpRequest() } else if (window.ActiveXObject) { if (!GetXmlHttpRequest_AXO) { GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]); } return new ActiveXObject(GetXmlHttpRequest_AXO) } return false; } // Compatibilité avec le tutoriel getXhr=GetXmlHttpRequest;
Et sinon, as-tu obtenu une réponse satisfaisante en ce qui concerne l'utilisation et l'obtention de ton bouton radio ou est-ce que tu préfère que j'explique plus en profondeur ?

Oui pour le bouton radio ,j'ai quelques problèmes

Voici mon code html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <p> <label for="champ" title="Veuillez choisir un champ dans la liste" class="oblig">*Champ :</label> <div id="doc_champ"> <select name="doc_champ" id="id_select" title="Veuillez choisir un champ dans la liste" onfocus="this.className='focus';" onblur="this.className='normal';" > {if $table.doc_champ<>""} <option value="{$table.doc_champ}">{$table.doc_champ}</option> {else} <option value="-1">Choisir une table</option> {/if} </select> </div> </p> <p> <label for="select" title="Y aura-t-il une sélection sur ce champ ?">Sélection :</label> <input type="radio" name="doc_select" id="doc_sel" onclick="goSelect()" value="$table.doc_select" checked>Oui <input type="radio" name="doc_select" value="$table.doc_select">Non </p> <p> <div id="doc_type"> {if $table.doc_type<>"0"} <label for="Type" title="Veuillez choisir le type" class="oblig">*Type :</label> <select name="doc_type" title="Veuillez choisir le type" onfocus="this.className='focus';" onblur="this.className='normal';" > <option value="{$table.doc_type}">{$table.doc_type|getTypeDocPub}</option> </select> {/if} </div> </p>
Dans la 1ère boucle select, j'ai déjà une 1ère utilisation d'ajax pour charger les champs d'une table de la base de données.

Je pose ensuite la question "Sélection", c'est à dire doit-il y avoir une sélection sur ce champ. Si oui, alors je veux sur le dernier "select" présenter une liste de valeur provenant d'une table en ajax.

Donc dans mon javascript je dois détecter le clic sur le oui. Tester la valeur de "doc_select" et si c'est "1" alors récupérer la valeur de "doc_champ" puis appeler mon programme php de chargement des valeurs issues de "doc_champ".

Mon soucis, que j'ai du mal à assimiler c'est la récupération des valeurs.

Pour doc_champ je peux faire :

Code:

$docchamp= document.getElementById('doc_champ').value

Pour doc_select :

Code:

id_select = document.form.radio[0].checked.value;

C'est ce que j'ai fait, mais cela ne fonctionne pas.

19/08/2006, 16h40
FremyCompany

le .value a la fin est parfaitement inutile... et c'est même précisément la qu'est sans doute l'erreur ;)
19/08/2006, 18h03
lodan

Ben oui docteur c'est le value.

Bon pour le reste du code pour l'amélioration de javascript, je mis met ce soir, en priant avoir tout compris.

Bon, je ferais une bonne sauvegarde avant.

Je te tiens au courrant