11521 sujets

JavaScript, DOM et API Web HTML5

Formulaire plusieurs combobox simple sans recharge page

bonjour

je suis nouveau sur le site et à 70 ans je me suis lancé dans la programmation pour les besoins d'association
si pour le php j'ai réussi à mettre au point les applications de gestion des adhérents
en JS je suis complétement sec
problème: j'ai des formulaires avec plusieurs combobox simples ( non imbriquées)

j'ai trouvé une appli tés sympa et simple sur Smiley url http://jsfiddle.net/ivkremer/qp6vg/[/url]
Mais je n'arrive pas à trouver la solution pour récupérer l'id du coix des combo dans une variable php dans le but de faire l'enregistrement dans la base de données.

simple pour la majorité d'entre vous mais par pour moi
voici le code merci d'avance pour votre aide


<!doctype html>
<!------------------------------------------------------------------->
<!--source -->
<!--http://jsfiddle.net/ivkremer/qp6vg/ -->
<!------------------------------------------------------------------->

<html lang="fr">
<head>
    <title>Simple Combobox Description</title>
    <link href="css/jquery.scombobox.css" rel="stylesheet" />
    <script src="js/missed.js"></script><!-- add this script for IE8 compatibility -->
    <script src="js/latinize.js"></script><!-- add this to use filterIgnoreAccents option (convert M?vész to Muvesz) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--<script src="js/jquery-1.10.1.min.js"></script>-->
    <script src="js/jquery.scombobox.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
</head>
<body>
<!--body {
    padding: 23px 0 0 0;
    font-family: Arial, 'sans-serif';
    font-size: 90%;
    color: #333;
    background: #FAFAFA;
}
-->
<!--  méthode et les options de tri de l'utilisation des options de Cet exemple montre.

    Lors de l'utilisation des éléments de choix  le tri repose
    sur la propriété « text ». Donc, vous devez fournir un texte correspondant
    pour avoir vos listes de choix correctement triées.

    Les options sont individuelles et reliées par cas particulier.
    Dans ce cas, tous les trois comboboxes utilisent les mêmes options
    Après l'initialisation (par défaut).
    Mais différentes comboboxes obtenir différentes options et ainsi
    travailler d'une manière différente.
-->

<div style="display: none">	</div>
<label>&nbsp;&nbsp;&nbsp; adhésion </label> <div id="combo-1" class="combo"></div>
<label>&nbsp;&nbsp;&nbsp;Antenne attachement </label> <div id="combo-2" class="combo"></div>
<label>&nbsp;&nbsp;&nbsp;Type réglement </label><div id="combo-3" class="combo"></div>

<script>
$('.combo').scombobox();

$('#combo-1').scombobox('fill', [
    {value: '0', text: '--- votre choix ---'},
    {value: '1', text: '1-Adhésion simple accés BdD'},
    {value: '2', text: '2-Adhésion accés BdD avec Axona internet'},
    {value: '3', text: '3-Adhésion accés BdD avec Axona internet et papier'},
    {text: 'option 0200', separator: true, header: 'Header item'}
]);

$('#combo-2').scombobox('options', { sort: false });
$('#combo-2').scombobox('fill', [
    {value: '0', text: '--- votre choix ---'},
    {value: '1', text: '1- Antenne de Soissons'},
    {value: '2', text: '2- Antenne Château Thierry'},
    {value: '3', text: '3- Antenne Villers-Côtterets'},
	{value: '3', text: '4- Antenne Haut de France Bohain'},
	{value: '3', text: '5- Paris'},
    {text: 'option 0200', separator: true, header: 'Header item'}
]);


$('#combo-3').scombobox('options', { sort: false });
$('#combo-3').scombobox('fill', [
	{value: '0', text: '--- votre choix ---'},
    {value: '1', text: '1- Réglement PayPal'},
    {value: '2', text: '2- Réglement Chéque Bancaire'},
    {value: '3', text: '3- Réglement Virement'},
    {value: '4', text: '4- Réglement Espéces'},
    {text: 'option 0200', separator: true, header: 'Header item'}
]);

</script>
claude77 a écrit :
je suis nouveau sur le site et à 70 ans je me suis lancé dans la programmation [...]

Désolé, ce n'est que pour les jeunes ici !

XD, je plaisante, bienvenu sur le forum.

J'ai plusieurs questions sur ton code :
- Pourquoi décider de remplir tes select dans le JS ?
- Pourquoi ce plugin là précisément ? Parce que pour tout te dire, la doc n'est pas très prolixe (je n'ai pas réussi à trouver les options)

