Une fonction pour onchange
RésoluNdediop Messages postés 113 Statut Membre -
J'ai un formulaire et je dois taper un identifiant et ce dernier se rafraichisse du coups j'aimerais savoir si le syntaxe de JS que j'ai fait c'est le bon pour faire marcher le Onchange sur mon select.
Merci d'avance!
Cordialement,
// changement d'identifiant pour charger les informations
$(document).on('change', '#identuser', function(e){
var form=$("#identuser").val();
lien="pages/php/"+$(form).attr("action"),
myData=$("#identuser :change").serializeArray();
myData[myData.length] = { name: "act", value: "change" };
myData[myData.length] = { name: "type", value: "i" };
myData[myData.length] = { name: "put", value: "identifiant" };
$.ajax({
type: "POST",
url: lien,
cache: false,
async: true,
data: myData,
success: function (info) {
var param = info.split('*'),
num = parseInt(param[0]);
switch(num) {
case 1:
$('#nomajoutuser').val(param[1]);
$('#identuser').val(param[2]);
$('#prenomajoutuser').val(param[3]);
$('#passworduser').val(param[4]);
$('#typeuser').val(param[5]);
$('#mailajoutuser').val(param[8]);
if(param[9] == "M"){
$("#sexmuser").prop('checked', true);
}else{
$("#sexfuser").prop('checked', true);
}
$('#telfajoutuser').val(param[10]);
$('#telpajoutuser').val(param[11]);
if($("#typeuser").val() == "M" || $("#typeuser").val() == "G"){
$("#zonepuser").prop('disabled', false);
$('#zonepuser').val(param[6]+" - "+param[7]);
$("#autrezoneauser").prop('disabled', false);
$("#autrezonebuser").prop('disabled', false);
if(param[12] == true){
if(param[13] == 0){
$('#autrezoneauser').val("pas de zone");
}else{
$('#autrezoneauser').val(param[13]);
}
if(param[14] == 0){
$('#autrezonebuser').val("pas de zone");
}else{
$('#autrezonebuser').val(param[14]);
}
}else{
$('#autrezoneauser').val("pas de zone");
$('#autrezonebuser').val("pas de zone");
}
}else{
$("#zonepuser").prop('disabled', true);
$("#zonepuser").attr("placeholder", "");
$("#zonepuser").val("");
$("#autrezoneauser").prop('disabled', true);
$("#autrezoneauser").attr("placeholder", "");
$("#autrezoneauser").val("");
$("#autrezonebuser").prop('disabled', true);
$("#autrezonebuser").attr("placeholder", "");
$("#autrezonebuser").val("");
}
break;
default:
// on fais rien
}
},
error: function () {
alert ("ERREUR : Page Web inaccessible \n\n Reessayer !");
}
});
}
});
HTML
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label> Identifiant<sup>*</sup> :</label>
<select name="identuser" id="identuser">
';
$requete="SELECT pseudo_user FROM users";
$resultats= $bdd_connection->query($requete); // liste de identifiants des utilisateurs
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">'.$ligne[0].'</option>';
}
echo'
</select>
</div>
</div>
</div><!-- /.col -->
9 réponses
La discussion porte sur l'utilisation de l'événement onchange sur un élément select pour charger des informations d'un identifiant via AJAX et mettre à jour le formulaire en fonction des données retournées. Des éléments essentiels consistent à attacher correctement l'écouteur via l'expression actuelle $(document).on('change', '#identuser', function(){...}) et à vérifier que jQuery est bien chargé avant d'exécuter le script pour éviter l'erreur 'ReferenceError: $ is not defined'. D'autres conseils recommandent de tester directement dans la console du navigateur, d'observer les retours JSON, et d'aligner la transmission des données côté client et le traitement côté serveur pour éviter les incohérences. Une touche utile précise que la fonction peut varier selon l'identifiant ciblé et la charge des informations, et qu'il peut être nécessaire de rafraîchir uniquement certaines valeurs du formulaire sans tout recharger.
<?php
session_start();
?>
<?php
require('../../bd_connect.php');
echo'
<!-- Contenu -->
<br/>
<section class="content" style="margin-top: -20px;">
<!-- *********************************** formulaires de gestion *********************************** -->
<div class="col-md-8">
<!-- *********************************** Ajouter un Compte *********************************** -->
<div class="row">
<div class="col-md-13">
<!-- TABLE: LATEST ORDERS -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"> Modifier / Supprimer un Compte</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool openinsert"><i class="fa fa-plus"></i></button>
</div>
</div><!-- /.box-header -->
<!-- ******* colonne Gauche ******** -->
<form id="ajoutuser" method="post" action="ajoutuser.php">
<div class="box-body" style="display: none;">
<div class="row">
<!--<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label> Nom<sup>*</sup> :</label>
<input list="nomajoutuser_list" name="nomajoutuser" id="nomajoutuser" class="form-control" type="text" placeholder="Ex : "></input>
<datalist id="nomajoutuser_list">';
$requete="SELECT DISTINCT nom_user FROM users";
$resultats= $bdd_connection->query($requete); // liste de noms utilisateurs
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">';
}
echo'</datalist>-->
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label> Identifiantuser<sup>*</sup> :</label>
<select name="testidentuser" id="testidentuser">
';
$requete="SELECT pseudo_user FROM users";
$resultats= $bdd_connection->query($requete); // liste de identifiants des utilisateurs
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">'.$ligne[0].'</option>';
}
echo'
</select>
</div>
</div>
</div><!-- /.col -->
<fieldset class="cont-info">
<legend class="cont-info-legend">
Informations correspondantes:
</legend>
<div class="colon_form">
<div class="form-group">
<label> Service<sup>*</sup> :</label>
<select name="intextuser" id="interexter" class="form-control" >
<option value="1"> Interne </option>
<option value="2"> Externe </option>
</select>
</div>
<div class="form-group">
<label> Nom<sup>*</sup> : </label>
<input name="nomajoutuser" id="nomajoutuser" class="form-control" type="text" placeholder="Ex : pate"></input>
</div>
<div class="form-group">
<label>Identifiant<sup>*</sup> : </label>
<input list="idajoutuser_list" name="identuser" id="identuser" class="form-control" type="text" placeholder="Ex : kkkk1111"></input>
<datalist id="idajoutuser_list">';
$requete="SELECT DISTINCT pseudo_user FROM users";
$resultats= $bdd_connection->query($requete); // liste de id utilisateur
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Type Utilisateur<sup>*</sup> :</label>
<select name="typeuser" id="typeuser" class="form-control" >
<option value="rien"> Profile Utilisateur </option>
<option value="D"> Admin </option>
<option value="P"> Prog </option>
<option value="N"> In</option>
<option value="V"> Vi </option>
</select>
</div>
<div class="form-group">
<label> zone principal<sup>*</sup> : </label>
<input name="zonepuser" id="zonepuser" list="zoneprin_list" class="form-control" type="text" placeholder="Ex : "></input>
<datalist id="zoneprin_list">';
$requete="SELECT id_zone,zone FROM zones";
$resultats= $bdd_connection->query($requete); // liste du choix de service
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].' - '.$ligne[1].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Mail<sup>*</sup> : </label>
<input list="mailajoutuser_list" name="mailajoutuser" id="mailajoutuser" class="form-control" type="text" placeholder="Ex : exemple@hotmail.fr"></input>
<datalist id="mailajoutuser_list">';
$requete="SELECT mail_user FROM users";
$resultats= $bdd_connection->query($requete); // liste de id utilisateur
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Tel-Fix: </label>
<input name="telfajoutuser" id="telfajoutuser" class="form-control" type="text" placeholder="Ex : "></input>
</div>
</div><!-- /.colon div -->
<!-- ******* colone Droite ******** -->
<div class="colon_form pull-right">
<div class="form-group">
<label> </label>
<input name="serviceuser" id="serviceuser" list="service_list" value="I" class="form-control" type="text"></input>
<datalist id="service_list">';
$requete="SELECT DISTINCT nom_service FROM services";
$resultats= $bdd_connection->query($requete); // liste des services existant
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Prenom<sup>*</sup> : </label>
<input name="prenomajoutuser" id="prenomajoutuser" class="form-control" type="text" placeholder="Ex : Alexendre"></input>
</div>
<div class="form-group">
<label> Password <sup>*</sup>: </label>
<input name="passworduser" id="passworduser" class="form-control" type="password" ></input>
</div>
<div class="form-group">
<label> Autre Zone :</label>
<input name="autrezoneauser" id="autrezoneauser" list="autrezonea_list" class="form-control" type="text" placeholder="Ex : "></input>
<datalist id="autrezonea_list">';
$requete="SELECT id_zone,zone FROM zones";
$resultats= $bdd_connection->query($requete); // liste du choix de service
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].' - '.$ligne[1].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Autre Zone :</label>
<input name="autrezonebuser" id="autrezonebuser" list="autrezoneb_list" class="form-control" type="text" placeholder="Ex : "></input>
<datalist id="autrezoneb_list">';
$requete="SELECT id_zone,zone FROM zones";
$resultats= $bdd_connection->query($requete); // liste du choix de service
while($ligne = $resultats->fetch()){
echo'<option value="'.$ligne[0].' - '.$ligne[1].'">';
}
echo'</datalist>
</div>
<div class="form-group">
<label> Sex<sup>*</sup>: </label>
<div class="radio">
<label>
<input name="sexuser" id="sexmuser" type="radio" value="M"></input>
Masculin
</label>
<label>
<input name="sexuser" id="sexfuser" type="radio" value="F"></input>
Féminin
</label>
</div>
</div>
<div class="form-group">
<label> Tel-Por : </label>
<input name="telpajoutuser" id="telpajoutuser" class="form-control" type="text"></input>
</div>
</div><!-- /.colon div -->
</fieldset>
<div class="box-footer clearfix" style="display: block;">
<!--<button id="ajoutuserbt" type="button" onclick="compteADD()" class="btn btn-sm btn pull-right">
<i class="fa fa-plus-circle"></i> Ajouter
</button>-->
<button type="reset" class="btn btn-sm btn-orange-gray pull-left">
<i class="fa fa-refresh"></i> Réinitial
</button>
<button type="button" onclick="compteSUP()" class="btn btn-sm btn-gray pull-left">
<i class="fa fa-times-circle"></i> Supprime
</button>
<button type="button" onclick="compteMOD()" class="btn btn-sm btn-orange-gray pull-left">
<i class="fa fa-edit"></i> Modifier
</button>
</div><!-- /.box-footer -->
</div><!-- /.box-body -->
</form>
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.col -->
?>
la page am_js.php là ou j'ai mis chargé le jQuery mais j'ai inclus cette page dans une autre page qui s'appelle am.php
<!-- jQuery 2.1.3 -->
<script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
Es-tu sûr qu'il est chargé ???
Comment est chargé ta page (celle du code que tu nous montres) ? Via un include ? depuis quel fichier ?
Une chose est sûr ... vu le message d'erreur que tu rencontres ... soit tu as des erreurs dans les différents scripts de ta page .. soit (c'est bien souvent ça ...) jquery n'est pas chargé !
Pour le vérifier .. tu n'as qu'à mettre ces quelques lignes dans ton code (au début de celui-ci )
<script type='text/javascript'>
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
</script>
Merci Jordan pour la réponse mais j'ai une autre question aussi, en fait je parviens à modifier ma page PHP en fonction des champs que je dois afficher du coups j'ai essayé avec un numéro de téléphone sur ma page JS, j'ai réussi à l'afficher sur le formulaire mais pour que ça vient directement de la requête que j'ai mis sur ma page PHP comment vais-je faire, je mets ligne[0] ou param[0] pour récupérer les valeurs?
Voici mon js avec l'affichage du numéro de téléphone:
$(document).on('change', '#testidentuser', function(e){
if($("#interexter").val() == 1){
var form = "#ajoutuser",
lien="pages/php/"+$(form).attr("action"),
myData=$("#ajoutuser :input").serializeArray();
myData[myData.length] = { name: "act", value: "change" };
myData[myData.length] = { name: "type", value: "psip" };
myData[myData.length] = { name: "put", value: "identifiantuser" };
$.ajax({
type: "POST",
url: lien,
data: myData,
success: function (info){
var param = info.split('*');
num = parseInt(param[0]);
$('#telfajoutuser').val('320568902');
},
error: function () {
alert ("ERREUR : Page Web inaccessible \n\n Reessayer !");
}
});
}
});
.
Je souhaiterais savoir comment on récupère les informations d'un formulaire sur javascript avec onchange.
Merci d'avance!
Cordialement,
https://forums.commentcamarche.net/forum/affich-34551677-une-fonction-pour-onchange#1
Et pour la valeur selectionnée :
$( '#identuser').val();
Mais peut-être ai-je mal compris la question ......
if($("#typeuser").val() == "ADM" || $("#typeuser").val() == "PGM"){.
<?php
//------------------------------------------------------------------
//activation affichage des erreurs
//------------------------------------------------------------------
error_reporting(E_ALL);
ini_set('display-errors','on');
session_start();
//------------------------------------------------------------------
//récupération PROPRE des variables AVANT de les utiliser
//------------------------------------------------------------------
$act = !empty($_POST['act']) ? $_POST['act'] : NULL;
$put = !empty($_POST['put']) ? $_POST['put'] : NULL;
//initialisation de la variable de retour
$msgretour = $_POST; //par défaut vaudra $_POST
if(empty($bdd_connection)){
$msgretour = "Erreur .. aucune connexion à la bdd !! ";
}else{
if($act == "change" && $put == "identifiantuser"){
$msgretour = "2";
$existotherzone=false;
$zonea=0;
$zoneb=0;
$requete_otheruserzone = "SELECT other_zone_user FROM users WHERE pseudo_user = '".$testidentuser."'";
$useriotherzone= $bdd_connection->query($requete_otheruserzone);
while(($enrejis = $useriotherzone->fetch())){
if($enrejis[0] != 1){
$existotherzone=true;
$autreszones = explode(";", $enrejis[0]);
$requete_zonea = "SELECT id_zone,zone FROM zones WHERE id_zone = '".$autreszones[0]."'";
$zonesa= $bdd_connection->query($requete_zonea);
while(($enreja = $zonesa->fetch())){
$zonea=$enreja[0]." - ".$enreja[1];
}
$requete_zoneb = "SELECT id_zone,zone FROM zones WHERE id_zone = '".$autreszones[1]."'";
$zonesb= $bdd_connection->query($requete_zoneb);
while(($enrejb = $zonesb->fetch())){
$zoneb=$enrejb[0]." - ".$enrejb[1];
}
}
}
$requete_userzone = "SELECT zone_user FROM users WHERE pseudo_user = '".$testidentuser."'";
$userizone= $bdd_connection->query($requete_userzone);
while(($enrej = $userizone->fetch())){
$requete_user = "SELECT nom_user,prenom_user,passwd_user,type_user,zone_user,zone,mail_user,sex_user,tel_user,telp_user, pseudo_user FROM users,zones WHERE pseudo_user = '".$testidentuser."' AND zone_user = id_zone";
$useri= $bdd_connection->query($requete_user);
while(($ligne = $useri->fetch())){
$result[] = $ligne;
}
$msgretour = $result;
}
}
}
echo json_encode($msgretour);
?>
et coté JS
$('#testidentuser').on('change', function(e){
if($("#interexter").val() == 1){
var form = "#ajoutuser",
lien="pages/php/"+$(form).attr("action"),
myData=$("#ajoutuser :input").serializeArray();
myData[myData.length] = { name: "act", value: "change" };
myData[myData.length] = { name: "type", value: "p" };
myData[myData.length] = { name: "put", value: "identifiantuser" };
console.log('myData : ');
console.log(myData);
$.ajax({
type: "POST",
url: lien,
data: myData,
dataType: "json",
async: true,
success: function (info){
console.log(param);
var param = info.split('*');
num = parseInt(param[0]);
},
error: function (errorMsg) {
console.log(errorMsg);
alert ("ERREUR : Page Web inaccessible \n\n Reessayer !");
}
});
}
});
Explications disponibles ici :</souligne> https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
$('#testidentuser').on('change', function(e){
if($("#interexter").val() == 1){
var form = "#ajoutuser",
lien="pages/php/"+$(form).attr("action"),
myData=$("#ajoutuser :input").serializeArray();
myData[myData.length] = { name: "act", value: "change" };
myData[myData.length] = { name: "type", value: "p" };
myData[myData.length] = { name: "put", value: "identifiantuser" };
console.log('myData : ');
console.log(myData);
$.ajax({
type: "POST",
url: lien,
data: myData,
dataType: "json",
async: true,
success: function (info){
console.log("resultat de l'ajax :");
console.log(info);
$.each(info, function(index,datas) {
console.log("index :" + index);
console.log(datas);
});
},
error: function (errorMsg) {
console.log(errorMsg);
alert ("ERREUR : Page Web inaccessible \n\n Reessayer !");
}
});
}
});
Teste ça et dis nous (voir même .. fais une capture écran) de ce que tu obtiens dans la console de ton navigateur. ( je te conseille d'utiliser firebug pour Firefox ).
NB : Il faudra cliquer sur les [object]si tu en as pour en voir le contenu .....
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionPeux tu ... une bonne fois pour toutes ..... UTILISER LA CONSOLE DE TON NAVIGATEUR ( celle de firefox via Firebug ou celle de Chrome après avoir installé le debugger Ajax ) ... et me dire ce que te retourne EXACTEMENT le résultat de l'appel ajax ??!!
Le
console.log(errorMsg);devrait t'afficher quelquechose .... QUOI ???




Ou via les syntaxes que je t'ai donné avant .... à toi de voir.
Merci d'avance!
Ca : chargerInfo() c'est ta fonction
Ca : $(document).on('change', '#identuser', function(e){ c'est le code qui permet d'attacher cette fonction au "onchange" de ton select.
Que tu peux éventuellement remplacer par les codes que je t'ai donné avant.
Pour ce qui est de la syntaxe de ton code ... pas le temps de regarder ! Par contre... en te servant de la CONSOLE de ton navigateur tu devrais voir si il y a des erreurs ou non....