WEB - formulaire

Résolu

juliendu51100 Messages postés 487 Statut Membre -
juliendu51100 Messages postés 487 Statut Membre - 3 févr. 2019 à 21:40

Bonjour, je viens vers vous car je suis actuellement en train de réaliser un site intranet d'affichage dynamique. Et je suis un peu ce que l'on appellerais être bloquer.. Je suis actuellement sur la création d'un formulaire qui est composer de : nom de la diapo, date et heure du début de publication, date et heure de fin de publication, le type de diapo (type d'affichage) et juste après c'est la que cela se complique car une fois le type choisis il devrais avoir "choisir un champs" et des bouton nommée "texte", "image", "vidéo" et "pdf" qui doivent apparaitre a chaque fois que l'utilisateur tape sur l'un bouton une balise <input /> devrais être générer suivant la demande mais suivant le type choisis un certain nombre de champs pourrons être choisis au maximum. Je m'explique si le type choisi permet de choisir a "deux points" ont peux choisir deux champ quelque soit lequel même si ce sont les même.
Une fois le bouton du champs est apparue le champs en question doit être créer..
Pourvais vous me guider ? Merci a vous :)

Afficher la suite

7 réponses

Réponse 1 / 7

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour
Je n'ai pas tout compris... Mais visiblement tu veix creer des champs dynamiquement.
Pour ca tu dois passer par du js.
2
1. juliendu51100 Messages postés 487 Statut Membre 6
  
  merci pour ta réponse je vais me renseigner de suite :)
  
  0
Réponse 2 / 7
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
je recherche un moyen de parcourir les différentes div afin de trouver celle qui est vide

Il te suffit de faire une boucle sur tes div et de vérifier si elles contiennent quelquechose ou non via le
```
var children = document.getElementById("cible0");
for( var i = 0; i<children.lengtth; i++){
    if( children[i].innerHTML === ""){
      alert("la div " + children[i].id + " est vide !");
     }
}
```
1
1. juliendu51100 Messages postés 487 Statut Membre 6
  
  Merci ! beaucoup je vais l'ajouter au code tout de suite :)
  
  0

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bon....
Voila ton code fonctionnel.
ce n'est pas très propre mais j'ai gardé ta façon de faire :

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
  <style>
    .newdiv{
      min-height:80px;
      min-width:80px;
      background-color:#136497;
      border :1px solid black;
    }
  </style>
</head>
<body>
	<h1>test de création d'une div</h1>
	<label class="bmd-label-floating">type de diapo : </label>
	<input type="radio" name="type" value="1" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="1">1</label>
	<input type="radio" name="type" value="2" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="2">2</label>
  <input type="radio" name="type" value="3" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="3">3</label>
	<br /><br />
	<input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
	<input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
	<input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
	<div id="cible0"></div>
  
	<script type="text/javascript">  

var cible0 = document.getElementById("cible0");
var deja_passer = null;
var id = '00';
var id_bis = '0';		



function get_div_id(){
  var childrens = cible0.children;
  var nbEnfants = childrens.length;
  console.log("nbEnfants",nbEnfants);
  if (nbEnfants > 0) {
    for( var i = 0; i < nbEnfants ; i++)
    {
        alert("Voici un tour de la boucle !");
        if( childrens[i].innerHTML == "")
        {
          alert("la div " + childrens[i].id + " est vide !");
          return childrens[i].id;
        }
      }
  }else{
    console.log("Aucun enfant dans la div cible0");  
  }
  return false;
}


function fabriquer_un_input(choix)
{
  console.log('fabriquer_un_input('+ choix +')');
  
  var childrens = document.getElementById("cible0");
	var newInp = document.createElement('input');
	if (deja_passer != true) 	{
		window.alert("Merci de choisir un type de diapo.");
	} else {
		var id = get_div_id(); 
    if(typeof(id)!='undefined' && id!=null){
   
     newInp = document.createElement('input');
     newInp.classList.add("mystyle");
     newInp.id = id;
     newInp.name = 'inp_11';
     newInp.type = choix;
     console.log('cible : ',id);
     var el = document.getElementById(id);
     el.appendChild(newInp);
   }
  }
}

		function fabrique_une_div(nombre_de_champs) 
		{
      console.log('fabrique_une_div');
			if (deja_passer == true){
				cible0.innerHTML = ""; // on vide la div
				deja_passer = false;
			}
			
			for (var i = 0; i < nombre_de_champs; i++) 
			{
        // fabrique une div 
        var div = document.createElement("div");
        // Ajoute une classe ࡣette brique pour lui donner un style via CSS
        div.setAttribute('id','div_'+i);
        div.setAttribute('class','newdiv');
        // Ajoute un contenu ࡣette brique...
        // uneBrique.innerHTML = i+1;

        // Ins곥 cette div dans la div cible0 
        cible0.appendChild(div);
    }
  deja_passer = true;
}	

