0

Tenho um programa simples, que pega o valor de uma caixa de texto id1 e após pressionado o botão OK joga esse texto (função Enviar1) para uma outra caixa de texto id2. O que eu preciso fazer é eliminar essa id2 e mostrar o texto em itens.

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()">

Gostaria de cada vez que digitar um texto em id1 e pressionar OK, ele fosse criando novos itens, sem apagar o primeiro, para criar itens um embaixo do outro. Agradeço pela ajuda! :)

....

Já atualizando o conteúdo com a ajuda dos colegas... só pra ficar mais claro, o que tenho até agora está assim. Gostaria de poder editar os itens já escritos e enviados agora, e até apagá-los se possível. Obrigado pela ajuda!! :D

Atualização com JS puro

Teste 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>

1
  • 1
    Eduardo, acredito que esta nova função deve ser alvo de uma nova pergunta aqui so SOpt. Como você não especificou todo o problema inicialmente, as respostas dadas anteriormente a esta alteração passariam a não fazer muito sentido, pois responderiam apenas parte da pergunta. Sinta-se livre para criar outra pergunta, colocando o código que tem, descrevendo a necessidade de exclusão e alteração dos itens.
    – Woss
    28/04/2017 às 1:46

2 Respostas 2

1

Você pode resolver esse problema adicionando itens dinamicamente em uma lista do 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>

2
  • 1
    Pode adicionar document.getElementById('id1').value = ''; ao final da função para remover o conteúdo do input assim que o botão OK for pressionado, facilitando o cadastro de novos valores.
    – Woss
    28/04/2017 às 0:30
  • Olá Marcell. Funcionou perfeitamente!! Deixa eu aproveitar e te pedir mais uma coisa: Isso que quero fazer é para relatar vários problemas de equipamentos e gerar um relatório técnico. Como eu faço para editar os itens que já enviei, pressionando o OK? Tem jeito?
    – Eduardo
    28/04/2017 às 0:31
0

Para a funcionalidade de exclusão de itens, sugiro introduzir um link ao lado de cada um deles, e escrever uma função que remove aquele item específico:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .