Create an element with a list of user-informed values

Asked

Viewed 487 times

0

I have a simple program that takes the value of a text box id1 and after pressing the OK button plays this text (function Enviar1) to another text box id2. What I need to do is eliminate this id2 and display 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 a text in id1 and press OK, he was creating new items, without deleting the first, to create items under each other. Thanks for your help! :)

....

Already updating the content with the help of colleagues... Just to be clear, what I have so far is like this. I would like to be able to edit the items already written and sent now, and even delete them if possible. Thanks for the help!! D

Update with pure JS

Test Servicereportmaker 

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
  • 1

    Eduardo, I believe this new role should be the subject of a new question here by Sopt. As you did not specify the whole problem initially, the answers previously given to this amendment would not make much sense, as they would only answer part of the question. Feel free to create another question by placing the code you have, describing the need to delete and change the items.

2 answers

1


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

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>

  • 1

    Can add document.getElementById('id1').value = ''; at the end of the function to remove the contents of the input once the OK button is pressed, making it easier to register new values.

  • Hello Marcell. It worked perfectly!! Let me take advantage and ask you one more thing: What I want to do is to report various equipment problems and generate a technical report. How do I edit the items I’ve already sent by pressing OK? There’s a way?

0

For item deletion functionality, I suggest entering a link next to each of them, and writing 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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.