</script>
</body>
</html>

juliendu51100 Messages postés 487 Statut Membre 6

merci ! je vais regarder de suite !

Edit : tous est bon merci beaucoup pour ton aide :)
0

juliendu51100 Messages postés 487 Statut Membre 6

je me permet de joindre ce code qui permet de supprimer les inputs. :)

<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <meta charset="utf-8">
 <style>
 .newdiv{
  min-height:80px;
  min-width:80px;
  background-color:#136497;
  border :1px solid black;
 }
</style>
</head>
<body>
 <h1>test de création d'une div</h1>
 <label class="bmd-label-floating">type de diapo : </label>
 <input type="radio" name="type" value="1" onclick="fabrique_une_div(this.value)" required /> <label for="1">1</label>
 <input type="radio" name="type" value="2" onclick="fabrique_une_div(this.value)" required /> <label for="2">2</label>
 <input type="radio" name="type" value="3" onclick="fabrique_une_div(this.value)" required /> <label for="3">3</label>
 <input type="radio" name="type" value="4" onclick="fabrique_une_div(this.value)" required /> <label for="4">4</label>
 <br /><br />
 <input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
 <input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
 <input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
 <input type="button" name="vide" value="vide" onclick="fabriquer_un_input('hidden')">
 <div id="cible0"></div>

 <script type="text/javascript">  

  var cible0 = document.getElementById("cible0");
  var deja_passer = null;
  var id = '00';
  var id_bis = '0';  



  function get_div_id()
  {
   var childrens = cible0.children;
   var nbEnfants = childrens.length;
   console.log("nbEnfants",nbEnfants);
   if (nbEnfants > 0) 
   {
    for( var i = 0; i < nbEnfants ; i++)
    {
     // alert("Voici un tour de la boucle !");
     if( childrens[i].innerHTML == "")
     {
      // alert("la div " + childrens[i].id + " est vide !");
      return childrens[i].id;
      var input=true;
     }
    }
    if (input !== true)
    {
     alert("Tous les champs sont remlis !");
    }
   }
   else
   {
    alert("Tous les champs sont remplis !");
    //console.log("Aucun enfant dans la div cible0");  
   }
   return false;
  }


  function fabriquer_un_input(choix)
  {
   console.log('fabriquer_un_input('+ choix +')');

   var childrens = document.getElementById("cible0");
   var newInp = document.createElement('input');
   if (deja_passer != true)  
   {
    window.alert("Merci de choisir un type de diapo.");
   } 
   else 
   {
    var id = get_div_id(); 
    if(typeof(id)!='undefined' && id!=null)
    {
     newInp = document.createElement('input');
     newInp.classList.add("mystyle");
     newInp.id = id;
     newInp.name = 'inp_11';
     newInp.type = choix;
     console.log('cible : ',id);
     var el = document.getElementById(id);
     el.appendChild(newInp);

     newbutton = document.createElement('input');
     newbutton.classList.add("mystyle");
     newbutton.id = id;
     newbutton.type = 'button';
     newbutton.value = 'supprimer';
     // newbutton.textContent="supprimer";
     newbutton.setAttribute("onClick","supprimer_mon_input('"+id+"')") ;
     console.log('cible : ',id);
     var el2 = document.getElementById(id);
     el2.appendChild(newbutton);
    }
   }
  }

  function fabrique_une_div(nombre_de_champs) 
  {
   console.log('fabrique_une_div');
   if (deja_passer == true){
    cible0.innerHTML = ""; // on vide la div
    deja_passer = false;
   }
   
   for (var i = 0; i < nombre_de_champs; i++) 
   {
        // fabrique une div 
        var div = document.createElement("div");
        // Ajoute une classe ࡣette brique pour lui donner un style via CSS
        div.setAttribute('id','div_'+i);
        div.setAttribute('class','newdiv');
        // Ajoute un contenu ࡣette brique...
        // uneBrique.innerHTML = i+1;

        // Ins곥 cette div dans la div cible0 
        cible0.appendChild(div);
    }
    deja_passer = true;
} 
function supprimer_mon_input(id)
{
 console.log("suppression ");

var element = document.getElementById(id); 

while (element.firstChild) 
 { 
  element.removeChild(element.firstChild);
 }
}

