如何使用click事件外部的函数访问模态中的输入值

Question

我在我的页面中创建了一个模态对话框，它包含一个表单。我想有一个AJAX进程后，单击一个按钮。现在我的问题是我无法在模态中获得输入值。

下面是我的代码:

我在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 the quantity of the order">Product did not reached the quantity of the order</option>';
            concern_form += '           <option value="Invalid product(request to replace)">Invalid product(request to replace)</option>';
            concern_form += '           <option value="Request to 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 to 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');
});

现在我想要得到这个输入的值:

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

然后当我点击modal里面的按钮后:

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

我将访问这个函数:

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

但是我得到了一个undefined值

Answer 1

你有一些错别字.mesage应该是.message和
.modal concern应为.modal_concern

在任何情况下，我想你可以直接通过- name

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

同样，为了利用你的JS，使用n来分割字符串换行符:

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>';

Answer 2

就像我之前说的，由于名称应该是唯一的，您可以使用直接的方法:

var product_name = $('input[name="response_product"]').val();
console.log(product_name);