Bouton radio

Version imprimable

Bouton radio

Bonjour a tous

Je souhaiterais de l'aide car depuis un moment je cherche et je ne trouve pas la solution pour transmettre des donné avec des bouton radio.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function maFonctionAjax(commentaire, datepicker_ex){
  var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"./2.php",true);
  OAjax.onreadystatechange = function(){
      if (OAjax.readyState == 4 && OAjax.status==200){
          if (document.getElementById){   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('commentaire='+commentaire+'&datepicker_ex='+datepicker_ex);                 
}

Code:

1
2
3
4
5
6
7
<div id="msg"></div>
<form method="post" onsubmit="maFonctionAjax(this.commentaire.value,this.datepicker_ex.value);return false" action="">
<input type="radio" name="datepicker_ex" value="Milk"> Milk<br>
<input type="radio" name="datepicker_ex" value="Butter" checked> Butter
<input type="hidden" name="commentaire" value="1">
<input type="submit" value="Envoyer" />
</form>

La valeur 1 du commentaire ce transmet bien, quand au radio il me donne undefined.
Après plusieurs recherche je crois qu'il faut modifier le script pour inclure le type des bouton radio, mais après plusieurs teste sans sucées je viens vous demander de l'aide

Merci d'avance :)

Bonjour et bienvenue sur DVP.

Tu ne peux pas faire directement un this.datepicker_ex.value compte tenu que this.datepicker_ex est une collection.

Il te faudrais donc parcourir cette collection pour récupérer les éléments checked.

Exemple de fonction retournant les éléments checked d'une FORM, compatible IE8+
Code:

1 2 3 4 5 6 7 8 9 10 function getCheckedElements( obj){ var param = [], oRadios = obj.querySelectorAll('input[type="radio"],input[type="checkbox"]'); for( var i=0, nb=oRadios.length; i<nb; i++){ if( oRadios[i].checked){ param.push( oRadios[i].name +'=' +encodeURIComponent(oRadios[i].value)); } } return param.join('&'); }
il y aurait moyen de faire oRadios = obj.querySelectorAll(':checked]') en direct mais on exclu dans ce cas IE8.
L'appel de la fonction peut se faire comme ceci

Code:

<form method="POST" onsubmit="alert( getCheckedElements( this));return false" action="">

13/07/2014, 11h31
Bovino

Citation:

il y aurait moyen de faire oRadios = obj.querySelectorAll(':checked]') en direct

Il serait en fait préférable d'utiliser dans ce cas obj.querySelector(':checked]'). ;)
En effet, querySelectorAll() est supposé renvoyer tous les éléments correspondant au paramètre (donc une collection), alors que querySelector() renvoie le premier élément trouvé, donc bien un HTMLElement.
13/07/2014, 18h56
NoSmoking
Citation:

Il serait en fait préférable d'utiliser dans ce cas obj.querySelector(':checked]'). ;)

bie d'accord avec toi, la fonction proposée se voulait plus générique ;)

Dans son cas on pourrait faire un simple
Code:

1 2 3 4 function getValueChecked(obj){ var r = obj.datepicker_ex; return r[0].checked ? r[0].value : r[1].value; }
et là même plus de problème de compatibilté.

merci de vos réponses a vous deux.

Effectivement le premier code permet de récupérer la première valeur du radio, mais en mixant les 2 codes celas fonctionne bien

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
function maFonctionAjax(commentaire, datepicker_ex)
{
  var param = [],
      oRadios = obj.querySelector(':checked]');
  for( var i=0, nb=oRadios.length; i<nb; i++){
    if( oRadios[i].checked){
      param.push( oRadios[i].name +'=' +encodeURIComponent(oRadios[i].value));
    }
  }
  return param.join('&');
}
var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"./2.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('commentaire='+commentaire+'&datepicker_ex='+datepicker_ex);                 
}

Le dernier code de NoSmoking fonctionne aussi très bien car il renvoie bien la bonne valeur sélectionné.

Par contre je ne sait pas comment ajouter cette fonction a mon premier code car comme je les inséré ci dessus via firebug je voyais bien les valeur en post mais en regardant de plus prés je me suis aperçut qu'il effectué le post dans le fichier même est pas dans le fichier 2.php

Tu as un problème d'intégration de la fonction
- sur base de la fonction "basique" fournie

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
function maFonctionAjax( objForm){
 
  function getValueChecked(obj) {
    var r = obj.datepicker_ex;
    return r[0].checked ? r[0].value : r[1].value;
  }
 
  var OAjax;
  // récupération des paramètres
  var param = 'commentaire=' +objForm.commentaire.value +'&datepicker_ex=' +getValueChecked(objForm);
 
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST', "./2.php", true);
  OAjax.onreadystatechange = function () {
    if (OAjax.readyState == 4 && OAjax.status == 200) {
      if (document.getElementById) {
        if (OAjax.responseText == 'true') {
          /* OK */
          document.getElementById('msg').innerHTML = '<font color=GREEN>' + OAjax.responseText + '</font>';
        } else {
          /* PAS OK */
          document.getElementById('msg').innerHTML = '<font color=RED>' + OAjax.responseText + '</font>';
        }
      }
    }
  }
  OAjax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  OAjax.send( param);
}

Remarque au sujet de ce code

Citation:

Code:

1
2
  oRadios = obj.querySelector(':checked]');
  for( var i=0, nb=oRadios.length; i<nb; i++){

je te renvoie à la remarque de Bovino

Citation:

En effet, querySelectorAll() est supposé renvoyer tous les éléments correspondant au paramètre (donc une collection), alors que querySelector() renvoie le premier élément trouvé, donc bien un HTMLElement.

Merci a toi NoSmoking l'intégration fonctionne très bien.

Donc pour résumer voici le code intégrale permettant d'effectuer un Post en javascript d input classique avec des radio:

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
<script language="JavaScript">
function maFonctionAjax( objForm){
  function getValueChecked(obj){
  var r = obj.datepicker_ex;
  return r[0].checked ? r[0].value : r[1].value;
}
  var OAjax;
  var param = 'commentaire=' +objForm.commentaire.value +'&datepicker_ex=' +getValueChecked(objForm);
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"./2.php",true);
  OAjax.onreadystatechange = function(){
      if (OAjax.readyState == 4 && OAjax.status==200){
          if (document.getElementById){   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send( param);                 
}
</script>

Code:

1
2
3
4
5
6
7
<div id="msg"></div>
<form method="post" onsubmit="maFonctionAjax(this, datepicker_ex, this.commentaire.value);return false" action="">
<input type="radio" name="datepicker_ex" value="Milk"> Milk<br>
<input type="radio" name="datepicker_ex" value="Butter" checked> Butter
<input type="hidden" name="commentaire" value="1">
<input type="submit" value="Envoyer" />
</form>

Ma petite question d’où l'autre sujet, était comme pour ce code, comment rajouter d'autre radio du style

Code:

1
2
<input type="radio" name="test" value="Milk"> Milk<br>
<input type="radio" name="test" value="Butter" checked> Butter

J'ai tenté ce type de code:

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
<script language="JavaScript">
function maFonctionAjax( objForm){
  function getValueChecked(obj){
  var r = obj.datepicker_ex;
  return r[0].checked ? r[0].value : r[1].value;
}
  function getValueChecked(obj){ // Je crois que c est ici que ca bloque
  var r = obj.test;// Je crois que c est ici que ca bloque
  return r[0].checked ? r[0].value : r[1].value;// Je crois que c est ici que ca bloque
}
  var OAjax;
  var param = 'commentaire=' +objForm.commentaire.value +'&datepicker_ex=' +getValueChecked(objForm) +'&test=' +getValueChecked(objForm);
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"./2.php",true);
  OAjax.onreadystatechange = function(){
      if (OAjax.readyState == 4 && OAjax.status==200){
          if (document.getElementById){   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send( param);                 
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
<div id="msg"></div>
<form method="post" onsubmit="maFonctionAjax(this, datepicker_ex, this, test,this.commentaire.value);return false" action="">
<input type="radio" name="datepicker_ex" value="Milk"> Milk<br>
<input type="radio" name="datepicker_ex" value="Butter" checked> Butter<br>
<br>
<input type="radio" name="test" value="Milk"> Milk<br>
<input type="radio" name="test" value="Butter" checked> Butter<br>
<input type="hidden" name="commentaire" value="1">
<input type="submit" value="Envoyer" />
</form>

en tout cas merci, la transmission de radio fonctionne très bien

je viens de m'apercevoir que celas fonctionne bien pour mon exemple de 2 radio, mais des lors que j'en ajoute un 3eme de la même famille il n'est plus prise en compte, bizard qu'il ce limite qu'a 2 radio:

Ça fonctionne:
Code:

1 2 <input type="radio" name="datepicker_ex" value="Milk"> Milk<br> <input type="radio" name="datepicker_ex" value="Butter"> Butter
Ça fonctionne pas:
Code:

1 2 3 <input type="radio" name="datepicker_ex" value="Milk"> Milk<br> <input type="radio" name="datepicker_ex" value="Butter"> Butter <input type="radio" name="datepicker_ex" value="test3"> test3
si quelqu'un a une idée :)

15/07/2014, 08h09
Bovino

Citation:

bizard qu'il ce limite qu'a 2 radio

Ca n'a rien de "bizard" (bizarre ce mot :aie:) puisque c'est ce que tu demandes...

Code:

return r[0].checked ? r[0].value : r[1].value;

Si tu as plus de deux boutons radio, il faut faire une boucle comme déjà indiqué.

Sinon, petit détail :

Code:

<script language="JavaScript">

:nono:
L'attribut language de la balise <script> est déprécié et ne sert à rien. Selon ton doctype (en supposant qu'il y en ai un :aie:), il faut utiliser soit l'attribut type="text/javascript" soit (doctype HTML5) aucun attribut.

Enfin

Code:

onsubmit="maFonctionAjax(this, datepicker_ex, this, test,this.commentaire.value);return false"

Code:

function maFonctionAjax( objForm){...}

A quoi ça te sert de transmettre trois paramètres si tu n'en utilises qu'un seul ? :?
15/07/2014, 09h40
Apprenti_php

Bonjour

Merci de tes conseils et de tous les autres, (j ai vais modifier tout ça)
Je vais me plonger dans cette boucle en JavaScript. Je clôture le sujet car le principal est dit et m'a déjà beaucoup aidé à y voir plus clair.
Des que je trouvé cette boucle et qu'elle sera fonctionnel je viendrais poster la réponse.

Merci à tous ce votre aide
@+
15/07/2014, 21h48
NoSmoking

Citation:

Je vais me plonger dans cette boucle en JavaScript.

la réponse t'a été donnée au post #2.

Bonjour

effectivement au post 2 la réponse été la mais une erreur m’empêchai d'envoyer les valeurs sur la bonne page, je pense que le pb venais plus bas pour transmettre ces valeur ou alors simplement du bouton Envoyer.

En tous cas grâces à ton code j'ai réussi a faire une boucle qui fonctionne, je ne sais pas si c'est parfait et dans les règles de l'art mais ça marche ^^

voici le code complet:

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
function maFonctionAjax22( objForm){
  function getValueChecked(obj){
  var r = obj.datepicker_ex;
   for(var i = 0; i < r.length; i++){
      if(r[i].checked){
         return r[i].value;
      }
   }
    return '';
}
 
  var OAjax;
  var param = 'commentaire=' +objForm.commentaire.value +'&datepicker_ex=' +getValueChecked(objForm);
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"2.php",true);
  OAjax.onreadystatechange = function(){
      if (OAjax.readyState == 4 && OAjax.status==200){
          if (document.getElementById){   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg22').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg22').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send( param);                 
}

Code:

1
2
3
4
5
6
<form method="post" onsubmit="maFonctionAjax22(this, datepicker_ex, this.commentaire.value);return false" action="">
<input type="radio" name="datepicker_ex" value="Milk"> Milk<br>
<input type="radio" name="datepicker_ex" value="Butter"> Butter<br>
<input type="radio" name="datepicker_ex" value="test3"> test3<br>
<textarea name="commentaire" id="commentaire" rows=2 cols=30></textarea></br>
</form>

Par contre Bovino me conseillé sur mon bouton du form d'envoyer qu'un seul paramètre:

Code:

function maFonctionAjax( objForm){...}

Mais celas n'a pas fonctionné, ça a marché si je laissé bien toute les valeurs.

Merci de votre patience et de vos réponses, je vais me plonger sérieusement dans ce langage car bidouiller avec ne suffit par pour s'en sortir.:P
Encore merci de votre aide