Question

我的页面中有一个包含文本框和按钮的表单。我有一个包含文本框，验证码和按钮的引导弹出窗口。

问题1.我知道如何处理弹出窗口提交的数据。我只需要知道如何将文本框（页面上）输入的数据传递到文本框（弹出窗口）。

问题2.单击页面上的按钮并显示弹出窗口后，应清除文本框（在页面上）。

由于

Answer 1

因此，在提交时从页面处理输入表单。您可以在提交表单时调用javascript函数。在该功能中，将弹出窗口的值重新分配给提交的数据，并从页面中清除窗体分割的数据。

有关语法和处理表单的方法，您可以访问以下链接：

Answer 2

之前我遇到过类似的问题。您可以使用jquery从文本框中获取值并将其放在模态（弹出窗口）文本框中。

＆＃13;

<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>

＆＃13;

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

2 个答案: