Récupération d'une valeur d'un bouton radio en AJAX

Question

Bonjour, 

Comme le titre l'indique, j'utilise une fonction AJAX (ci-dessous) pour vérifier un formulaire (s'il est bien rempli avant de l'envoyer). Pour les champs texte, par exemple

, tout marche impeccable. 

Je rencontre un problème sur les champs "radios", par exemple

. 

J'ai recherché sur Internet et j'ai vu que les champs "radios" nécessitaient un traitement en plus. J'ai essayé de le faire mais en vain. 

Vous trouverez ci-dessous la fonction (je l'ai simplifié) qui fonctionne pour les champs texte mais pas pour les champs "radios" : 

function signin_inscription(champs1, champs2, champs3)
{
var OAjax;

if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
OAjax.open('POST','../fichier.php',true);
OAjax.onreadystatechange = function()
{
if (OAjax.readyState == 4 && OAjax.status==200)
{
if (document.getElementById) 
{	
if (OAjax.responseText == 'true') {
alert('L\'op\351ration s\'est bien pass\351e.');	
document.getElementById('msg_inscription').innerHTML='';		
}else{
document.getElementById('msg_inscription').innerHTML=OAjax.responseText;
}
}
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('champs1='+ champs1 +'&champs2='+ champs2 +'&champs3='+ champs3);
}


En cherchant sur Internet, j'ai vu qu'il fallait faire une boucle (j'en ai essayé plusieurs en réfléchissant mais ça ne marche pas. Etant donné que j'ai essayé plusieurs codes, je ne le mets pas). 

J'ai modifié la ligne

OAjax.send('champs1='+ champs1 +'&champs2='+ champs2 +'&champs3='+ champs3);/code] en rajoutant [code=js]+getRadioValue() +
. 

De plus, j'ai rajouté ce code : 

function getRadioValue(){
        var lstRadios = document.getElementsByName('civilite_corps_enseignant');
        for(var i=0; i<lstRadios.length; i++) if(lstRadios[i].checked) return lstRadios[i].value;
        return null;
}

Le traitement des

dans le fichier PHP c'est :

if($civilite==""){
$erreurs[]="message d'erreur";
}


Est-ce que le  est bien géré en PHP ?

Cordialement
Pouvez-vous m'aider SVP ?

omlaly · Answer

J'ai essayé ce code (que j'ai simplifié) :

function signin_inscription_personne(civilite_corps_enseignant,nom_corps_enseignant,prenom_corps_enseignant)
{  
  	var OAjax;

if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
OAjax.open('POST','../page.php',true);
OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {  
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg_inscription_personne').innerHTML='';
              }else{                             /* PAS OK */
                    document.getElementById('msg_inscription_personne').innerHTML=OAjax.responseText;
              }
          }    
      }
  }

OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('civilite_corps_enseignant='+civilite_corps_enseignant+'&nom_corps_enseignant='+nom_corps_enseignant+'&prenom_corps_enseignant='+prenom_corps_enseignant+getRadioValue());
   }

function getRadioValue(){

var lstRadios = document.getElementsByName('civilite_corps_enseignant');

   for(var i=0; i<lstRadios.length; i++){

     if(lstRadios[i].checked){

 return lstRadios[i].value;
 return null;
}
}
}


Pour information, voici le code PHP :

if(isset($_POST['civilite_corps_enseignant'])){
    echo $_POST['civilite_corps_enseignant'];
}


Lors de l'essai, quand je soumets le formulaire, voici le message qui s'affiche : undefined dans les deux cas (coché ou pas coché)

Cordialement

omlaly · Answer

J'ai avancé : maintenant il reconnait la bonne valeur (soit 1, soit 2, soit 3) selon le choix (Monsieur, Madame, Mademoiselle) en rajoutant sur les champs de type input (exemple : ) ce code : onclick="getRadioValue();".

Voici la fonction "getRadioValue()" :

function getRadioValue(){

     for (i = 0; i < document.getElementsByName('civilite_corps_enseignant').length; i++) {
                if(document.getElementsByName('civilite_corps_enseignant')[i].checked == true) {
                    var ratingValue = document.getElementsByName('civilite_corps_enseignant')[i].value;
                    break;
                }
        }
        alert(ratingValue);
}


Désormais, il ne reste plus qu'à intégrer cette fonction dans la fonction JAVASCRIPT/AJAX suivante :

function signin_inscription_personne(civilite_corps_enseignant,nom_corps_enseignant,prenom_corps_enseignant)
{  
  	var OAjax;

if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
OAjax.open('POST','../page.php',true);
OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {  
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg_inscription_personne').innerHTML='';
              }else{                             /* PAS OK */
                    document.getElementById('msg_inscription_personne').innerHTML=OAjax.responseText;
              }
          }    
      }
  }

OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('civilite_corps_enseignant='+civilite_corps_enseignant+'&nom_corps_enseignant='+nom_corps_enseignant+'&prenom_corps_enseignant='+prenom_corps_enseignant);
   }


Je vous mets le traitement qui est dans "page.php" concernant le  :

if($civilite_corps_enseignant==""){
$erreurs[]="Vous n'avez pas saisi la civilité de l'enseignant";
}


Pouvez-vous m'aider SVP ?
Cordialement

omlaly · Answer

J'ai essayé de regrouper les deux fonctions en une fonction JAVASCRIPT dont voici le code simplifié :

function signin_inscription_personne(civilite_corps_enseignant,nom_corps_enseignant,prenom_corps_enseignant)
{  
  	var OAjax;

if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
OAjax.open('POST','../page.php',true);
OAjax.onreadystatechange = function() {
if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {  
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg_inscription_personne').innerHTML='';

              }
  else {                             /* PAS OK */
     		for (i = 0; i < document.getElementsByName('civilite_corps_enseignant').length; i++) {
                if(document.getElementsByName('civilite_corps_enseignant')[i].checked == false) {
                    var ratingValue = document.getElementsByName('civilite_corps_enseignant')[i].value;
                   document.getElementById('msg_inscription_personne').innerHTML=OAjax.responseText;
                }
}
             }
          }    
      }
  }

OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('civilite_corps_enseignant='+civilite_corps_enseignant+'&nom_corps_enseignant='+nom_corps_enseignant+'&prenom_corps_enseignant='+prenom_corps_enseignant);
   }


Voici le code PHP correspondant aux boutons radios qui est dans page.php :

if($_POST['civilite_corps_enseignant']==""){
$erreurs[]="Vous n'avez pas saisi la civilité de l'enseignant";
}


Ca ne fonctionne pas, avez-vous des idées ?
Cordialement

omlaly · Answer

Bonjour,

J'ai une autre question :
Comment sauvegarder le choix d'un  en SQL ?
Quand j'essaye, il me met undefined.

Cordialement

omlaly · Answer

Avec cette fonction JAVASCRIPT, j'affiche un message avec l'item choisi et ça marche : 

function signin_inscription_personne(civilite_corps_enseignant,nom_corps_enseignant)
{  
  	var OAjax;

if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
OAjax.open('POST','../fichier.php',true);
OAjax.onreadystatechange = function() {
if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {  
              if (OAjax.responseText =='true') {
                    document.getElementById('msg_inscription_personne').innerHTML='';
              }
  else {
  if (form.civilite_corps_enseignant[0].checked) {
alert("Vous avez choisi la proposition " + form.civilite_corps_enseignant[0].value);
}
if (form.civilite_corps_enseignant[1].checked) {
alert("Vous avez choisi la proposition " + form.civilite_corps_enseignant[1].value);
document.getElementById('msg_inscription_personne').innerHTML=OAjax.responseText;
}
/* DEBUT - Boucle (marche pas, j'ai mis "checked" par défaut) qui permet de traiter les inputs type="radio" pas pareil que les inputs type="text"for (i = 0; i < document.getElementsByName('civilite_corps_enseignant').length; i++) {
                if(document.getElementsByName('civilite_corps_enseignant')[i].checked == false) {
                    //var ratingValue = document.getElementsByName('civilite_corps_enseignant')[i].value;
                   }
               
} FIN - Boucle (marche pas, j'ai mis "checked" par défaut) qui permet de traiter les inputs type="radio" pas pareil que les inputs type="text"*/
             }
          }    
      }
  }

OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('&civilite_corps_enseignant='+civilite_corps_enseignant+'&nom_corps_enseignant='+nom_corps_enseignant+);
   }


Mais, ça affiche toujours "undefined".

Avez-vous une idée ?

Cordialement

Récupération d'une valeur d'un bouton radio en AJAX

5 réponses

Votre réponse

Discussions similaires