title: How to access input values in a modal by using function outside the click event?
body: <p>I created a modal dialog in my page and it contains a form. I want to have an AJAX process after clicking a button. Now my problem is I can't get the input values in my modal. </p>
  
  <p>Here's my code:</p>
  
  <p>My code in the onclick</p>
  
  <pre><code>$('.order_concern').on('click', function(){
  
      var order_id = $(this).data('order-id');
      var product_id = $(this).data('product-id');
      var product_name = $(this).data('product-name');
      var seller_id = $(this).data('seller-id');
      var seller_name = $(this).data('seller-name');
      var customer_id = &lt;?php echo $customer_id; ?&gt;
  
      var     concern_form  = '&lt;div class="row"&gt;';
              concern_form += '   &lt;div class="form-group"&gt;';
              concern_form += '       &lt;label&gt;Product&lt;/label&gt;';
              concern_form += '       &lt;input type="text" class="form-control input-sm" style="width: 97%" name="response_product" value="' + product_name + '" READONLY /&gt;';
              concern_form += '   &lt;/div&gt;';
              concern_form += '&lt;/div&gt;';
  
              concern_form += '&lt;div class="row"&gt;';
              concern_form += '   &lt;div class="form-group"&gt;';
              concern_form += '       &lt;label&gt;Seller Name&lt;/label&gt;';
              concern_form += '       &lt;input type="text" class="form-control input-sm" style="width: 97%" name="response_seller_name" value="' + seller_name + '" READONLY /&gt;';
              concern_form += '   &lt;/div&gt;';
              concern_form += '&lt;/div&gt;';
  
              concern_form += '&lt;div class="row"&gt;';
              concern_form += '   &lt;div class="form-group"&gt;';
              concern_form += '       &lt;label&gt;Select Concern&lt;/label&gt;';
              concern_form += '       &lt;select class="form-control" style="width: 97%" name="response_status"&gt;';
              concern_form += '           &lt;option value=""&gt;--  Select Concern --&lt;/option&gt;';
              concern_form += '           &lt;option value="Product not received"&gt;Product not received&lt;/option&gt;';
              concern_form += '           &lt;option value="Product has defect"&gt;Product has defect&lt;/option&gt;';
              concern_form += '           &lt;option value="Product did not reached the quantity of the order"&gt;Product did not reached the quantity of the order&lt;/option&gt;';
              concern_form += '           &lt;option value="Invalid product(request to replace)"&gt;Invalid product(request to replace)&lt;/option&gt;';
              concern_form += '           &lt;option value="Request to cancel"&gt;&lt;/option&gt;';
              concern_form += '       &lt;/select&gt;';
              concern_form += '   &lt;/div&gt;';
              concern_form += '&lt;/div&gt;';
  
              concern_form += '&lt;div class="row"&gt;';
              concern_form += '   &lt;div class="form-group"&gt;';
              concern_form += '       &lt;label&gt;Message to seller&lt;/label&gt;';
              concern_form += '       &lt;textarea class="form-control" style="width: 97%" name="response_message"&gt;&lt;/textarea&gt;';
              concern_form += '   &lt;/div&gt;';
              concern_form += '&lt;/div&gt;';
  
              concern_form += '&lt;div class="row"&gt;';
              concern_form += '   &lt;div class="form-group"&gt;';
              concern_form += '       &lt;label class="required response_alert"&gt;&lt;/label&gt;';
              concern_form += '   &lt;/div&gt;';
              concern_form += '&lt;/div&gt;';
  
      var     concern_buttons  = '&lt;input type="button" class="btn-jpmall" value="Send" onClick="sendConcernStatus(' + order_id + ', ' + product_id + ', ' + customer_id + ')" /&gt; ';
              concern_buttons += '&lt;input type="button" class="btn-jpmall-inverse"  data-dismiss="modal" value="Cancel" /&gt;';
  
      $('.modal_concern .modal-title').text('Inform Seller');
      $('.modal_concern .message').html(concern_form);
      $('.modal_concern .modal_buttons').html(concern_buttons);
      $('.modal_concern').modal('show');
  
  });
  </code></pre>
  
  <p>Now I want to get the value in this input:</p>
  
  <pre><code>concern_form += '       &lt;input type="text" class="form-control input-sm" style="width: 97%" name="response_product" value="' + product_name + '" READONLY /&gt;';
  </code></pre>
  
  <p>Then after I click the button inside the modal:</p>
  
  <pre><code>var concern_buttons  = '&lt;input type="button" class="btn-jpmall" value="Send" onClick="sendConcernStatus(' + order_id + ', ' + product_id + ', ' + customer_id + ')" /&gt; ';
  </code></pre>
  
  <p>I will access this function:</p>
  
  <pre><code>function sendConcernStatus(order_id, product_id, customer_id) {
  
      var container = $('.modal concern .message');
      var product_name =$('.modal concern .modal-content .modal-body .mesage input[name=response_product]').val();
  
      console.log(product_name);
  }
  </code></pre>
  
  <p>But I got an <code>undefined</code> value.</p>