2016-09-04 8 views
0

の値を取得し、「オーケー」ボタンがクリックされたときに発生します 私はこのブートストラップモーダルを持ってBootstrap.modal

$('#exampleModal').on('click','#paramsOkay', function (e) { 
    console.log($('#recipient-name').text()); 
    console.log(e); 
}); 

が、最初に console.log()が空で、私はユーザーの入力を得ることを期待しています! 2番目のコンソールはイベントをログに記録しますが、実際にはユーザーの入力をどのように抽出するのかはまだわかりません...

"Okay"値をクリックした後、ユーザーが入力した値を取得する方法はありますか?

答えて

1

val()なしtext()を使用する必要があります。

変更:

console.log($('#recipient-name').text()); 

へ:

console.log($('#recipient-name').val()); 

決勝コード:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    
 
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form> 
 
        <div class="form-group"> 
 
         <label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label> 
 
         <input type="text" class="form-control" id="recipient-name" value="Test"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="message-text" class="form-control-label">Max #pics per cluster:</label> 
 
         <input type="text" class="form-control" id="message-text"> 
 
        </div> 
 
       </form> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal"> 
 
        Close 
 
       </button> 
 
       <button id="paramsOkay" type="button" class="btn btn-primary"> 
 
        Okay 
 
       </button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    
 
    <script> 
 
     
 
    $(document).ready(function(){ 
 

 
     $('#exampleModal').on('click','#paramsOkay', function (e) { 
 
      console.log($('#recipient-name').val()); 
 
    //console.log(e); 
 
}); 
 

 
    }) 
 
    </script> 
 
     
 
    </body> 
 
</html>

+0

ああ、私の神!私は 'val()'でも試してみたが、動作させることはできなかったと誓っているが、コードをコピーして貼り付けると、おそらく私の愚かなものだっただろう!ありがとう! – gsamaras

関連する問題