Apaga dados do campo anterior

mathidios · Junho 17, 2011

Ola pessoal,

To com um problema meio estranho aqui.

Estou fazendo um html onde a pessoas pode inserir quantos linhas quiser e cada linha desta existem dois campos inputs que recebem valor.

No IE8 esta funcionando perfeitamente, porém no Chrome e no Safari, quando o usuário tenta inserir mais um campo os dados dos inputs da linha anterior se apagam.

Segue abaixo o código utilizado.

<html>  
<head>
       <title>RomingList</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link href="_style/jquery.click-calendario-1.0.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="_scripts/jquery.js"></script>
<script type="text/javascript" src="_scripts/jquery.click-calendario-1.0-min.js"></script>		
<script type="text/javascript" src="_scripts/exemplo-calendario.js"></script>
<script language="JavaScript" type="text/javascript">   

//Não altere esses valores!
var iCount = 0;
var iCampos = 1;
var hidden1; 


//Definindo quantos campos poderão ser criados (máximo);
var iCamposTotal = 1; 



//Função que adiciona os campos;
function addInput() { 

var op = document.getElementById('pessoas').value;  
if(op == "" || op == "0"){
alert("Preencha antes o campo QTD DE PESSOAS!");
}else{
if (iCampos >= iCamposTotal) {

       hidden1 = document.getElementById("hidden1");
	var toto = Number(Math.floor(op/3));
	var quart = iCampos;

	var op2 = Number(toto-1);
	//var tttoo = Math.round(Number((op/3)).toFixed(2));
	if(quart < toto){
	//document.getElementById('veri').style.background="#00CC00";
	//document.getElementById('veri').style.color="#ffffff";
	//document.getElementById('veri').innerHTML = "Média de "+toto+" apartamentos!";
	}
		if(quart == op2){
		document.getElementById('veri').style.background="#f0ff00";
		document.getElementById('veri').style.color="#000000";
		document.getElementById('veri').innerHTML = "Sua RomingList está no limite de apartamentos disponibilizados para a quantidade de pessoas!";
		alert('Sua RomingList esta no limite de apartamentos disponibilizados para a quantidade de pessoas!');
		}
		if(quart > toto){
		document.getElementById('veri').style.background="#ff0c00";
		document.getElementById('veri').style.color="#ffffff";
		document.getElementById('veri').innerHTML = "O numero de apartamentos ultrapassou o limite permitido. Entre em contato para ver disponibilidade ou reduza o numero de apartamentos.";
		alert('O numero de apartamentos ultrapassou o limite permitido. Entre em contato para ver disponibilidade ou reduza o numero de apartamentos.\n\n');
		}

   document.my_form.apartament.value = iCampos;

       //Criando uma variável que armazenará as informações da linha que será criada.
       //Os campos estão sendo colocados no interior de uma div, pois a linha contém muitos elementos;
       //Basta excluir a div, para excluir todos os elementos da linha;
var texto = "<div id="+iCount+"><table align='center' width='10px' border='0'><tr align='center'><td>Tipo</td><td align='left'><select name='tipo"+iCount+"'><option value='casal'>Casal</option><option value='casal_1'>Casal + 1 Solteiro</option><option value='casal_2'>Casal + 2 Solteiro</option><option value='casal_3'>Casal + 3 Solteiro</option><option value='duplo'>Duplo</option><option value='triplo'>Triplo</option><option value='quadruplo'>Quadruplo</option><option value='quintuplo'>Quintuplo</option></select></td><td>Adultos</td><td><input type='text' value='' name='adulto"+iCount+"' id='adulto"+iCount+"' size='4' maxlength='3' onKeyup='javascript:somente_numero(this);'  onBlur='javascript:qt_pessoas();'></td><td>Crianças</td><td><input type='text' value='' name='crianca"+iCount+"' id='crianca"+iCount+"' size='4' maxlength='3' onKeyup='javascript:somente_numero(this);' onBlur='javascript:qt_pessoas();'></td><td><input type='button' value='Excluir apartamento' onClick='removeInput("+iCount+")'></td></tr><br /></table></div>";            

       //Capturando a div principal, na qual os novos divs serão inseridos:
       var camposTexto = document.getElementById('camposTexto');   
       camposTexto.innerHTML = camposTexto.innerHTML+texto;

       //Escrevendo no hidden os ids que serão passados via POST;
       //No código ASP ou PHP, você poderá pegar esses valores com um split, por exemplo;
               if (hidden1.value == "") {
                       document.getElementById("hidden1").value = iCount;
               }else{
                       document.getElementById("hidden1").value += ","+iCount;
               }
iCount++;
iCampos++;
}   
}
}



