javascript - 如何通过单击事件之外的函数访问模态中的输入值？

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

然后在我单击模态框内的按钮后:

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

你有一些拼写错误 .message 应该是 .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>';