Come on.
var copia;
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 class="itens">';
html += '<div id="radios"><input type="radio" disabled style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="" class="form-control radio-alinha text" placeholder="Adicionar Alternativa"><a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div></div>';
//html += '<input type="text" placeholder="Nova Entrada">';
//html += '<a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div>';
$('#campos').append(html); // Adiciona o novo input dentro da div radios
loadEditLabel(); // Carrega o radio para a edição
$(function(){
$('.del').click(function(event){
event.preventDefault();
$(this).parent().remove();
});
});
});
$('#btnexp').on('click', function(){
copia = $('#exp').html();
});
$('#btnexibir').on('click', function(){
$('.copiada').html(copia);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group esconder" id="id_TME">
<div class="panel panel-default" id='exp'>
<div class="panel-body">
<div id="multipla-escolha">
</div>
<div id="campos"></div>
<button id="add" class="btn btn-primary btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true">
</span>
</button>
</div>
</div>
<button ng-click="adicionaTarefa()" type="button" class="btn btn-primary btn-md" data-dismiss="modal" id="btn-cadastra-tarefa"><span class="glyphicon glyphicon-ok-sign"></span> Salvar</button>
</div>
<div id='btnexp'>Copiar</div>
<div id='btnexibir'>Exibir Copia</div>
<div class='copiada'></div>
<script src="bootstrap/js/bootstrap.min.js"></script>
What was done
I created a global variable called copia
which will get all the contents of the div of class panel panel-default
, I created a id='exp'
for it.
jquery's .html () event gets ALL the contents of the selected div.
We apply all this content to the variable copia
. And later we assign the contents of this variable to another div, for the copy to be performed.
To visualize the operation do what you want with the inputs, then click copy and then copy.
Remembering that I'm showing you how to replicate the exact contents of the div. You will have to adapt to your own code.