</script>
</body>
</html>

EDIT : Correction des balises de code .... encore ....

a voir ici pour le tester : https://codepen.io/JulienOo/pen/KJmyaj

juliendu51100 Messages postés 487 Statut Membre 6

Re-bonjour a toutes et a tous j'ai pas mal travailler a sur ce fameux formulaire cette semaine.
Voici ce que je veux faire ce formulaire vas me permettre d'afficher différents affichage sur des écrans distants suivant ce que l'utilisateur aura choisi. dans un premier temps des bouton radio sont a remplir afin de déterminer le nombre de champs. si l'utilisateur choisis le bouton "2" dans ce cas deux div vont être créer. Et c'est a partir de maintenant que je commence a bloquer.. Une fois le nombre de champs choisis je voudrais que lorsque l'utilisateur clique sur texte la première div est remplis par un input text puis il reclique sur image et un autre se créer dans le div suivant. Je tiens aussi a dire que l'utilisateur aura un bouton qui permettra de supprimer une div du coup je recherche un moyen de parcourir les différentes div afin de trouver celle qui est vide afin de lui redonner une autre div Voici sur ce que je suis arriver jusque là :

<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <meta charset="utf-8">
</head>
<body>
 <h1>test de création d'une div</h1>
 <label class="bmd-label-floating">type de diapo : </label>
 <input type="radio" name="type" value="1" id="1" onclick="fabrique_une_div()" required /> <label for="1">1</label>
 <input type="radio" name="type" value="2" id="1" onclick="fabrique_une_div()" required /> <label for="2">2</label><input type="radio" name="type" value="3" id="1" onclick="fabrique_une_div()" required /> <label for="3">3</label>
 <br /><br />
 <input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
 <input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
 <input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
 <div id="cible0"></div>
 <script type="text/javascript">

  let deja_passer = "undefined";
  var id = '00';
  var id_bis = '0';

  function fabrique_une_div() 
  {
   var cible0 = document.getElementById("cible0");

   if (deja_passer == true)
   {
    while (cible0.hasChildNodes()) 
    {
     cible0.removeChild(cible0.firstChild);
    }
    deja_passer = false;
   }
   //recupere l'attribut value de la div qui est cocher 
   var nombre_de_champs = document.querySelector('input[name="type"]:checked').value;
   
   var div;

   for (var i = 0; i < nombre_de_champs; i++) 
   {
    // fabrique une div 
    div = document.createElement("div");
    // Ajoute une classe à cette brique pour lui donner un style via CSS
    div.id = i;
    // Ajoute un contenu à cette brique...
    // uneBrique.innerHTML = i+1;

    // Insére cette div dans la div cible0 
    cible0.appendChild(div);

}
deja_passer = true;
}
function fabriquer_un_input(choix)
{
 if (deja_passer == true)
 {
  let compteur = '00';
  // compteur = compteur + 1 ;

  var el = document.getElementById('0'), elChild = document.createElement('input');

 //elChild.innerHTML = 'Content';
 elChild.classList.add("mystyle");
 elChild.id = id;
 elChild.name = '11';
 elChild.type = choix;
 
 id_bis = id.charAt(1);

el = document.getElementById(id_bis);
el.appendChild(elChild);
 // Prepend it

 // input.insertBefore(inputChild, input.firstChild);

// compteur = compteur + 1;

id = parseInt(id) + 11;
}
else
{
 window.alert("Merci de choisir un type de diapo.");
}
}
//  Lance la fonction de création de div
fabrique_une_div();

//lance la fonction de création de input
fabriquer_un_input();

