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='java script:somente_numero(this);' onBlur='java script:qt_pessoas();'></td><td>Crianças</td><td><input type='text' value='' name='crianca"+iCount+"' id='crianca"+iCount+"' size='4' maxlength='3' onKeyup='java script:somente_numero(this);' onBlur='java script: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="java script: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="java script: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>
Pergunta
mathidios
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.
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.