php - 如何使用 jquery 预览动态生成字段的值

Question

我的网站上有一个表单，用户可以在其中填写输入字段并从下拉列表中进行选择。对于更多选项，提供了一个按钮来为用户动态生成更多字段。效果很好。

现在，我正在尝试实现一项功能，该功能可以在用户完成填写订单字段并且名称字段获得焦点后立即预览用户所下的订单(以表格格式)，但我似乎无法完成它。如有任何帮助，我们将不胜感激。

这是我迄今为止尝试过的:

<form class="form-horizontal" method="post" action="" id="order_form">
    <fieldset class="orders_det">
        <div class="form-group">
            <label for="prod_type">Type</label>
            <select name="prod_type[]" class="form-control prod">
                <option value="">-- Select Products --</option>
                <option value="prod1">Prod1</option>
                <option value="prod2">Prod2</option>
                <option value="prod3">Prod3</option>
            </select>
        </div>                      
        <div class="form-group">
            <label for="quant" >
            <input type="text" class="form-control quant" name="quant[]">
        </label>
        <div>
            <button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
        </div>
    </fieldset>
    <div class="form-group">
        <label for="name" class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
            <input type="text" class="form-control name" name="name">
        </div>
    </div>                      
    <div class="form-group">
        <button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
    </div>
</form>
<div class="orders_preview"></div>

我的jquery:

$("form input.name").on("focus", function(e){
    var prod = $("form select[name='prod_type[]']").map(function(){
                return $(this).val(); 
                }).get();
    var quant = $("form input[name='quant[]']").map(function(){
                return ($(this).val()); 
                }).get();
    var table = '';
        table = '<table>';
        table = '<thead>';
        table = '<tr>';
        table = '<th>Product</th>';
        table = '<th>Quantity</th>';
        table = '</tr>';
        table = '</thead>';
        table = '<tbody>';
        table = '<tr>';
        table = '<td>'+prod+'</td>';
        table = '<td>'+quant+'</td>';
        table = '</tr>';
        table = '</tbody>';
        table = '</table>';
    $(".orders_preview").append(table);
 });

Answer 1

我将稍微修改您的 jquery，将事件处理程序更改为“on Change”而不是“on focus”。另外，就在开始 tr 标记之前，我将循环遍历您的 var prod 值，如下所示；

$("form").on("change", function(e) { //to generate a preview table
    var prod = $("form select[name='prod_type[]']")
    var quant = $("form input[name='quant[]']")
    var table = '';
    table += '<table>';
    table += '<thead>';
    table += '<tr>';
    table += '<th>Product</th>';
    table += '<th>Quantity</th>';
    table += '</tr>';
    table += '</thead>';
    table += '<tbody>';
    prod.each(function(i) {
      table += '<tr>';
      table += '<td>' + $(this).val() + '</td>';
      table += '<td>' + quant.eq(i).val() + '</td>';
      table += '</tr>';
    })
    table += '</tbody>';
    table += '</table>';
    $(".orders_preview").html(table);
  });