简体   繁体   English

将数据从页面上的文本框传递到弹出窗口上的文本框

[英]Passing data from textbox on the page to textbox on popup

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. 问题1.我知道如何处理从弹出窗口提交的数据。 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). 问题2.单击页面上的按钮并显示弹出窗口后,它应该清除文本框(在页面上)。

Thanks 谢谢

So process the input form from the page when submitted. 因此,提交时处理页面中的输入表单。 You can call a javascript function when submitting the form. 您可以在提交表单时调用javascript函数。 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: 有关语法以及如何处理表格,您可以访问以下链接:

  1. https://www.w3schools.com/js/tryit.asp?filename=tryjs_form_elements https://www.w3schools.com/js/tryit.asp?filename=tryjs_form_elements

  2. https://www.w3schools.com/js/js_input_examples.asp https://www.w3schools.com/js/js_input_examples.asp

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. 您可以使用jquery从文本框中获取值并将其放置在模式(弹出窗口)文本框中。

 <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">&times;</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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM