javascript - 如何使用javascript将输入单选的4个不同值发送到模态

Question

我有一个销售脚本，我的客户需要一个输入单选中包含每种产品 4 个价格的模式。我尝试了多种方法，但我无法理解如何将 4 个价格发送到每个产品系列的模态内的 radio 输入。

每一行产品都是通过javascript添加的，如下所示:

var addNewRow = function(id){
    html = '<tr id="tr_'+i+'">';
    html += '<td class="prod_c" width="50%"><input type="text" data-type="nombreProd" name="nombreProd[]" id="nombreProd_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td width="10%"><input type="text" name="cantidad[]" id="cantidad_'+i+'" class="form-control changesNo cq totalCantidad" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td width="10%"><input type="text" name="venta[]" id="venta_'+i+'" class="form-control changesNo vventa" data-toggle="modal" data-target="#escoger" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly="readonly"></td>';
    html += '<td width="25%"><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice pisto" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" ></td>';
    html += '<td class="trash_td"><i class="fa fa-trash fa-delete" aria-hidden="true" data-id="'+i+'"></i></td>';
    html += '</tr>';

    if( typeof id !== "undefined"){
        $('#tr_'+id).after(html);
    }else{
        $('table').append(html);
    }

    $('#caseNo_'+i).focus();
    i++;

    return (i-1);
};

这是 JavaScript 调用数据库在每个输入中添加所选产品的数据的部分:

$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');
id_arr = $(this).attr('id');
id = id_arr.split("_");
element_id = id[id.length-1];
autoTypeNo =1;
if(type =='cod' ){
    autoTypeNo=0;
    $('#add_icon_'+element_id).removeClass('hide');
} else if(type =='nombreProd' ) {
    autoTypeNo=1;
}

$(this).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'partes/include/aPos.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: type
            },
            beforeSend: function(){
                $('#msg').html('<img src="images/ajax-loader.gif"/> <span class="label label-primary">verificando</span>');
            },
            success: function( data ) {
                $('#msgCod').html("");
                if(!data.length && readonly != 'readonly'){

                    $('#product_code_modal').val( $('#itemNo_'+element_id).val() );
                    $('#product_name_modal').val( $('#itemName_'+element_id).val());

                    $('#current_element_id').val(element_id);

                    //$('#add_product_form').find('.form-group').removeClass('animated fadeIn').addClass('animated fadeIn');
                    //$('#addNewProduct').modal('show');

                    /*var result = [
                      {
                          label: 'No record found',
                          value: ''
                      }
                    ];
                    response(result);*/
                }else{
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        };
                    }));
                }
            }
        });
    },
    autoFocus: true,
    selectFirst: true,
    minLength: 2,
    open: function(e, ui){
        var first = $(".ui-menu-item:eq(0) div").html();
        //$(this).val(first);
        console.log(first);

        return false;
    },
    select: function( event, ui ) {
        if( typeof ui.item.data !== "undefined" ){
            var names = ui.item.data.split("|");
            if( type == 'general'){
                var currentTextid = $('#reciboPos tr:last').find("td.prod_c > input").attr('id');

                if(typeof currentTextid !== 'undefined') {
                    var currentTextArr = currentTextid.split("_");
                    element_id = currentTextArr[currentTextArr.length-1];

                    var cod = $.trim( $("#"+currentTextid).val() );

                    element_id = parseInt(element_id);
                    if (cod !=='') {
                        element_id = addNewRow();
                    }
                } else {
                    element_id = addNewRow();
                }

            }
        $('#nombreProd_'+element_id).val(names[1]);
        $('#cantidad_'+element_id).val(1);
        $('#venta_'+element_id).val(names[2]);
        $('#total_'+element_id).val(names[2]);
 // Here I added thee others three values for each product
        $('#venta1_'+element_id).val(names[3]);
        $('#venta2_'+element_id).val(names[4]);
        $('#venta3_'+element_id).val(names[5]);
            setTimeout(function(){
                $("#autocomplete_top").val("");
                },100);
            }else{
                return false;
            }
            calculateTotal();
        }
    });
});

当产品显示时，我点击输入“venta”以显示模式

//modal to choose the price
$('#escoger').on('show.bs.modal', function(e) {

    var venta = $('#venta_0'+id[1]).val();
    var venta1 = $('#venta_1'+id[1]).val();
    var venta2 = $('#venta_2'+id[1]).val();
    var venta3 = $('#venta_3'+id[1]).val();

  $('input[name="venta"][value="'+venta+'"]').prop('checked',true);
  $('input[name="venta"][value="'+venta1+'"]').prop('checked',false);
  $('input[name="venta"][value="'+venta2+'"]').prop('checked',false);
  $('input[name="venta"][value="'+venta3+'"]').prop('checked',false);
});

这是模式，但我不知道如何将数据发送到每个输入 radio :

<div id="escoger" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_0">1
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_1">2
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_2">3
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_3">4
        </label>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

-----编辑------

这里是问题的视频链接: video

这是脚本的另一部分:

//price change

$(document).on('change keyup blur','.changesNo',function(){

// .changeNo are the class inside of ventas, cantidad(quantity) inputs

// in this part the ID came from

    id_arr = $(this).attr('id');  
    id = id_arr.split("_");

    cantidad = $('#cantidad_'+id[1]).val();
    existencia = $('#existencia_'+id[1]).val();
    venta = $('#venta_'+id[1]).val();
    venta1 = $('#venta1_'+id[1]).val();
    venta2 = $('#venta2_'+id[1]).val();
    venta3 = $('#venta3_'+id[1]).val();

    if( cantidad!='' && venta!='')

    calculateTotal();

});

Answer 1

也许这就是您正在寻找的。做如下的事情。

JavaScript

$('#escoger').on('shown.bs.modal', function () {

    var venta0 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
    var venta1 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
    var venta2 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
    var venta3 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.

    var vt0     = $('input[name="venta"]:eq(0)',this); // Set target input with their own index (eq).
    var vt1     = $('input[name="venta"]:eq(1)',this); // Set target input with their own index (eq).
    var vt2     = $('input[name="venta"]:eq(2)',this); // Set target input with their own index (eq).
    var vt3     = $('input[name="venta"]:eq(3)',this); // Set target input with their own index (eq).

    vt0.val(venta0).prop('checked',true) // Set the value
    .closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
        return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
    });
    vt1.val(venta1) // Set the value
    .closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
        return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
    });
    vt2.val(venta2) // Set the value
    .closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
        return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
    });
    vt3.val(venta3) // Set the value
    .closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
        return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
    });
});

JSFiddle 示例:http://jsfiddle.net/synz/72pasuzw/