Enfin pour commencer à répondre à ta question, eh bien, c'est le bordel... Smiley biggrin
J'ai vite fait des tests sur jsFiddle, et le problème c'est que de la manière dont c'est rempli ici, les <select> n'ont pas de name, donc pour la récupération en PHP, c'est pas top (sauf en passant par du JS, mais bof).

NB : la meta d'encodage de ta page peut être simplifier en <meta charset="UTF-8"> en html5 (d'après ton doctype) mais surtout elle doit être la première balise dans ton <head>
Modérateur
SolidSnake a écrit :

J'ai vite fait des tests sur jsFiddle, et le problème c'est que de la manière dont c'est rempli ici, les &lt;select&gt; n'ont pas de name, donc pour la récupération en PHP, c'est pas top (sauf en passant par du JS, mais bof).

Bonjour,

j'ai jeté un coup d’œil au plugin et rien ne permet de donner un name ni au select ni aux inputs hidden (qui semblent redondants). Ce plugin semble en effet pas terrible et il vaudrait mieux s'en passer.

Pourquoi pas de simples selects? Ou sinon il existe une foultitude d'autres plugins plus aboutis.
Hmmmm.... en faite ton plugin va générer ta balise select qui n'a pas de name dans une balise <div> portant l'id que tu aura mis dans ton javascript. donc si je code : 

document.getElementById('combo-1').firstChild.value


devrait te donner la valeur selectionner de combo-1.
Modifié par JENCAL (28 Jun 2017 - 14:29)
Merci à tous pour avoir pris le temps de regarder

mon problème est que j'ai 5 ou 6 combo dans mon formulaire, donc je ne peux pas recharger la page, sans quoi mes résultats des précédentes sont effacés
c'est vrai, que la docs est insuffisante pour comprendre qque chose
je ne suis pas marié avec ce plugin, si vous avez une autre solution je suis preneur les bras ouvert car je cherche sur le net depuis plusieurs semaines sans rien trouver .

Jencal --> je la mets ou la ligne ?? peux tu me mettre la ligne d'avant et la ligne d’après SVP
kustolovic --> le problème est qu'au final je voudrais charger les combos à partir d'une table donc sans rechargement de la page -- eh oui à mon age il faut penser au successeur qui ne pourras peut être pas faire la modif des options en modifiant le script .. Smiley confus si tu as des liens de plugins plus abouti je suis preneur
SolidSnake --> c'est idiot un plugin ou l'on ne peut pas récupérer le résultat pour le html5 j'ai modifié.

merci de votre aide
J'ai repris ton code et ajouté quelques éléments pour illustrer comment récupérer simplement les valeurs des combos:
Ajoute un bouton pour valider ta saisie :
<button type='button' id='valider'>Valider</button>


dans le <script> ajouter la gestion du "click" sur le bouton ainsi que la fonction de récupération et d'envoie des données vers le serveur avec Ajax


$("#valider").on("click", function() {
    getComboValues();
});

function getComboValues() {
    var dataCombo= {};
    var i=0;
    //Récupération des données des combos
    $("body").find(".scombobox-value").each( function() {
        dataCombo['combo_'+i]=$(this).val();
        i++;
    });
    //Transformation en chaîne json
    var jsonDataCombo=JSON.stringify(dataCombo);
    
    //Transmission avec Ajax au serveur
    //et affichage de la réponse du serveur 
    $.post("traiterCombos.php",{'jsonDataCombo':jsonDataCombo}, function(data) { $("body").append(data); });
    
}


Du côté du serveur il faut gérer la réception des données :
créer "traiterCombos.php":

<?php

//Transformation de la chaîne json en objet
$dataCombos=json_decode($_POST['jsonDataCombo']);

//Parcours des attributs et envoi des infos en retour (echo)
echo "<br> 1ère syntaxe :";
foreach($dataCombos as $combo=>$data) {
    echo "<br/>".$combo." = ".$data;
}
//Ou encore avec cette syntaxe
echo "<br> autre syntaxe :";
echo "<br/>combo 0 : ".$dataCombos->combo_0;
echo "<br/>combo 1 : ".$dataCombos->combo_1;
echo "<br/>combo 2 : ".$dataCombos->combo_2;
?>


De cette façon tu as créé un objet ($dataCombos) avec pour attribut combo_0, combo_1 etc...
que tu peux utiliser à ta guise côté serveur...

Bonne journée
Bonjour et merci pour le script que je vais essayer de comprendre en début de de semaine prochaine car les petits enfants viennent d'arriver
bon WE et merci pour ta contribution Smiley cligne
Sujet clos
Aller à