récupérer texte d'un formulaire pour une fonction javascript

récupérer texte d'un formulaire pour une fonction javascript - Javascript/Node.js - Programmation

Marsh Posté le 21-04-2017 à 16:43:14    

Bonjour à tous,  
 
j'utilise actuellement un calendrier (FULLCALENDAR) pour un Extranet de ma boîte.  
J'ai un petit problème pour récupérer le contenue d'une variable d'un formulaire  
 
voici un tout petit bout de mon code source, mon formulaire html :  

Code :
  1. <div class="modal fade" id="editEvent">
  2.                      <div class="modal-dialog">
  3.                           <div class="modal-content">
  4.                                <div class="modal-header">
  5.                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  6.                                     <h4 class="modal-title">Edition</h4>
  7.                                </div>
  8.                                 <form id="formeditEvent" class="form-edit" role="form">
  9.                                      <div class="modal-body">
  10.                                         <div id="eventInfo"></div>
  11.                                    </div>
  12.                                </form>
  13.                                <div class="modal-footer">
  14.                                     <input type="button" class="btn btn-info btn-sm"  value="Enregistrer" id="boutonenregistrer"  >
  15.                                     <button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Fermer</button>
  16.                                </div>
  17.                           </div>
  18.                      </div>
  19.                 </div>


 
Mon code Javascript :  

Code :
  1. eventClick: function(event, jsEvent, view) {
  3.    var info ="<input type=\"text\" class=\"form-control\" id=\"eventName\" name=\"eventName\" value=\""+event.title+"\"><input type=\"hidden\" id=\"eventid\" value=\""+event.id+"\" name=\"eventid\" />";
  5.                                 $('#editEvent').modal('show');   // OK - Affiche la fenêtre qui édite le nom de l'événement. <div class="modal fade" id="editEvent">
  6.    $('#eventInfo').html(info);           // OK  - variable dans le form html  
  8.     $('#boutonenregistrer').click(function()   { // le bouton enregistrer a été cliqué.
  10.     var title = $("#eventName" ).val(); // <-- ????????  
  12.     $('#editEvent form')[0].reset();  // Remise à zéro du formulaire
  13.                                         $('#editEvent').modal('hide');  // ici le formulaire est effacé.
  15.    });
  16.   },


 
http://reho.st/self/36dc6970aec32df6874c4bab5f025a2097d7f58f.png
 
Quand je clique sur l'événement, il est bien présent dans mon formulaire via "var info", mais il ne prend pas en compte ma modification "var title = $("#eventName" ).val();" reste vide ""  quand je clique sur enregistrer
 
Note : je suis assez mauvais en javascript !


Message édité par zcrusher le 21-04-2017 à 16:55:17

---------------
Si on te demande, tu diras que nous étions ensemble en train d'écraser des boîtes aux lettres !!
Reply

Marsh Posté le 21-04-2017 à 16:43:14   

Reply

Marsh Posté le 21-04-2017 à 23:48:30    

Salut,
 
Problème classique, lorsque ton JavaScript est interprété, l'élément n’existe pas encore.
Edit : l'idée de gatsu35 semble plus cohérente


Message édité par torwood3 le 22-04-2017 à 13:27:17

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 22-04-2017 à 12:34:28    

moi je dirai que "var title" reste local à ta fonction et que je vois vraiment pas ce que tu cherches à faire.

Reply

Marsh Posté le 22-04-2017 à 12:48:37    

Je penche comme Gatsu, comment vois-tu que ta variable reste vide?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-04-2017 à 16:10:17    

Bonjour à tous,  
 
Pour le moment il n'y a pas la partie qui sauvegarde dans ma base de donnée le title de mon événement.  
 
Je regarde la valeur de mon eventName grâce a la console de Chrome et aussi avec des alert() et des console_log.
 
L'utilisateur clique sur le nom de l'événement et il doit pouvoir changer le title de son événement.


---------------
Si on te demande, tu diras que nous étions ensemble en train d'écraser des boîtes aux lettres !!
Reply

Marsh Posté le 27-04-2017 à 14:44:23    

ce matin, je me suis penché sur mon petit problème..  
Solution :
 

Code :
  1. eventClick: function(event, jsEvent, view, element)
  2.   {
  3.    var info ="<input type=\"text\" class=\"form-control\" id=\"eventName\" name=\"eventName\" value=\""+event.title+"\"><input type=\"hidden\" id=\"eventid\" value=\""+event.id+"\" name=\"eventid\" />";
  4.    $('#editEvent').modal('show');   // Affiche la fenêtre qui édite le nom de l'événement. <div class="modal fade" id="editEvent">
  5.    $('#eventInfo').html(info);   // variable dans le form html  
  6.    var id = event.id;
  7.     $('#boutonenregistrer').click(function(event, jsEvent, view, element) {
  8.     title = $('#editEvent #eventName')[0].value;
  9.                     if(title != null && title != '') {
  10.      $.ajax({
  11.       url: 'ajax/ajax-calendar.php?action=save',
  12.       type: "GET",
  13.       data: {
  14.        'title' : title,
  15.        'id' : id
  16.       },
  17.      });
  18.     }
  19.    });
  20.     $('#supprimer').click(function(event, jsEvent, view, element) {
  21.     title = $('#editEvent #eventName')[0].value;
  22.                     if(title != null && title != '') {
  23.      $.ajax({
  24.       url: 'ajax/ajax-calendar.php?action=sup',
  25.       type: "GET",
  26.       data: {
  27.        'id' : id
  28.       },
  29.      });
  30.     }
  31.    });
  32.    $('#editEvent form')[0].reset();  // Remise à zéro du formulaire
  33.                 $('#editEvent').modal('hide');  // ici le formulaire est effacé.
  35.    $('#calendar').fullCalendar('refetchEvents');
  36.   },


 

Code :
  1. title = $('#editEvent #eventName')[0].value;

 
J'avais oublié le " #editEvent " dans mon code source.. décidément je n'aime pas le javascript


---------------
Si on te demande, tu diras que nous étions ensemble en train d'écraser des boîtes aux lettres !!
Reply

Marsh Posté le 27-04-2017 à 16:10:26    

Moi c'est plus jquery dont je ne suis pas fan mais je ne comprends absolument pas ta ligne, pour moi ça n'a aucun sens :
 

Code :
  1. title = $('#editEvent #eventName')[0].value;


 
Le "#" indique que tu veux sélectionner un élément avec un certain id. Or en HTML un élément ne peut avoir qu'un seul id et un id ne peut correspondre qu'à un seul élément. À partir de là, à quoi ça peut servir d'indiquer l'élément parent? Et à quoi ça sert d'indiquer que c'est le premier objet ("[0]" ) de la liste des objets ayant l'id recherché puisque de toute façon il n'en existe qu'un seul.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 30-04-2017 à 23:11:00    

bonsoir,  
 
Je me suis poser la même question. Je débute un peu en Javascript. Je dois encore faire des efforts sur le bout de code, car il ne me plaît pas encore. C'est assez brouillon.  
 


---------------
Si on te demande, tu diras que nous étions ensemble en train d'écraser des boîtes aux lettres !!
Reply

Marsh Posté le 30-04-2017 à 23:25:38    

Je vais tester et faire mieux ;)  
Je code pour moi, mais ce n'est pas très Pro :(


---------------
Si on te demande, tu diras que nous étions ensemble en train d'écraser des boîtes aux lettres !!
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed