La valeur HTML ajoutée Javascript est supprimée lorsque le programme datepicker est sélectionné

J'ai un mode Bootstrap où vous pouvez sélectionner une date. En arrière-plan, les champs cachés sont remplis qui sont également soumis avec le formulaire.

Le problème est que lorsque vous sélectionnez l'élément datepicker , il supprime la valeur cachée pour une raison étrange (mais seulement les valeurs cachées remplies par le Javascript).

DatePicker JS:

 var date = new Date(); date.setDate(date.getDate()); $('#datepicker').datepicker({ format: "dd/mm/yyyy", startDate: date, autoclose: true, });

Champ caché Remplissant JS:

 $(function () { $('#appointment').on("show.bs.modal", function (e) { $("#request_id").val($(e.relatedTarget).data('request-id')); }); });

Élément HTML caché:

 <input type="hidden" name="request_id" id="request_id" value="">

Lorsque la boîte Modal apparaît initialement, je peux voir que le champ de la valeur cachée est peuplé, mais lorsque je clique sur le datepicker , il est supprimé. Pourquoi est-ce?

Le problème est que show.bs.modal est déclenché lors de l'ouverture de datepricker bootstrap. Vous devez simplement définir la valeur #request_id uniquement lorsque le show.bs.modal est lié à l'ouverture modale. Une façon dont vous pouvez utiliser pour obtenir l'élément qui a déclenché l'événement vérifie la valeur e.target.id dans votre gestionnaire.

Voici un échantillon de travail:

 $('#datepicker').datepicker({ format: "dd/mm/yyyy", startDate: new Date(), autoclose: true, }); $(function () { $('#appointment').on("show.bs.modal", function (e) { if( e.target.id == 'appointment'){ $("#request_id").val($(e.relatedTarget).data('request-id')); } }); });

 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <input type="hidden" name="request_id" id="request_id" value=""> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointment" data-request-id="myExampleId"> Open appointment modal </button> <div id="appointment" class='modal fade'> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> <h4 class="modal-title">Title</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="datepicker">Date bootstrap</label> <input type="text" id="datepicker"> </div> </div> </div> </div> </div>

Utilisez le logiciel Bootstrap-datepicker approuvé . Si vous utilisez la même chose et effectuez un appel $ ajax, prévoyez des valeurs supplémentaires tout en faisant $ ajax () en indiquant les valeurs de votre formulaire.