Passing data from textbox on the page to textbox on popup
Question
I have a form in my page that contains a textbox and button. I have a bootstrap popup that contains textbox, captcha and a button.
Question 1. I know how to process the data submitted from the popup. I only need to know how to pass the data entered on the textbox (of the page) to the text box (on popup).
Question 2. After clicking the button on the page and showing the popup, it should clear the textbox (on the page).
Thanks
2 answers
solution1
0 2017-12-26 05:07:49
So process the input form from the page when submitted. You can call a javascript function when submitting the form. In that function reassign the value of division of popup to the submitted data and clear the data of division of form from the page.
For the syntax and how to process form you can visit these links:
solution2
0 ACCPTED 2017-12-26 05:58:48
I had a similar issue once before. You can use jquery to grab the value from the text box and place it in the modal(pop ups) text box.
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--the JQuery to grab the value and change the textbox--> <script> $(document).ready(function () { $('#page-button').click(function () { $('#modal-text').val($('#textbox').val()); $('#textbox').val(""); }); }); </script> </head> <body> <div class="container"> <!--textbox on main page--> <input id="textbox" type="text" /> <!--the following has been taken and edited from w3schools from Modals--> <!-- Trigger the modal with a button --> <button id="page-button" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <!-- The Modal text box--> <input id="modal-text" type="text" /> </div> <div class="modal-footer"> <button id="close-button" type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
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.