//Função que remove os campos;
function removeInput(e) {
  var pai = document.getElementById('camposTexto');
  var filho = document.getElementById(e);
  hidden1 = document.getElementById("hidden1");
  var campoValor = document.getElementById(e).value;
  var lastNumber = hidden1.value.substring(hidden1.value.lastIndexOf(",")+1);



  if(confirm("A linha sera excluida!\n\nDeseja prosseguir?")){
  			//exclui numero de adultos e criancas
	var valor = document.getElementById("adulto"+e+"");
	var adulto = Number(valor.value);
	var valor2 = document.getElementById("crianca"+e+"");
	var crianca = Number(valor2.value);
	var total = document.my_form.pessoas2.value;

	var tt = total - adulto - crianca;
	document.my_form.pessoas2.value = tt;
               var removido = pai.removeChild(filho);
               //Removendo o valor de hidden1:
               if (e == hidden1.value) {
                       hidden1.value = hidden1.value.replace(e,"");
               }else if(e == lastNumber) {
                       hidden1.value = hidden1.value.replace(","+e,"");
               }else{
                       hidden1.value = hidden1.value.replace(e+",","");           
               }
       iCampos--;
	document.my_form.apartament.value = document.my_form.apartament.value - 1;



	var op = document.getElementById('pessoas').value;  
	var toto = Number(Math.floor(op/3));
	var quart = iCampos-1;

	var op2 = Number(toto);
	if(quart < toto){

	document.getElementById('veri').style.background="#00CC00";
	document.getElementById('veri').style.color="#ffffff";
	document.getElementById('veri').innerHTML = "Média de "+toto+" apartamentos!";
	}
	if(quart == op2){

	document.getElementById('veri').style.background="#f0ff00";
	document.getElementById('veri').style.color="#000000";
	document.getElementById('veri').innerHTML = "Sua RomingList está no limite de apartamentos disponibilizados para a quantidade de pessoas!";
	alert('Sua RomingList esta no limite de apartamentos disponibilizados para a quantidade de pessoas!');
	}
	if(quart > toto){

	document.getElementById('veri').style.background="#ff0c00";
	document.getElementById('veri').style.color="#ffffff";
	document.getElementById('veri').innerHTML = "O numero de apartamentos ultrapassou o limite permitido. Entre em contato para ver disponibilidade ou reduza o numero de apartamentos.";
	alert('O numero de apartamentos ultrapassou o limite permitido. Entre em contato para ver disponibilidade ou reduza o numero de apartamentos.\n\n');
	}




       }
}
function entrada(campoData){
             var data = campoData.value;
             if (data.length == 2){
                 data = data + '/';
                 document.my_form.entrada.value = data;
     return true;              
             }
             if (data.length == 5){
                 data = data + '/';
                 document.my_form.entrada.value = data;
                 return true;
             }
        }
function saida(campoData){
             var data = campoData.value;
             if (data.length == 2){
                 data = data + '/';
                 document.my_form.saida.value = data;
     return true;              
             }
             if (data.length == 5){
                 data = data + '/';
                 document.my_form.saida.value = data;
                 return true;
             }
        }

function somente_numero(campo){  
var digits="0123456789./ -()"  
var campo_temp   
   for (var i=0;i<campo.value.length;i++){  
       campo_temp=campo.value.substring(i,i+1)   
       if (digits.indexOf(campo_temp)==-1){  
           campo.value = campo.value.substring(0,i);  
       }  
   }  
} 

function qt_pessoas(){
var numes = document.getElementById("hidden1").value;
var arr = numes.split(",");
var t_a = arr.length;
var maior = 0;
for(i=0; i<=t_a; i++){
if(maior <= arr[i]){
maior = arr[i];
}
}

w = Number(0);
sm = Number(0);
while(w<=maior){

var valor = document.getElementById("adulto"+w+"");
var adulto = Number(valor.value);

var valor2 = document.getElementById("crianca"+w+"");
var crianca = Number(valor2.value);


var sm = Number(adulto + crianca + sm);
w++;
}

document.my_form.pessoas2.value = sm;
}
function ValidaEmail(){

//Checando se o endereço de e-mail é válido
if(document.my_form.email.value ==""){
}else{
if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.my_form.email.value))) {
	alert("É necessário o preenchimento de um endereço de e-mail válido.");
	document.my_form.email.focus();
	document.my_form.email.value="";
		}
}
}

function validatel() {
if(document.my_form.telefone.value !=""){
if(document.my_form.telefone.value.length == 12) {

}else{
alert("Telefone incorreto!");
document.my_form.telefone.focus();
document.my_form.telefone.value = "";
}
}
}

