将表单中的文本插入弹出窗口。 HTML / jQuery的

时间:2015-03-27 20:31:24

标签: jquery forms

我有一个简单的问题:)

我需要制作一个简短的表单,只有一个字段用于名称。 Lower应该是一个按钮,单击后会显示一个带有文本的弹出窗口:Hello(这里是表单中的名称)。我只是不知道如何连接它。

我已经有了一些代码:

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


    </head>
    <body>

    <div data-role="page">
      <div data-role="main" class="ui-content">
        <form method="post" action="demoform.asp">
          <label for="fname">Name:</label>
          <input type="text" name="fname" id="fname">
        </form>

        <div data-role="main" class="ui-content">
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

        <div data-role="popup" id="myPopup">
          <p>Hello ...</p>
        </div>
      </div>
      </div>
    </div>
    </body>
    </html>

请帮助我...... :(

1 个答案:

答案 0 :(得分:0)

$( "#fname" ).change(function() {
  $('#myPopup').html("<p>Hello "+$( "#fname" ).val()+"</p>");
});