如何使用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 />';

然后点击模态中的按钮后：

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

你有一些错别字x^i应为.mesage和
.message应为.modal concern

无论如何，我猜你可以直接去 - .modal_concern

name

此外，要利用您的JS，请使用function sendConcernStatus( /*arguments here*/ ) { var product_name = $('.modal_concern').find('input[name="response_product"]').val(); console.log(product_name); // works } 拆分字符串换行符：

\n\

Answer 2

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

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