Bonjour, je suis nouveau en JS et aussi en JQuery, je veux pouvoir quand on click sur un bouton, qu'il affiche une alert() avec un formulaire dedans qui, quand il est rempli rajoute du code html et css dans la page, problème je suis déjà bloqué au début.

Voici le code JS -->

$(document).ready(function(){
  
  var btn = document.getElementByClassName('addbox');
  var test = 2;
  
  $(btn).click(function(){
    alert('test');
  });
});

Après un peux plus de recherche j'ai réussi à afficher mon alert() car j'ai vu que la var ne fonctionner pas, mais le fait d'intégrer un formulaire ne fonctionne toujours pas.

$(document).ready(function(){
 // var btn = document.getElementByClassName('addbox');
  var test = 2;
  
  $('.addbox').click(function addform(){
    alert('Ajouts d\'Outils' + 'Titre de l\'Outil : ' + getElementById("titleform").value);
  });
});

Mise à jour :

$(document).ready(function(){
 // var btn = document.getElementByClassName('addbox');
  var test = 2;
  
  $('.addbox').click(function(){
    let titre = prompt('Entre le Titre du nouvelle Outil');
    let chemin = prompt('Entre le Chemin du nouvelle Outil');
    let side = prompt('Affichage de l\'Outil à droite ou gauhce ?');
                      
    $('.container').append('<div class="boxindex6"><h1 class="boxtitle">'+ titre +'</h1></div>');
                      
  });
    
    
   
});

Le code fonctionne (pour l'instant) mon élément div est bien ajouter, mais quand je refresh la page il disparait y a t-il un moyen de le stocker et qu'il ne disparaisse plus jamais ?

Merci pour vos réponse.

-
Edité par Liion 9 octobre 2019 à 15:37:33

L'alert en JS sert côté développeur à voir si on passe bien dans une fonction  ou pour afficher un court message.

Je te conseille de plutôt, pour afficher un formulaire de passe via des <div> quelconques  qui contiennent le formulaire voulu.

Au click(); tu fais apparaitre le formulaire qui est en display:none; (caacher) à la base. 

2/ si tu utilises JQUERY 

$('.addbox').click(function() {
    alert('blabla');
});

le sélecteur est tout le temps $('#id')  ou $('.class') ou $('element')

Plus besoin d'utiliser getElementById("titleform")

Edit : Pour le stocker il faudra utiliser du PHP par exemple

-
Edité par SteveGamer 9 octobre 2019 à 15:47:25

Re-bonjour

$(document).ready(function(){
  var i = 5;
    
    
    

  $('.addbox').click(function(){  
      $('.formdiv').removeClass('formdiv');
      $('#formulaire').addClass('formdivdisplay');
  }); 
    
  $('#submit').click(function(){
      var titre = $('#titleform').val();
      var chemin = $('#chemin').val();
      var name = $('#name').val();
      var statue = $('#statue').val();
      var side = $('#select').val();
      
      localStorage.setItem('titre', titre);
      localStorage.setItem('chemin', chemin);
      localStorage.setItem('name', name);
      localStorage.setItem('statue', statue);
      localStorage.setItem('side', side);
      
      i = i + 1;
       
     
 });
    
    function drawBox(){
       var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';
       
       localStorage.setItem('block', block);      
      
      $('.container').append(localStorage.getItem('block'));
       
    }    
});

Je souhaite que quand l'utilisateur clique sur valider local storage stock toutes ces informations et ensuite faire apparaître du code html et css (plus tard) avec les données qu'il vient d'entrées et que le code html reste évidemment sur la page indéfiniment.

Merci.

-
Edité par Liion 10 octobre 2019 à 14:10:08