Chrome x Jquery erro com Input Dinamica

1 resposta
fidelis_felipe

Pessoal,

To criando outra solução pra esse problema e logo posto aki, mas gostaria de sabe se alguem sabe o que venha a ser.

Tenho dois campos inseridos dinâmicos no html.
Só no chrome ele nao deixa eu escrever(nem clicar) no segundo campo a menos que seja precionado TAB.
Funciona perfeito no IE e no FIREFOX.

segue código.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Formulario 2 </title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="scripts/add.js"></script>
    </head>
    <body>	  
	  <form action="" method="post">
	  	<fieldset>
              <table cellspacing="0" cellpadding="0" border="0" width="705">
                <tbody>
                <tr bgcolor="#ed8000">
                  <td height="30" colspan="3"><span style="font-weight: bold;" class="font_white_02">  Participantes</span></td>
                </tr>
				<tr valign="top">
                  <td colspan="3">
                  	<div class="lang-9" id="inputs">
					</div>
				  </td>
				</tr>
				<tr valign="top">
                  <td><input id="add" value="Novo Participante" type="button"></td>
                  <td> </td>
                  <td> </td>
				</tr>
				<tr valign="top">
                  <td> </td>
                  <td> </td>
                  <td><input type="submit"  value="Confirmar e Enviar" name="Submit">
                  </td><!-- onclick="alert('Enviando')"-->
                </tr>
              </tbody>
			  </table>
			</fieldset>
       </form>
    </body>
</html>
jQuery(function($){
    var id = 1;
    $('#add').live('click', function(){
            $('#removeInput').remove();
			var HTML = '<div id="div-' + id + '" >\n';
			HTML += '      &lt;label&gt;Participante ' + id + '&lt;label&gt;<br /><br />\n';
            HTML += '      &lt;label&gt;Nome Completo&lt;label&gt;\n';
            HTML += '      &lt;input type="text" size="50" name="txtParticipantesNome_' + id + '" id="txtParticipantesNome_' + id + '"/&gt;<br />\n';
            HTML += '      &lt;label&gt;Nome Crachá&lt;label&gt;\n';
            HTML += '      &nbsp;&nbsp;&nbsp;&lt;input type="text" size="50" name="txtParticipantesCracha_' + id + '" id="txtParticipantesCracha_' + id + '"/&gt;<br /><br />\n';
			HTML +='&lt;input id="removeInput" type="button" value="Remove o último" /&gt;';
			HTML += '&lt;/div&gt;\n';
            $('#inputs').append(HTML);
            id++;
    });
    $('#removeInput').live('click', function(){
        if ($("input[id^='txtParticipantesNome']").length &gt; 1) {
            var id_last = $("input[id^='txtParticipantesNome_']:last").attr('id').replace('txtParticipantesNome_', '');
            $('#txtParticipantesNome_' + id_last + ',#div-' + id_last).remove();
        }
        else {
            var id_last = $("input[id^='txtParticipantesNome_']:last").attr('id').replace('txtParticipantesNome_', '');
            $('#txtParticipantesNome_' + id_last + ',#txtParticipantesCracha_' + id_last + ',#div-' + id_last).remove();
        }
    });
});

1 Resposta

fidelis_felipe

Olá pessoal, como prometi segue a solução, como não sei o que foi o erro fiz outro e acho que ficou bem melhor.
Funcionando no IE, Firefox e Chrome.

Segue o Código, está bem comentado, só usar, abraços.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
        &lt;title&gt;Formulario Div Dinamica By fidelisbsb&lt;/title&gt;
		&lt;script type="text/javascript" src="scripts/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
		&lt;script type="text/javascript" src="scripts/inputdinamica.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;	  
	  	&lt;fieldset&gt;
              &lt;table cellspacing="0" cellpadding="0" border="0" width="375"&gt;
                &lt;tbody&gt;
                &lt;tr bgcolor="#ed8000"&gt;
                  &lt;td height="30" colspan="3"&gt;&lt;span style="font-weight: bold;" &gt;&nbsp;&nbsp;Inputs Dinâmicas&lt;/span&gt;&lt;/td&gt;
                &lt;/tr&gt;
				&lt;tr valign="top"&gt;
				  &lt;td&gt;
				  	Dado 1
				  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                  	&lt;input type="text" id="campo1fixo" name="campo1fixo" size="50"/&gt;
				  &lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr valign="top"&gt;
				  &lt;td&gt;
				  	Dado 2
				  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                  	&lt;input type="text" id="campo2fixo" name="campo2fixo" size="50"/&gt;
				  &lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr valign="top"&gt;
				  &lt;td&gt;
				  	&nbsp;
				  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                  	&lt;input id="add" value="Adicionar Dados" type="button"&gt;
					&lt;div id="camposhidden"&gt;&lt;/div&gt;
					&lt;div id="campos"&gt;&lt;/div&gt;
				  &lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr valign="top" id="trremover"&gt;
                  &lt;td&gt;&nbsp;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;input id="remover" value="Remover Ultimo Valor" type="button"/&gt;&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr valign="top"&gt;
                  &lt;td&gt;&nbsp;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;input type="submit"  value="Enviar" name="Submit"&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
			  &lt;/table&gt;
			&lt;/fieldset&gt;
    &lt;/body&gt;
&lt;/html&gt;
//contator de quantidade de dados
var id = 1;
$(document).ready(function(){
    $("#remover").hide();
    $("#add").click(function(){
        //valida campos vazios forçando preenchimento
        if ($("#campo1fixo").val() == "") {
            $("#campo1fixo").focus();
        }
        else 
            if ($("#campo2fixo").val() == "") {
                $("#campo2fixo").focus();
            }
            //caso preenchidos
            else {
                //crio campos ocultos que receberao os valores
                var HTML = "&lt;input type='hidden' name='campo1" + id + "'  id='campo1" + id + "' value='" + $("#campo1fixo").val() + "' /&gt;";
                HTML += "&lt;input type='hidden' name='campo2" + id + "'  id='campo2" + id + "' value='" + $("#campo2fixo").val() + "' /&gt;";
                //adiciono esses campos em uma div
                $("#camposhidden").append(HTML);
                //passo os valores pra uma div que será mostrado como uma lista
                HTML = "&lt;div id='div" + id + "' &gt;Dado " + id + "<br />";
                HTML += "Dado1: " + $("#campo1fixo").val() + "<br />Dado2: " + $("#campo2fixo").val() + "<br />";
                HTML += "&lt;/div&gt;";
                //adiciono em uma lista
                $("#campos").append(HTML);
                //preparo o contador para o proximo
                id++;
                //limpo os campos para inserir um novo registro
                $("#campo1fixo").val("");
                $("#campo2fixo").val("");
                $("#remover").fadeIn(1000);
                $("#trremover").fadeIn(1000);
            }
    });
    $("#remover").click(function(){
        //decremento o contador
        id--;
        //removo o ultimo dado da lista
		$("#div" + id).fadeOut(1000).remove();
        //$("#div" + id).remove();
        //removo os campos ocultos
        $("#campo1" + id).remove();
        $("#campo2" + id).remove();
        if (id == 1) {
            $("#remover").fadeOut(1000);
			 $("#trremover").fadeOut(1000);
        }
    });
});
Criado 16 de novembro de 2010
Ultima resposta 17 de nov. de 2010
Respostas 1
Participantes 1