Discussion :

[Apprenti_php]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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.

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Apprenti_php]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

je te renvoie à la remarque de Bovino

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.

[Apprenti_php]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Apprenti_php]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

bizard qu'il ce limite qu'a 2 radio

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<script language="JavaScript">

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 ), il faut utiliser soit l'attribut type="text/javascript" soit (doctype HTML5) aucun attribut.

Enfin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function maFonctionAjax( objForm){...}

A quoi ça te sert de transmettre trois paramètres si tu n'en utilises qu'un seul ?

[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
@+

[NoSmoking]

Je vais me plonger dans cette boucle en JavaScript.

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

[Apprenti_php]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.
Encore merci de votre aide