自动传播由json数据动态组成的不同输入类型的表单

如何解决自动传播由json数据动态组成的不同输入类型的表单

我想自动自动填充由不同输入类型（选择框和文本区域）组成的表单。我能够使输入框正常工作，这是一个示例：

function autofill(){

    var data = [{visible_retail: "0",brand: "cool!",description: "hello there!"}];

    console.log(data);

    data.map(function(item) { 
        for (var key in item) 

            $('input[id=product-'+key+']').val(item[key]);

    }).join();


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="product-form">
<div class="form-group row">
    <label for="product-visible_retail" class="col-4 col-form-label">Visibility (Retail)</label>
    <div class="col-8">
        <select class="form-control" id="product-visible_retail" required>
            <option value="1">Shown</option>
            <option value="0">Hidden</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label for="product-brand" class="col-4 col-form-label">Brand</label>
    <div class="col-8">
        <input class="form-control" type="text" value="" id="product-brand" maxlength="50" required>
    </div>
</div>
<div class="form-group row">
    <label for="product-description" class="col-4 col-form-label">Description</label>
    <div class="col-8">
        <textarea class="form-control" id="product-description" rows="4" cols="50" maxlength="65535" required></textarea>
    </div>
</div>
</form>

<button onclick="autofill()">auto fill</button>

编辑：我发布的表格只是一个例子。实际上，我有数百个字段需要自动传播。因此，单独定义它们并不是最佳选择。

解决方法

问题是 textarea 控件不是输入。而且，您应该使用.html()或.text()在其中设置一个值。

我对您的代码做了一些修改：

function autofill(){

    var data = [{visible_retail: "0",brand: "cool!",description: "hello there!"}];

    console.log(data);

    data.map(function(item) { 
        for (var key in item) 
            if(key == "description")
                $('#product-' + key).text(item[key]);
            else if(key == "visible_retail")
                $('#product-' + key).val(item[key]);
            else
                $('input[id=product-'+key+']').val(item[key]);

    }).join();


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="product-form">
<div class="form-group row">
    <label for="product-visible_retail" class="col-4 col-form-label">Visibility (Retail)</label>
    <div class="col-8">
        <select class="form-control" id="product-visible_retail" required>
            <option value="1">Shown</option>
            <option value="0">Hidden</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label for="product-brand" class="col-4 col-form-label">Brand</label>
    <div class="col-8">
        <input class="form-control" type="text" value="" id="product-brand" maxlength="50" required>
    </div>
</div>
<div class="form-group row">
    <label for="product-description" class="col-4 col-form-label">Description</label>
    <div class="col-8">
        <textarea class="form-control" id="product-description" rows="4" cols="50" maxlength="65535" required></textarea>
    </div>
</div>
</form>

<button onclick="autofill()">auto fill</button>

快乐编码！

,

您可以使用JQuery执行类似的操作来动态添加行/列。我在评论中看到了您的问题。表行的CSS类应该是这样的。 <tr class="item-row"></tr>

$("#addrow").click(function(){
    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea class="item_name">Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea class="description_val">Description</textarea></td><td><textarea class="cost">N0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">N0</span></td></tr>');

    if ($(".delete").length > 0) $(".delete").show();
    bind();
  });
  
  bind();
  
  $(".delete").live('click',function(){
    $(this).parents('.item-row').remove();
    
    if ($(".delete").length < 2) $(".delete").hide();
  });

,

我们相距遥远。这是超级简单的解决方案...

function autofill(){

    var data = [{visible_retail: "0",description: "hello there!"}];

    console.log(data);

    data.map(function(item) { 
        for (var key in item) 

            $('#product-'+key).val(item[key]);

    }).join();


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="product-form">
<div class="form-group row">
    <label for="product-visible_retail" class="col-4 col-form-label">Visibility (Retail)</label>
    <div class="col-8">
        <select class="form-control" id="product-visible_retail" required>
            <option value="1">Shown</option>
            <option value="0">Hidden</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label for="product-brand" class="col-4 col-form-label">Brand</label>
    <div class="col-8">
        <input class="form-control" type="text" value="" id="product-brand" maxlength="50" required>
    </div>
</div>
<div class="form-group row">
    <label for="product-description" class="col-4 col-form-label">Description</label>
    <div class="col-8">
        <textarea class="form-control" id="product-description" rows="4" cols="50" maxlength="65535" required></textarea>
    </div>
</div>
</form>

<button onclick="autofill()">auto fill</button>