0

Sou novo em JavaScript e estou com um dilema. Eu consigo adicionar o conteúdo de um input text em um label, mas eu preciso fazer o conteúdo do label aparecer no input do tipo text mencionado, clicar no botão editar e mudar o conteúdo do label.

$(document).ready(function() {
    $("#add").click(function() {
    	var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
		var capturando = "";
		
		capturando = document.getElementById('valor').value;
		
		var x = 1;
        var label_topico = ("<h3><label class=\"li_001\"> " + capturando + " </label></h3>");
        var textarea_topico = ("<textarea class=\"input_text_001\" /></textarea>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
		
        removeButton.click(function() {
            $(this).parent().remove();
        });
		// acrescenta o label
        fieldWrapper.append(label_topico);
		// acrescenta o textarea
        fieldWrapper.append(textarea_topico);
		// acrescenta o botão remover
        fieldWrapper.append(removeButton);
		// acrescenta o bloco div com o label, textarea e o botão remover
        $("#buildyourform").append(fieldWrapper);
		// limpa a caixa de texto
		document.getElementById("valor").value = "";
    });
    $("#edit").click(function() {
	document.getElementById("valor").value = "";
	});
});
<div id="buildyourform">
	<input type="text" id="valor" class="input_text_001">
	<input type="button" value="Add a field" class="add" id="add" />
<input type="button" value="Edit a field" class="edit" id="edit" />
</div>

1 Resposta 1

1

Crie um event handler para capturar um clique nas labels pela classe .li_001 (classe das labels) adicionando o texto da label clicada no input#valor e atribuindo a label clicada numa variável declarada antes sem nenhum valor:

var editando;
$(document).on("click", ".li_001", function(){
   $("#valor").val($(this).text().trim());
   editando = $(this);
});

No $("#add").click(function() { remova o valor da variável editando, pois quando você adicionar um novo elemento significa que não é mais uma edição:

$("#add").click(function() {
   editando = null;
   // resto do código

No $("#edit").click(function() { insira um if verificando se a variável editando possui valor, significando que alguma label está sendo editada, e também após a edição, esvaziar a variável editando:

$("#edit").click(function() {
   if(editando){
      editando.text($("#valor").val());
      editando = null;
   }
   document.getElementById("valor").value = "";
});

Isso é tudo. Veja funcionando:

$(document).ready(function() {
   
   var editando;
   $(document).on("click", ".li_001", function(){
      $("#valor").val($(this).text().trim());
      editando = $(this);
   });
   
    $("#add").click(function() {
       editando = null;
    	var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
		var capturando = "";
		
		capturando = document.getElementById('valor').value;
		
		var x = 1;
        var label_topico = ("<h3><label class=\"li_001\"> " + capturando + " </label></h3>");
        var textarea_topico = ("<textarea class=\"input_text_001\" /></textarea>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
		
        removeButton.click(function() {
            $(this).parent().remove();
        });
		// acrescenta o label
        fieldWrapper.append(label_topico);
		// acrescenta o textarea
        fieldWrapper.append(textarea_topico);
		// acrescenta o botão remover
        fieldWrapper.append(removeButton);
		// acrescenta o bloco div com o label, textarea e o botão remover
        $("#buildyourform").append(fieldWrapper);
		// limpa a caixa de texto
		document.getElementById("valor").value = "";
    });
      $("#edit").click(function() {
         if(editando){
            editando.text($("#valor").val());
            editando = null;
            document.getElementById("valor").value = "";
         }
      });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buildyourform">
   <input type="text" id="valor" class="input_text_001">
   <input type="button" value="Add a field" class="add" id="add" />
   <input type="button" value="Edit a field" class="edit" id="edit" />
</div>

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 .