function mascara_telefone() {
if(document.my_form.telefone.value.length == 0) {
document.my_form.telefone.value += '(';
}
if(document.my_form.telefone.value.length == 3) {
document.my_form.telefone.value += ')';
}
}


function habilitar(){
	if(document.my_form.nome.value == ""){
		alert("Campo NOME vazio ou incorreto!");
		document.my_form.nome.focus();return false;
	}else{
		if(document.my_form.email.value == ""){
		alert("Campo EMAIL vazio ou incorreto!");
		document.my_form.email.focus();return false;
		}else{
			if(document.my_form.telefone.value == ""){
			alert("Campo TELEFONE vazio ou incorreto!");
			document.my_form.telefone.focus();return false;
			}else{
				if(document.my_form.entrada.value == ""){
				alert("Campo CHECK-IN vazio ou incorreto!");
				document.my_form.entrada.focus();return false;
				}else{
					if(document.my_form.saida.value == ""){
					alert("Campo CHECK-OUT vazio ou incorreto!");
					document.my_form.saida.focus();return false;
					}else{
						if(document.my_form.pessoas.value == ""){
						alert("Campo QUANTIDADE DE PESSOAS vazio ou incorreto!");
						document.my_form.pessoas.focus();return false;
						}else{
						if(document.my_form.pessoas.value != document.my_form.pessoas2.value){
						alert("Quantidade de pessoas inseridas nos apartamentos não correspondem ao total de pessoas informado!");
						document.my_form.pessoas.focus();return false;
						}else{
						if(confirm("Tem certeza que inseriu todos os dados corretamente?\n\n Inseriu os QUARTOS corretamente?")){
							return true;
							}else{
							return false;
							}
						}}
					}
				}
			}
		}
	}
}
</script> 
</head>  

<body bgcolor="#e1e1e1" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;">

<form  name="my_form" id="my_form" action="enviarom.php" method="post" onSubmit="return habilitar(this);">   
<table align="center" width="35%" border="0">
<tr>
<td align="center" colspan="3"><b>Preencha os campos abaixo para envio do RomingList</b><br /><br /><br /></td>
</tr>
<tr>
<td align="right" width="35%">Nome do guia</td>
<td colspan="2"><input type="text" value="" name="nome" id="nome" size="50"></td>
</tr>
<tr>
<td align="right" width="35%">email</td>
<td colspan="2"><input type="text" value="" name="email" id="email" size="50" onBlur="javascript:ValidaEmail(this);"></td>
</tr>
</tr>
<tr>
<td align="right" width="35%">Telefone</td>
<td colspan="2"><input name="telefone" type="text" id="telefone" size="15" maxlength="12" onKeyup="somente_numero(this);" onKeyPress="mascara_telefone();" onBlur="validatel();"></td>
</tr>
<tr>
<td align="right" width="35%">Check-in</td>
<td colspan="2"><input type="text" name="entrada" id="data_2" size="10" maxlength="10" readonly="readonly" /></td>
</tr>
<tr>
<td align="right" width="35%" >Check-out</td>
<td colspan="2"><input type="text" name="saida" id="data_1" size="10" maxlength="10" readonly="readonly" /></td>
</tr>
<tr>
<td align="right" width="35%">Qtd de pessoas</td>
<td width="6%"><input type="text" value="" name="pessoas" id="pessoas" size="4" maxlength="3" onKeyup="javascript:somente_numero(this);"></td><td width="59%"></td>
</tr>
<tr>
<td align="right" width="35%" colspan="3"><div id="veri" align="center" style="width:100%;"></div></td>
</tr>
</table>
<table align="center" width="1px" border="0">
<tr>
<td colspan="6" align="center"> 
<input type="button" value="Adicionar mais um apartamento" name="add_input" id="add_input" onClick="addInput();">  
</td>
</tr>
</table>

<div id="camposTexto"></div>
<br />
<table align="center" border="0">
<tr>
<td>Quantidade de apartamentos</td><td><input name="apartament" type="text" value="0" size="4" maxlength="3" readonly ></td>
<td>Quantidade de pessoas</td><td><input name="pessoas2" type="text" value="0" size="4" maxlength="3" readonly ></td>
</tr>
</table>
<div align="center"><input type="submit" name="submit" id="submit" value="  Enviar Roming List  " ></div>
<br><input type="hidden" name="hidden1" id="hidden1" value="" >
</form>  

</body>  
</html>

William Bruno · Junho 17, 2011

use um .appendChild() no lugar do .innerHTML.

pois com o inner você reescreve todo o elemento, até oque já estava lá.

Entrar

Arquivado

Apaga dados do campo anterior

Recommended Posts

mathidios 0

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

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante