入力値が不定

Question

だから！

私はAJAXを学ぼうとしています。私は入力ボックスの価値を取って、それを画面上に置こうとしています。しかし、jQueryの.val（）関数を呼び出すと、undefinedが返されます。誰が私にこの理由が教えてもらえますか？私は文字通りあらゆることを試みました。

<div class="action-center text-center">
  
<div class="input-group input-group-lg">
   
<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-user object"></i></span>
   
<input type="text" class="form-control" id="id1" placeholder="Username" aria-describedby="sizing-addon1">
  
</div>
  
<div class="input-group input-group-lg">
   
<span class="input-group-addon" id="sizing-addon2"><i class="fa fa-coffee object"></i></span>
  
<input type="text" class="form-control object" id="id2" placeholder="Username" aria-describedby="sizing-addon1">
 
</div>
  
<button class="btn btn-success" id="submit">Submit</button>
  
<button class="btn btn-danger remove-action">Remove</button>
</div> 

JS：

$(document).ready(function() 
{ 
    $(function() 
    { 
     var $orders = $('.list-group'); 
     var $nameFieldGroup = $('#id1'); 
     var $orderFieldGroup = $('#id2'); 
     $.ajax({type: 'GET', url: 'test.json', success: function(data) 
     { 
      $.each(data, function(i, item) 
      { 
       $orders.append('<li class="list-group-item"><p>Name: '+ item.name + '</p><p>Drink: ' + item.drink +'</p></li>'); 
      }); 
     }, error: function() 
     { 
      alert("AJAX error") 
     }}); 

     $('#submit').on('click', function() 
     { 
      var order = {name: $nameFieldGroup.val(), drink: $orderFieldGroup.val()}; 
      $.ajax({type: 'POST', url: 'test.json', data: order, success: function(newOrder) 
      { 
       $orders.append('<li class="list-group-item"><p>Name: '+ newOrder.name + '</p><p>Drink: ' + newOrder.drink +'</p></li>'); 
      }}); 
     }); 
    }); 
}); 

Answer 1

$('#id1')と$('#id2')は、動的にロードされたコントロールされていますか？ダイナミックコントロールの場合は、交換してください

$nameFieldGroup.val() with $('#id1').val() and $orderFieldGroup.val() with $('#id2').val() 

また、私は質問の下に記載されている他のコメントに同意します。質問とコードのデートは関連していないようです。