Enviar dado de um input para outro

wneo · Novembro 25, 2014

Bom dia,

Estou montando um registro de historico, o qual está localizado dentro de um form de cadastro. Dentre essas informações de cadastro, possuimos um registro de historico, que deverá funcionar da seguinte forma:

- Um select, onde escolho o tipo de historico

- Uma textarea onde faço a descrição do historico desejado.(Ex: Tipo: Documento. Assunto:faltou a entrega do documento.)

- Um botão "Adicionar".

*Ao clicar nesse adicionar, o valor escolhido no tipo de historico deve ser inserido em um input ou div que está logo ao lado, como uma grade de visualização, possibilitando assim, que sejam inseridos diversos historicos para o mesmo cadastro.

*O cadastro e todos os registros do historico, somente serão gravados no banco, quando for acionado o submit principal do form, o qual está direcionado para o action do form, realizando assim o insert.

- Alguem sabe como montar o javascript para que o valor escolhido no select tipo seja transferido para uma div ou input ao lado(na msma pagina, enfileirando como uma lista de historicos adicionados)?

- O assunto descrito, precisará ficar armazenado em uma variavel php para que possa ser feito o insert do msmo no momento adequado..

Vou colocar abaixo a ideia visual do que descrevi:

<style>

.hist_adicionado{
	border:1px solid #bbb;
	width:460;
	height:100;
	float:right;
	margin-top:-100;
	padding-top:4;
}

.tipo_adicionado{
	border:1px solid #bbb;
	width:190;
	height:20;
	float:left;
	text-align:center;
	margin-left:35;
}

.data_adicionado{
	border:1px solid #bbb;
	width:90;
	height:20;
	float:left;
	text-align:center;

}

.hora_adicionado{
	border:1px solid #bbb;
	width:80;
	height:20;
	float:left;
	text-align:center;
}

#btn_add_hist{margin-left:373px;}

</style>

<fieldset class="field_hist">
<legend>Histórico</legend>


<label for="tipo_hist">Tipo:</label>

<div style="float:left;margin-left:0;">
<select name="tipo_hist" id="tipo_hist">
<option>tipo1</option>
<option>tipo2</option>
</select>
</div><!--end_float_tipo-->


<div style="float:left;margin-left:0;">
<label for="data_hist">Data:</label>
<input type="text" name="data_hist" id="data_hist" size="10" disabled />
</div><!--end_float_data-->

<div style="float:left;margin-left:0;">
<label for="hora_hist">Hora:</label>
<input type="text" name="hora_hist" id="hora_hist" size="10" disabled />
</div><!--end_float_hora-->

<br>
<br>


	
<label for="assunto_hist">Assunto:</label>
<textarea name="assunto_hist" id="assunto_hist" cols="47" rows="4">
</textarea>
<br>
<button type="button" id="btn_add_hist" name="btn_add_hist"> Adicionar > </button>



<div class="hist_adicionado">

<div class="tipo_adicionado">Tipo Histórico</div>
<!--<div id="tipo_add"></div>-->

<div class="data_adicionado">Data</div>
<!--<div id="data_add"></div>-->

<div class="hora_adicionado">Hora</div>
<!--<div id="hora_add"></div>-->

</div><!--end_hist_adicionado-->


</fieldset><!--end_fieldset_historico-->

Utilizei um script como exemplo, que está quase como preciso, vejam:

<style type="text/css">
    .aprovado{
        background-color: #060;
        color: #FFFFFF;
    }
    .reprovado{
        background-color: #f22;
        color: #E2E2E2;
    }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
         
        $("#btn").click(function(){
             
            $("#resposta").removeClass();
             
            var nome = $("#txtnome").val();
            var n1 = parseFloat ($("#txtn1").val());
            var n2 = parseFloat ($("#txtn2").val());
             
            var media = (n1 + n2) / 2;           
            $("#resposta").html(nome + ", " + media);
             
            if(media >= 7){
                $("#resposta").addClass("aprovado");
            }else{
                $("#resposta").addClass("reprovado");
            }
             
             
        });
         
    });
</script>
<h3>Ver Dados do Aluno</h3>
<form>
    Nome: <input type="text" name="nome" id="txtnome" />
    <br /><br />
    Nota1: <input type="text" name="n1" id="txtn1" />
    <br /><br />
    Nota2: <input type="text" name="n2" id="txtn2" />
    <br /><br />
    <input type="button" value="Enviar Dados" id="btn" />
</form>
<div id="resposta"></div>

- Nesse caso tenho 3inputs text onde posso informar qualquer dado e ao clicar no submit, os mesmos são exibidos na div id="resposta".

- O problema é que se eu escrevo outra coisa e clico no submit novamente, o resultado na div id="resposta" é substituído.

- Alguém saberia como incrementar esse script, possibilitando que as informações exibidas na div id="resposta" fossem acrescentadas uma abaixo da outra ao invés de substituídas?

