2

Seguinte, vou ter que adicionar radiobuttons dinamicamente, nisso elas vão ter que poder escrever. Elas vem como label ne? Eu precisava poder conseguir editar essa label, poderia ser uma text tambem, o importante é conseguir adicionar a radiobutton e o usuario poder escrever o que quiser na label

inserir a descrição da imagem aqui


Obrigada por responder Junior, só uma duvida. meu html ta assim:

                  <div class="form-group esconder" id="id_2">
              <div class="panel panel-default">
                 <div class="panel-body">
                    <div id="multipla-escolha">
                       <label class="" for="orderBy">Pergunta</label>
                       <input class="form-control " type="text" placeholder="Pergunta">
                       <div class="container">
                          <div id="radios">
                             <div>
                                <input type="radio" value="teste" name="data">
                             </div>
                          </div>
                          <button id="add">+</button>
                       </div>
                    </div>
                 </div>
              </div>
           </div>

e quando renderiza ele já traz 2 radio, e quando eu clico em qualquer coisa, ele adiciona mais radios, sabe o que pode ser?

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
    if(event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
      $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
      $(this).prop('contenteditable', false); // Desabilita o campo de edição
    }
  })
  .blur(function() {
    $(this).prev('input').val(this.innerHTML);
    $(this).prop('contenteditable', false);
  });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" value="" name="data">';
  html += '<label contenteditable="true"></label>';
  html += '</div>';
  
  $('#radios').append(html); // Adiciona o novo input dentro da div radios
  
  loadEditLabel(); // Carrega o radio para a edição
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" value="teste" name="data">
    <label>Teste</label>
  </div>
  <div>
    <input type="radio" value="teste2" name="data">
    <label>Teste2</label>
  </div>
</div>

<button id="add">+</button>


eu vou adicionar um print, pois simulando pelo jsfiddle não acontece o mesmo erro. Só pra entender, ele tá pegando todos os clicks antes mesmo de chegar na tela, e vai adicionando os radio.inserir a descrição da imagem aqui

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data">';
  html += '<input type="text" placeholder="Nova Entrada">';
  html += '</div>';

  $('#radios').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="Opção 1">
  </div>
</div>

<button id="add">+</button>

1
  • 1
    por favor, coloque algum trecho de código que você já fez para esclarecer.
    – RFL
    Commented 12/06/2017 às 18:23

2 Respostas 2

2

Você pode fazer assim também:

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
    if(event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
      $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
      $(this).prop('contenteditable', false); // Desabilita o campo de edição
    }
  })
  .blur(function() {
    $(this).prev('input').val(this.innerHTML);
    $(this).prop('contenteditable', false);
  });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" value="" name="data">';
  html += '<label contenteditable="true"></label>';
  html += '</div>';
  
  $('#radios').append(html); // Adiciona o novo input dentro da div radios
  
  loadEditLabel(); // Carrega o radio para a edição
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" value="teste" name="data">
    <label>Teste</label>
  </div>
  <div>
    <input type="radio" value="teste2" name="data">
    <label>Teste2</label>
  </div>
</div>

<button id="add">+</button>

OBS.: Foi testado no Chrome Versão 59.0

0
2

Você quer dizer alguma coisa nessa linha? O label pode ser um input de texto?

<h3>Sexo:</h3>
<form action="">
  <input type="radio" style="vertical-align: text-bottom;" name="gender" value="male"> <input type="text" placeholder="Masculino"><br>
  <input type="radio" style="vertical-align: text-bottom;" name="gender" value="female"> <input type="text" placeholder="Feminino"><br>
</form>

Utilizando o JS fornecido pelo @JuniorNunes você poderia também fazer alguma coisa nessa linha:

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data">';
  html += '<input type="text" placeholder="Nova Entrada">';
  html += '</div>';

  $('#radios').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="Opção 1">
  </div>
</div>

<button id="add">+</button>

3
  • Oi Leon, funcionou seu codigo tambem!! só caiu no mesmo problema que o do Junior. Estou tentando entender o porque
    – Isa
    Commented 12/06/2017 às 18:55
  • @IsabellaMeirelles Não consigo simular o seu problema aqui? Alguma chance de você usar um de nossos códigos e compartilhar o erro aqui? Commented 12/06/2017 às 19:13
  • Consegui resolver!! Só uma coisa, eu adicionei um botão remover conforme: jsfiddle.net/71hmxrr8, só que ele não funciona, nesse exemplo que vcs me passaram, teria que ser criado de outra forma?
    – Isa
    Commented 12/06/2017 às 21:21

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 .