Récupérer le contenu d'un object avec ddslick

Version imprimable

30/07/2020, 09h46
Mvu

Récupérer le contenu d'un object avec ddslick

Bonjour,

J'essaie de récupérer le contenu d'un objet dans un formulaire via le plugin ddSlick. Si vous allez sur http://www.mycabinet.be vous pouvez voir le problème.Je suis pas calé du tout en Javascript mais on ne doit pas être loin de la solution. Merci d'avance.

Bonjour,
tu as une erreur ligne 8 :

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    $('#DropdownCompteurs').ddslick({
        data: ddData,
        width: 300,
        selectText: "Choix du débord",
        imagePosition: "right",
        onSelected: function (selectedData) {
            document.forms['value'].submit();  // ERREUR ici 
        }
    });
});

regarde dan la console, touche F12 !

J'allais oublier, ton code HTML est non conforme, plusieurs <html>, <head>.

30/07/2020, 10h32
Mvu

Ok pour ce qui concerne l'erreur , je devais remplacer 'value' par le name du form. C'est fait. Maintenant lorsque je sélectionne une option, il charge la page Developpez_ddSlick_Recuperation.asp. Mais toujours sans récupération de la valeur.
Ce que je cherche à faire c'est:
- Récupérer la valeur de value depuis var ddData = [...]
- Et que ce soit le bouton <input type="submit" class="btn btn-secondary btn-sm" value="Submit"> qui déclenche l'envoi du formulaire car une fois le problème résolu, je voudrais inclure mon ddSlick dans un formulaire HTML et donc utiliser le bouton HTML submit.

Regarde ce qui se passe lorsque tu fais un changement de sélection dans ta liste
Code:

1 2 3 4 onSelected: function(selectedData){ console.log(selectedData); // tu devrais trouver ta vie // }

Ben j'ai pas d'erreur et rien dans le log.
Mon code actuel est le suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
		<script>
			$(document).ready(function() {
				$('#DropdownCompteurs').ddslick({
					data:ddData,
					width:300,
					selectText: "Choix du débord",
					imagePosition:"right",
					onSelected: function(selectedData){
						console.log(selectedData);
						document.forms['value'];
						document.forms['Project_Name'].submit();
					}   
				});
			});

Pour commencer il te faut un élément dans ton <form> ayant un name pour que celui-ci soit envoyé à la soumission.

Code:

1
2
3
4
5
6
<form method="POST" name="formulaire"  action="action.php">
  <input type="hidden" name="data">
  <!--
  la suite
  -->
</form>

ensuite le code JavaScript devient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function () {
  $('#DropdownCompteurs').ddslick({
    data: ddData,
    width: 300,
    selectText: "Choix du débord",
    imagePosition: "right",
    onSelected: function (data) {
      console.log(datas.selectedData);
      $("[name=data]").val(data.selectedData.value);
      $("[name=formulaire]").submit();
    }
  });
});

Magnifique. Il y avait juste une erreur de frappe sur la ligne console.log(datas.selectedData);.
Super. Grand merci.
Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form method="post" role="form" class="form-group" name="Project_Name"  action="Developpez_ddSlick_Recuperation.asp">
<select id="DropdownCompteurs">
			<script>
                                $(document).ready(function () {
                                  $('#DropdownCompteurs').ddslick({
                                        data: ddData,
                                        width: 300,
                                        selectText: "Choix du débord",
                                        imagePosition: "right",
                                        onSelected: function (data) {
                                          console.log(data.selectedData);
                                          $("[name=data]").val(data.selectedData.value);
                                          $("[name=formulaire]").submit();
                                        }
                                  });
                                });
                </script>
</select>
<input textarea name="data" type="hidden" ></input>	
<div>
<br>
<input type="submit" class="btn btn-secondary btn-sm" value="Submit">