William Bruno · Novembro 25, 2014

troque:

$("#resposta").html(nome + ", " + media);

por

$("#resposta").append(nome + ", " + media);

wneo · Novembro 25, 2014

Oi William! perfeito! Adicionei o append e agora está acrescentando ao invés de substituir.

Resta agora apenas mais uma necessidade para completar a questão...

- Cmo faço para enviar pro banco os dados exibidos na div resposta ?

_tentei colocar um input id ="resposta" mas não dá...

- Alguma idéia???

William Bruno · Novembro 25, 2014

Como vc quer enviar ? um por um ? tudo numa variável só ?

vai usar ajax ? vai enviar via form ?

Está bem parecido com isso aqui:

http://wbruno.com.br/javascript-puro/cadastro-de-conteudo-formulario-adiciona-dados-em-tabela-temporaria/

Veja que eu crio inputs hidden para guardar os campos, pq ter os dados prontos para serem enviados.

wneo · Novembro 26, 2014

Como você quer enviar ? um por um ? tudo numa variável só ?

vai usar ajax ? vai enviar via form ?

Está bem parecido com isso aqui:

http://wbruno.com.br/javascript-puro/cadastro-de-conteudo-formulario-adiciona-dados-em-tabela-temporaria/

Veja que eu crio inputs hidden para guardar os campos, pq ter os dados prontos para serem enviados.

William, perfeito, é bem essa a idéia!!!... Vou estudar esse codigo e já retorno após ver o resultado na minha aplicação

Boa tarde william,

estou tentando implementar o codigo de cadastro com tabela temporaria... estou com dificuldade para utilizar com <select>... Com input vai certo.. mas se tento <select name="tipo"><option value="tipo1">Tipo1</option></select> e pressiono ok, aparece no form de cadastrar como "undefined"... preciso ter um select nesse form com esse recurso..como posso implementar..?

William Bruno · Novembro 26, 2014

Pode sim.

Como vc tentou ?

wneo · Novembro 27, 2014

Pode sim.

Como você tentou ?

Então, utilizei todo codigo que voce mostrou...onde existe um form id ="form_prepare" e um form id="form_insert".

No form_prepare tem alguns inputs para escrever o que o usuario deseja, no seu exemplo nome,telefone e email... então no caso, tentei mudar o input do nome, para select, assim:

<select name="nome">[/size]

<option value="nome1">nome1</option>[/size]

<option value="nome2">nome2</option>[/size]

</select>[/size]

O restante deixei tudo igual para ver...mas quando clico no ok, e os dados vão para a tabela html logo abaixo, o que estava no select vem com o valor undefined...[/size]

Pode sim.

Como você tentou ?

Identifiquei o que estava faltando no meu caso companheiro =)...tem uma parte do script assim:

$('#form_prepare').submit(function(){		var $this = $( this ); 		var nome = $this.find("input,select[name='nome']").val(),			email = $this.find("input[name='email']").val(),			telefone = $this.find("input[name='telefone']").val();

Ali onde grifei, estava preparado para input, então precisei adicionar o select para que o valor fosse corretamente..^^...

Vou continuar implementando, retorno em breve

Pode sim.

Como você tentou ?

Estou utilizando form de cadastro onde tenho outros inputs de informações e o do historico onde estou usando o mecanismo que você ensinou... fiz com que o mesmo submit do cadastro servisse para o cadastro do historico, direcionando para o mesmo action do form...

Então adicionei no codigo de inserção, as linhas do codigo para o historico, seguindo o molde passado por vc:

$sql = "INSERT INTO cliente ( id, tipo, data, hora, assunto) VALUES "; 		$values = Array();		for( $i=0; $i<count( $_POST['tipo'] ); $i++ )		{			$values[] = "(NULL, '".filter( $_POST['tipo'][$i] )."',					'".filter( $_POST['data'][$i] )."',					'".filter( $_POST['hora'][$i] )."',                    '".filter( $_POST['assunto'][$i] )."')";		}		echo $sql.implode( ',', $values );	}function filter( $str ){	return addslashes( $str );//deixo demais filtros e validações por sua conta}?>

Até aih tudo bonito...Mas apenas mais uma questão, o print da sql está vindo quadriplicado...por exemplo:

escolho tipo1 e escrevo no assunto: olá...o resultado da sql vem: "tipo1,olá" ; "tipo1,olá" ; "tipo1,olá" ; "tipo1,olá"

William Bruno · Novembro 27, 2014

Então deve ter algo errado no teu js, no original funciona.

Poste o seu script completo.

wneo · Novembro 28, 2014

Então deve ter algo errado no teu js, no original funciona.

Poste o seu script completo.

SimSim, verdade, vc está certo!

Percebi que o que estava ocorrendo...era aqui no javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){	$('#form_prepare').submit(function(){		var $this = $( this ); 		var tipo = $this.find("input,select[name='tipo']").val(),			data = $this.find("input[name='data']").val(),			hora = $this.find("input[name='hora']").val(),			assunto = $this.find("textarea[name='assunto']").val(); 		var tr = '<tr>'+			'<td>'+tipo+'</td>'+			'<td>'+data+'</td>'+			'<td>'+hora+'</td>'+			'<td>'+'<div>'+assunto+'</div>'+'</td>'+			'</tr>'		$('#grid').find('tbody').append( tr ); 		var hiddens = '<input type="hidden" name="tipo[]" value="'+tipo+'" />'+			'<input type="hidden" name="data[]" value="'+data+'" />'+			'<input type="hidden" name="hora[]" value="'+hora+'" />'+			'<input type="hidden" name="assunto[]" value="'+assunto+'" />'; 		$('#form_insert').find('fieldset').append( hiddens ); 		return false;	});});</script>

Nesse trecho $('#form_insert').find('fieldset').append( hiddens ); eu precisei remover o find fieldset, ficando assim:

$('#form_insert').append( hiddens );

Porque meu form possui 4 fieldsets...por consequencia o historico repetia 4x...

Sendo assim, resolvido,

William, mto obrigado por tudo!

Continuamos na jornada, qualquer coisa chama aí!

Então deve ter algo errado no teu js, no original funciona.

Poste o seu script completo.

William, surgiu uma questão urgente referente a isso que eu não tinha percebido...Como faria para ter um botão de remover um item adicionado(antes de fazer o insert, isso ainda enquanto está na exibição da tabela temporaria)...

creio q seja alguma implementação no javascript..algo tipo removeClass..mas não sei como...mas é algo q se torna essencial nesse caso...

saberia me dizer???????

William Bruno · Novembro 28, 2014

Vc vai precisar usar um .remove()

para remover o elemento e tb apagar os inputs referentes aquele elemento.

wneo · Dezembro 2, 2014

você vai precisar usar um .remove()

para remover o elemento e tb apagar os inputs referentes aquele elemento.

Então considerando o javascript utilizado:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){	$('#form_prepare').submit(function(){		var $this = $( this ); 		var tipo = $this.find("input,select[name='tipo']").val(),			data = $this.find("input[name='data']").val(),			hora = $this.find("input[name='hora']").val(),			assunto = $this.find("textarea[name='assunto']").val(); 		var tr = '<tr>'+			'<td>'+tipo+'</td>'+			'<td>'+data+'</td>'+			'<td>'+hora+'</td>'+			'<td>'+'<div>'+assunto+'</div>'+'</td>'+			'</tr>'		$('#grid').find('tbody').append( tr ); 		var hiddens = '<input type="hidden" name="tipo[]" value="'+tipo+'" />'+			'<input type="hidden" name="data[]" value="'+data+'" />'+			'<input type="hidden" name="hora[]" value="'+hora+'" />'+			'<input type="hidden" name="assunto[]" value="'+assunto+'" />'; 		$('#form_insert').find('fieldset').append( hiddens ); 		return false;	});});</script>

Precisaria adicionar nessa linha $('#form_insert').append( hiddens );

*Algo desse tipo:

$('#form_insert').remove().append( hiddens );

isso?

você vai precisar usar um .remove()

para remover o elemento e tb apagar os inputs referentes aquele elemento.

seria nessa parte? $('#grid').find('tbody').append( tr ); ?

seria nessa parte? $('#grid').find('tbody').append( tr ); ?

preciso de uma luz nessa questão...

você vai precisar usar um .remove()

para remover o elemento e tb apagar os inputs referentes aquele elemento.

pensei em algo assim:

$(document).ready(function(){

$('#form_prepare').submit(function(){

var $this = $( this );

var tipo = $this.find("input,select[name=tipo]").val(),

data = $this.find("input[name=data]").val(),

hora = $this.find("input[name=hora]").val(),

assunto = $this.find("textarea[name=assunto]").val();

var tr = '<tr>'+

'<td>'+tipo+'</td>'+

'<td>'+data+'</td>'+

'<td>'+hora+'</td>'+

'<td>'+'<div>'+assunto+'</div>'+'</td>'+

'</tr>'

$('#grid').find('tbody').append( tr );

var hiddens = '<input type="hidden" name="tipo[]" value="'+tipo+'" />'+

'<input type="hidden" name="data[]" value="'+data+'" />'+

'<input type="hidden" name="hora[]" value="'+hora+'" />'+

'<input type="hidden" name="assunto[]" value="'+assunto+'" />';

/*tentativa de remover item adicionado*/

$(#remover).click(function(){

$(#remover).remove('<td>');[/size]

}[/size]

$('#form_insert').find('fieldset').append( hiddens );

return false;

});

cheguei perto?[/size]

você vai precisar usar um .remove()

para remover o elemento e tb apagar os inputs referentes aquele elemento.

ainda não consegui aplicar o remove...

Arquivado

Enviar dado de um input para outro

Recommended Posts

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante