stackoom
  简体   繁体   中英

How to get value from modal in different input

 原文  2019-04-03 08:34:11  3   1    javascript/ php/ jquery/ html

Question

I have to make an interface management articles on which I have several buttons, which, upon clicking, throws a dialog (modal). So far, everything is OK.

In the modal I have a value in the drop-down list. When I click "Save" I manage to display the selected element in the first 'input', but for the other buttons it does not work. 

 $(document).ready(function(){ $("[id^=btn_]").on('click', function(){ var boutton_selectionne = this.id console.log(boutton_selectionne) $("#monModal").modal('show') }) $('#sauvegarder').on('click', function(){ var btn1 = $('#nbre_compart option:selected').text() $('#txt_btn1').val(btn1) return }) });
 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <button class="btn btn-info" id="btn_mdl1">Boutton 1</button> <input type="text" name="btn_1" id="txt_btn1"> <button class="btn btn-info" id="btn_mdl2">Boutton 2</button> <input type="text" name="btn_2" id="txt_btn2"> <button class="btn btn-info" id="btn_mdl3">Boutton 3</button> <input type="text" name="btn_3" id="txt_btn3"> <button class="btn btn-info" id="btn_mdl4">Boutton 4</button> <input type="text" name="btn_4" id="txt_btn4"> <div id="monModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <label for="nbre_compart">Nombre de compartiments</label> <select id="nbre_compart"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> <option value="6" selected>6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </div> <div class="modal-footer"> <button type="button" id="sauvegarder" class="btn btn-primary">Sauvegarder</button> </div> </div> </div> </div> </body>

1 answers

solution1
 1 ACCPTED  2019-04-03 08:49:00

hi now other buttons are working :), Libraries was not present in your code that why its giving error on model function. 

 $(document).ready(function(){ $("[id^=btn_]").on('click', function(){ var boutton_selectionne = this.id console.log(boutton_selectionne); $('#sauvegarder').attr("data-id",this.id); $("#monModal").modal('show'); }) $('#sauvegarder').on('click', function(){ console.log("daf"+$('#sauvegarder').attr("data-id")); var btn1 = $('#nbre_compart option:selected').text(); $('#'+'txt_'+$('#sauvegarder').attr("data-id")).val(btn1) return }) });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <body> <button class="btn btn-info" id="btn_mdl1">Boutton 1</button> <input type="text" name="btn_1" id="txt_btn_mdl1"> <button class="btn btn-info" id="btn_mdl2">Boutton 2</button> <input type="text" name="btn_2" id="txt_btn_mdl2"> <button class="btn btn-info" id="btn_mdl3">Boutton 3</button> <input type="text" name="btn_3" id="txt_btn_mdl3"> <button class="btn btn-info" id="btn_mdl4">Boutton 4</button> <input type="text" name="btn_4" id="txt_btn_mdl4"> <div id="monModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <label for="nbre_compart">Nombre de compartiments</label> <select id="nbre_compart"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> <option value="6" selected>6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </div> <div class="modal-footer"> <button type="button" id="sauvegarder" class="btn btn-primary">Sauvegarder</button> </div> </div> </div> </div> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get value from input field modal bootstrap and show the value to another input field in the same modal with jquery? How to keep input value from a modal when navigating to other modal? How to get the value of input from different div in jquery? how can i get value from input text and show to my modal? How do I get the input value from modal body and insert to database? Get Value from JQuery Modal Dialog Submit to another Input Type How to get value from selected row in a modal? Getting input value from a Modal How to get input value to modal box jquery UI How to get value checkbox modal popup ajax on input textbox
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM