Create dynamic inputs from a json object

Navigation
1

I have a form that the user can add several languages that knows how to speak, this form consists of a dropdown and a button to add the respective language. At the moment I click the add button it adds me new object to an array, as I show in the following image:

WhatIwantedtodoisthatwheneveranewlanguageisadded,atthesametimeIcreatebelowthedropdownaninputhiddenordisablewiththename/idofthelanguageselectedasanexamplethatIshowbelow:/p>

NextisthecodeI'musingtoaddtheobjectfromthedropdowntothearray

$(document).ready(function() {               

 var options = [];

  // adicionar linguas ao ao objeto para mostrar
  $('#add-lingua').click( function () {

    options.push({
      "id" :  $("#selectLinguas option:selected").val(),
      "lingua" :  $("#selectLinguas option:selected").text(),
    });
    $("#selectLinguas option:selected").remove();
    console.log(options);      
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group selectLinguas">
  <div class="col-md-9">
    <label for="selectLinguas"><strong>Conhecimento de línguas</strong></label>
    <select class="form-control" id="selectLinguas" name="selectLinguas">
      <option value="1">Lingua 1</option>
      <option value="2">Lingua 2</option>
      <option value="3">Lingua 3</option>
      <option value="4">Lingua 4</option>
    </select>
  </div>
  <label for="add-lingua"></label>
  <div class="col-md-3"><button type="button" class="btn form-control add-lingua" id="add-lingua">Adicionar</button></div>
</div>
<div class="form-group selectedLinguas">
  <div class="col-md-6">
    <input type="text" disabled name="linguaSelecionada" id="linguaSelecionada" class="form-control" value=""/>
  </div>
  <div class="col-md-3">
    <select class="form-control" id="selectNivelLingua" name="selectNivelLingua">
      <option value="satisfaz">Satisfaz</option>
      <option value="bom">Bom</option>
      <option value="muito bom">Muito Bom</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="button" id="remove-Lingua" class="btn btn-danger"><i class="fa fa-close"></i></button>
  </div>
</div>
    
asked by anonymous 10.02.2017 / 16:44

1 answer

2

JQUERY APPEND

With jQuery .append () you resolve this as follows: 

$(document).ready(function() {               

 var options = [];

  // adicionar linguas ao ao objeto para mostrar
  $('#add-lingua').click( function () {

    options.push({
      "id" :  $("#selectLinguas option:selected").val(),
      "lingua" :  $("#selectLinguas option:selected").text(),
    });
    
    $("#append").append("<input type='hidden' value='"+$("#selectLinguas option:selected").val()+"' id='appended"+$("#selectLinguas option:selected").val()+"'>"); // Append um input HIDDEN

    $("#selectLinguas option:selected").remove();
    console.log(options);      
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group selectLinguas">
  <div class="col-md-9">
    <label for="selectLinguas"><strong>Conhecimento de línguas</strong></label>
    <select class="form-control" id="selectLinguas" name="selectLinguas">
      <option value="1">Lingua 1</option>
      <option value="2">Lingua 2</option>
      <option value="3">Lingua 3</option>
      <option value="4">Lingua 4</option>
    </select>
  </div>
  <label for="add-lingua"></label>
  <div class="col-md-3"><button type="button" class="btn form-control add-lingua" id="add-lingua">Adicionar</button></div>
</div>
<div class="form-group selectedLinguas">
  <div class="col-md-6">
    <input type="text" disabled name="linguaSelecionada" id="linguaSelecionada" class="form-control" value=""/>
  </div>
  <div class="col-md-3">
    <div id="append"></div><!-- Aqui serão colocados os Appends -->
    <select class="form-control" id="selectNivelLingua" name="selectNivelLingua">
      <option value="satisfaz">Satisfaz</option>
      <option value="bom">Bom</option>
      <option value="muito bom">Muito Bom</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="button" id="remove-Lingua" class="btn btn-danger"><i class="fa fa-close"></i></button>
  </div>
</div>
    
10.02.2017 / 17:22
How to modify a list in the global scope using a function? Python 3 Error initializing EvReflection Bool