2017-12-26 15 views
0

私のページには、テキストボックスとボタンを含むフォームがあります。 私は、テキストボックス、キャプチャ、ボタンを含むブートストラップポップアップを持っています。ページ上のテキストボックスからポップアップでテキストボックスにデータを渡す

質問1.ポップアップから送信されたデータを処理する方法を知っています。私は、(ページの)テキストボックスに入力されたデータを(ポップアップの)テキストボックスに渡す方法を知る必要があります。

質問2.ページ上のボタンをクリックしてポップアップを表示したら、ページ上のテキストボックスを消去する必要があります。

ありがとうございます。

+1

問3.あなたのコードがある????? – mrid

答えて

0

私は前に一度、同様の問題がありました。 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>

+0

これは私が必要なものです。ありがとうございます。しかし、モーダルポップアップが表示された後で、ページのテキストボックスをクリアしたいと思います。 – Sonny

+0

これですべき追加のjquery行が追加されました。 – Wonkers

0

送信されたページから入力フォームを処理します。フォームを送信するときに、javascript関数を呼び出すことができます。その機能では、ポップアップの分割の値を送信されたデータに再割り当てし、ページからフォームの分割のデータをクリアします。構文について

とどのようにこれらのリンクを訪問することができ、フォームを処理するために:

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

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

関連する問題