2015-03-27 3 views
0

У меня есть легкая проблема для вас :)Вставка текста из формы во всплывающее окно. HTML/JQuery

Мне нужно сделать короткую форму с одним полем для имени. Нижняя должна быть кнопкой, которая после нажатия отобразит всплывающее окно с текстом: 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> 

Пожалуйста, помогите мне ... :(

ответ

0
$("#fname").change(function() { 
    $('#myPopup').html("<p>Hello "+$("#fname").val()+"</p>"); 
}); 
Смежные вопросы