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

Signaler
-
Messages postés
14
Date d'inscription
samedi 5 juin 2010
Statut
Membre
Dernière intervention
7 septembre 2013
-
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

10 réponses

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
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
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
24 juillet 2021
132
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;
}
}
}
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
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
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
Bonjour,

J'ai une autre question :
Comment sauvegarder le choix d'un
 en SQL ?

Quand j'essaye, il me met
undefined
.

Cordialement
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
Messages postés
781
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
30 octobre 2013
3
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.
Messages postés
14
Date d'inscription
samedi 5 juin 2010
Statut
Membre
Dernière intervention
7 septembre 2013

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