Create an element with a list of values entered by the user

Question

Create an element with a list of values entered by the user

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a simple program, which takes the value of a id1 text box and after pressing the button it throws this text (function Enviar1 ) to another text box id2 . What I need to do is delete this id2 and show the text in items.

function Enviar1() {
  var valor = document.getElementById('id1').value;
  document.getElementById('id2').value = valor;
}

<input id="id1" type="text" />
<input id="id2" type="text" />
<input id="botao" type="button" value="Ok" onclick="Enviar1()">

I would like every time I type text in id1 and press OK, it would be creating new items, without deleting the first, to create items one underneath the other. Thanks for the help! :)

....

Already updating the content with the help of colleagues ... just to be clearer, what I have so far is like this. I would like to be able to edit the already written and sent items now, and even erase them if possible. Thank you for your help!! : D

Update with pure JS

ServiceReportMaker Test

var menu_dropdown = document.getElementById("selecao");

menu_dropdown.addEventListener("change", function(){

    var valor_selecionado = menu_dropdown.options[menu_dropdown.selectedIndex].value;

    if(valor_selecionado == "personalizar"){
        document.getElementById("div_personalizar").style.visibility= "";
    } else {
        document.getElementById("caixa1").value = valor_selecionado;
        document.getElementById("div_personalizar").style.visibility = "hidden";
    }

});

function Enviar1()
{
  var ul = document.getElementById("itens");
  var li = document.createElement("li");
  var valor = document.getElementById('id1').value;
  li.appendChild(document.createTextNode(valor));
  ul.appendChild(li);
}

<select id="selecao">
    <option value="" selected > Selecionar empresa </option>
    <option value="1ª opção" >Primeira opção aqui</option>
    <option value="2ª opção">Segunda opção aqui</option>
</select>

<input id="caixa1" type="text" />

<div id="div_personalizar" style="visibility: hidden;"></div>

<input type="text" id="id1" /> 
<input type="button" value="OK" onclick="Enviar1()" />
<ul id="itens"></ul>

javascript html

asked by anonymous 28.04.2017 / 02:01

2 answers

0

For the item exclusion feature, I suggest you enter a link next to each item, and write a function that removes that specific item:

var menu_dropdown = document.getElementById("selecao");

menu_dropdown.addEventListener("change", function(){

    var valor_selecionado = menu_dropdown.options[menu_dropdown.selectedIndex].value;

    if(valor_selecionado == "personalizar"){
        document.getElementById("div_personalizar").style.visibility= "";
    } else {
        document.getElementById("caixa1").value = valor_selecionado;
        document.getElementById("div_personalizar").style.visibility = "hidden";
    }

});

function Enviar1()
{
  var ul = document.getElementById("itens");
  var li = document.createElement("li");
  var valor = document.getElementById('id1').value;
  li.appendChild(document.createTextNode(valor));
  li.appendChild(document.createTextNode(" "));
  var iconeRemover = document.createElement("a");
  iconeRemover.appendChild(document.createTextNode("X"));
  var hrefAttr = document.createAttribute("href");
  hrefAttr.value = "#";
  iconeRemover.setAttributeNode(hrefAttr);   
  var clickEvent = document.createAttribute("onclick");
  clickEvent.value = "RemoverItem(this.parentNode)";
  iconeRemover.setAttributeNode(clickEvent);   
  li.appendChild(iconeRemover);
  ul.appendChild(li);
}

function RemoverItem(li) 
{
  var ul = document.getElementById("itens");
  ul.removeChild(li);
}

<select id="selecao">
    <option value="" selected > Selecionar empresa </option>
    <option value="1ª opção" >Primeira opção aqui</option>
    <option value="2ª opção">Segunda opção aqui</option>
</select>

<input id="caixa1" type="text" />

<div id="div_personalizar" style="visibility: hidden;"></div>

<input type="text" id="id1" /> 
<input type="button" value="OK" onclick="Enviar1()" />
<ul id="itens"></ul>

28.04.2017 / 03:42

Scraping in Python. Assemble an insert [closed] How to record a student's grades using arrayList

score 1 · Accepted Answer

You can solve this problem by adding items dynamically in a HTML (ul / li list):

function Enviar1()
{
  var ul = document.getElementById("itens");
  var li = document.createElement("li");
  var valor = document.getElementById('id1').value;
  li.appendChild(document.createTextNode(valor));
  ul.appendChild(li);
}

<input type="text" id="id1" /> <input type="button" value="OK" onclick="Enviar1()" />

<ul id="itens">
</ul>