javascript - How to access input values in a modal by using function outside the click event? -

i created modal dialog in page , contains form. want have ajax process after clicking button. problem can't input values in modal.

here's code:

my code in onclick

$('.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 = <?php echo $customer_id; ?>      var     concern_form  = '<div class="row">';             concern_form += '   <div class="form-group">';             concern_form += '       <label>product</label>';             concern_form += '       <input type="text" class="form-control input-sm" style="width: 97%" name="response_product" value="' + product_name + '" readonly />';             concern_form += '   </div>';             concern_form += '</div>';              concern_form += '<div class="row">';             concern_form += '   <div class="form-group">';             concern_form += '       <label>seller name</label>';             concern_form += '       <input type="text" class="form-control input-sm" style="width: 97%" name="response_seller_name" value="' + seller_name + '" readonly />';             concern_form += '   </div>';             concern_form += '</div>';              concern_form += '<div class="row">';             concern_form += '   <div class="form-group">';             concern_form += '       <label>select concern</label>';             concern_form += '       <select class="form-control" style="width: 97%" name="response_status">';             concern_form += '           <option value="">--  select concern --</option>';             concern_form += '           <option value="product not received">product not received</option>';             concern_form += '           <option value="product has defect">product has defect</option>';             concern_form += '           <option value="product did not reached quantity of order">product did not reached quantity of order</option>';             concern_form += '           <option value="invalid product(request replace)">invalid product(request replace)</option>';             concern_form += '           <option value="request cancel"></option>';             concern_form += '       </select>';             concern_form += '   </div>';             concern_form += '</div>';              concern_form += '<div class="row">';             concern_form += '   <div class="form-group">';             concern_form += '       <label>message seller</label>';             concern_form += '       <textarea class="form-control" style="width: 97%" name="response_message"></textarea>';             concern_form += '   </div>';             concern_form += '</div>';              concern_form += '<div class="row">';             concern_form += '   <div class="form-group">';             concern_form += '       <label class="required response_alert"></label>';             concern_form += '   </div>';             concern_form += '</div>';      var     concern_buttons  = '<input type="button" class="btn-jpmall" value="send" onclick="sendconcernstatus(' + order_id + ', ' + product_id + ', ' + customer_id + ')" /> ';             concern_buttons += '<input type="button" class="btn-jpmall-inverse"  data-dismiss="modal" value="cancel" />';      $('.modal_concern .modal-title').text('inform seller');     $('.modal_concern .message').html(concern_form);     $('.modal_concern .modal_buttons').html(concern_buttons);     $('.modal_concern').modal('show');  }); 

now want value in input:

concern_form += '       <input type="text" class="form-control input-sm" style="width: 97%" name="response_product" value="' + product_name + '" readonly />'; 

then after click button inside modal:

var concern_buttons  = '<input type="button" class="btn-jpmall" value="send" onclick="sendconcernstatus(' + order_id + ', ' + product_id + ', ' + customer_id + ')" /> '; 

i access function:

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); } 

but got undefined value.

you have typos .mesage should .message and
.modal concern should .modal_concern

in case guess can go directly by-name

function sendconcernstatus( /*arguments here*/ ) {     var product_name = $('.modal_concern').find('input[name="response_product"]').val();     console.log(product_name); // works } 

also, leverage js, use \n\ split string newlines:

var concern_form  = '<div class="row">\n\   <div class="form-group">\n\     <label>product</label>\n\     <input type="text" class="form-control input-sm" style="width: 97%" name="response_product" value="' + product_name + '" readonly />\n\    </div>\n\ </div>';