</script>
</body>
</html>

Je vous invite a regarder ce que sa donne sur se lien ;) https://codepen.io/JulienOo/pen/KJmyaj

Merci a tous pour votre aide. :)

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
juliendu51100 Messages postés 487 Statut Membre 6
je reviens vers toi car j'ai un petit souci.. Après de nombreux essaie je ne parviens pas a entrer dans la boucle.. Voici comment j'ai "adapter" le code. Merci encore pour ton aide. :)
```
function fabriquer_un_input(choix)
{
 var children = document.getElementById("cible0");


 for( var i = 0; i < children.length; i++)
 {
  if( children[i].innerHTML === "")
  {
   alert("la div " + children[i].id + " est vide !");

let children = children[i];


   var el = document.getElementById('0'), children = document.createElement('input');

   //children.innerHTML = 'Content';
   children.classList.add("mystyle");
   children.id = id;
   children.name = '11';
   children.type = choix;
   
   // id_bis = id.charAt(1);

   el = document.getElementById(id_bis);
   el.appendChild(children);
  }
 }
```
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Tu réinitialises la variable children au premier tour de boucle... donc normal que ça ne marche pas.
  
  0
2. juliendu51100 Messages postés 487 Statut Membre 6
  
  en mettant ce code la première alerte ce lance mais pas la seconde.. Pourrais tu m’aiguiller ?
  var children = document.getElementById("cible0");
  alert("bonjour");
  for( var i = 0; i < children.length; i++)
  {
  alert("Voici un tour de la boucle !");
  if( children[i].innerHTML === "")
  {
  alert("la div " + children[i].id + " est vide !");
  }
  }
  
  0
  1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > juliendu51100 Messages postés 487 Statut Membre
    
    Ben oui
    
    0
3. juliendu51100 Messages postés 487 Statut Membre 6
  
  honte a moi ! c'etais la la condition "<" qui fallait remplacer par "!==" merci pour ton aide :)
  
  0
Réponse 6 / 7
juliendu51100 Messages postés 487 Statut Membre 6
Bonjour je reviens vers vous car je n'y arrive pas du tous.. quand je lance le code
```
	for( var i = 0; i !== children.length; i++)
	{
		alert("Voici un tour de la boucle !");
		if( children[i].innerHTML == "")
		{
			alert("la div " + children[i].id + " est vide !");
		}
	}
```
le message "voici un tour de boucle" ce lance qu'une fois (une seul boucle) même si j'ai trois div vide.. de plus je n'arrive pas a entrer dans la boucle if.. :/ des idée ?
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  for( var i = 0; i !== children.length; i++)
  
  cela signifie :
  Boucle de 1 = 0 ... tant que i est différent de la taille de children....
  
  la bonne syntaxe serait éventuellement
  for( var i = 0; i <= children.length; i++)
  
  mais en fait... la bonne réponse c'est :
  for( var i = 0; i < children.length; i++)
  
  Prenons un exemple : children.length = 10
  donc :
  for( var i = 0; i <= children.length; i++)
  
  fera une boucle de 0 à 10 (soit 11 tours )
  
  for( var i = 0; i < children.length; i++)
  
  fera une boucle de 0 à 9 (soit.. 10 tours)
  
  0
Réponse 7 / 7
juliendu51100 Messages postés 487 Statut Membre 6

merci pour ta réponse mais en changeant la condition je ne rentre plus du tout dans la boucle for.. Je te joint e lien mis a jour pour que tu puisse tester : https://codepen.io/JulienOo/pen/KJmyaj
je me demande si le problème ne viens pas de children.lenght
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Tu relis ton code pour essayer de le comprendre ???
  Ne vois tu pas d'erreur ?
  
  Rien qu'à ces deux lignes :
  var el = document.getElementById('0'), children = document.createElement('input'); var children = document.getElementById("cible0");
  
  Ne penses tu pas qu'il y a un souci ??
  
  Une variable ne peut pas être utilisée pour deux choses différentes en même temps....
  
  0
2. juliendu51100 Messages postés 487 Statut Membre 6
  
  je garde la variable el qui sert de parent et je garde le second children qui me permet de cibler la création ?
  
  0

WEB - formulaire

7 réponses

Discussions similaires

Newsletters