Question posted in
You can find the official documentation here.

Auto propagate form consisting of different input types from json data dynamically – Jquery ajax

I want to auto populate a form consisting of different input types (select boxes and text areas) dynamically. I am able to get input boxes working just fine, here is an example:

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>

Edit: the form I posted is just an example. In reality I have hundreds of fields that need to be auto propagated. Hence defining them individually really isn’t an optimal.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    we were way off. Here is the super simple solution...

    function autofill(){

    var data = [{visible_retail: "0", brand: "cool!", 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>


  2. 0

    The issue is that a textarea control is NOT an input. And also, you should use .html() or .text() to set a value in it.

    I did a little modification to your code:

    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>
    Login or Signup to reply.
  3. 0

    You can do something like this with JQuery to add rows/columns dynamically. I saw your question in the comments. CSS class of your table row should be something like this. <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();
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search