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).

Pouvez-vous m'aider SVP ?

En attendant, je continue mes recherches...
Cordialement

omlaly · Answer

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;
}


Sans succès... C'est peut-être pour les ckeckbox...

Cordialement

omlaly · Answer

Au fait, le traitement des  dans le fichier PHP c'est : 
if($civilite==""){
$erreurs[]="message d'erreur";
}


C'est peut-être là le problème ! 

Cordialement

@karamel · Answer

bonjour dans la boucle essai en mettant des accolades et aussi dans la condition


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;
}
}
}

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

4u4me4us · Answer

Note, a partir du moment ou tu sais que ton corps_enseignant[0] est le checkbox de madame que le [1] c celui de mademoiselle et que [2] vaux monsieur

tu peux faire passer ton code de 
("Vous avez choisi la proposition " + form.civilite_corps_enseignant[0].value

à
("Vous avez choisi la proposition madame")

tu as besoin de l'info plus tard alors utiliser une variable

var personne;
if (form.civilite_corps_enseignant[0].checked)personne="madame";

En ce qui concerne ta question pur je ne vois pas vraiment pr quoi il affiche undefini regarde sur le net.

omlaly · Answer

Ce code JAVASCRIPT :   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;
                   } est temporaire.

Je souhaiterai sauvegarder le choix de l'utilisateur en SQL et c'est là qu'à la place du choix, il me met "undefined".

A noter que dans le formulaire, je mets onsubmit="signin_inscription_personne(this.civilite_corps_enseignant.value,this.nom_corps_enseignant.value);return false".

Voici la fonction (simplifiée) JAVASCRIPT :

function signin_inscription_etablissement(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','../page.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_personne').innerHTML='';		
}else{
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+');
}


Cette fonction marche très bien avec les champs texte mais pas avec les boutons radios. Pour les boutons radios, ça me met "undefined"

Dans le fichier page.php, j'ai mis pour vérifier ce qu'il reçoit du bouton radio et c'est là qu'il me met "undefined" :

$civilite_corps_enseignant = $_POST["civilite_corps_enseignant"];
echo $civilite_corps_enseignant;


Voici la requête (simplifiée) SQL INSERT INTO :

$query_inscription_personne = mysql_query("INSERT INTO table (civilite_utilisateur, nom_utilisateur, prenom_utilisateur) VALUES('$civilite_corps_enseignant','$nom_corps_enseignant','$prenom_corps_enseignant)or die ('Erreur lors de l\'inscription de personne'.mysql_error()); // Envoie une requête à un serveur MySQL


C'est là le problème : il voit toutes les valeurs saisies sauf le choix du bouton radio ($civilite_corps_enseignant) où, à la place, il me met 'undefined'.

Cordialement

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

10 réponses

Votre réponse

Discussions similaires