Adicionar campos (inputs) no form

[marcelobbt 7]

Eu achei esse código que adiciona campos, porém ele adiciona sempre campos com names iguais. Precisava que ele adicionasse um ao índice em cada name para que pudesse ler os valores de cada campo.

 

Tentei inserir o índice $i, mas ao criar o campo o código insere "$i" em vez do valor, ficando assim:

<fieldset id="inputs_adicionaisF">

... <input type="text" name="risco[$i]"> ...

... <input type="text" name="risco[$i]"> ...

</fieldset>

 

enquanto que o que eu preciso é algo assim:

 

<fieldset id="inputs_adicionaisF">

... <input type="text" name="risco[1]"> ...

... <input type="text" name="risco[2]"> ...

</fieldset>

 

Abaixo o código (Obs: inseri o script apenas do primeiro campo, os outros são repetição com nomes alterados):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$i = 0;
		var input = '<label>Risco Físico: <input type="text" name="riscoF[$i]" /> <a href="#">X</a></label><br>';
		$("input[name='addRF']").click(function( e ){
			$('#inputs_adicionaisF').append( input );
		});
		$('#inputs_adicionaisF').delegate('a','click',function( e ){
			e.preventDefault();
			$( this ).parent('label').remove();
		});$i++;
	});
</script>


<fieldset>
	<p><form action="http://localhost/PPRA/GHE/editarriscos/1" method="post" accept-charset="utf-8">
</p>
	<label>Nome do GHE:</label>
	<p><select name="nomegheform" id="nomegheform">
<option value="0">Operação</option>
</select>
</p>
	<label><input type="button" name="addRF" value="Adicionar Risco Físico" /></label>
	<fieldset id="inputs_adicionaisF"></fieldset>
	<label><input type="button" name="addRQ" value="Adicionar Risco Químico" /></label>
	<fieldset id="inputs_adicionaisQ"></fieldset>
	<label><input type="button" name="addRB" value="Adicionar Risco Biológico" /></label>
	<fieldset id="inputs_adicionaisB"></fieldset>
	<label> </label>
	<p><input type="submit" name="salvar" value="Salvar"  />
</p>
</fieldset>

[André Paulo 0]

<script type="text/javascript">
	$(document).ready(function(){
		var i = 0;
		var input = '<label>Risco Físico: <input type="text" name="riscoF['+i+']" /> <a href="#">X</a></label><br>';
		$("input[name='addRF']").click(function( e ){
			$('#inputs_adicionaisF').append( input );
		});
		$('#inputs_adicionaisF').delegate('a','click',function( e ){
			e.preventDefault();
			$( this ).parent('label').remove();
		});
             i++;
	});
</script>

Acho que isso resolve

[marcelobbt 7]

Foi quase, o número está funcionando, mas não está acrescendo o valor de "i".

Fica sempre zero.

[André Paulo 0]

Ah sim,

<script type="text/javascript">
$(document).ready(function(){
var i = 0;
var input = '<label>Risco Físico: <input type="text" name="riscoF['+i+]" /> <a href="#">X</a></label><br>';
$("input[name=addRF]").click(function( e ){
$('#inputs_adicionaisF').append( input );

i++;
});
$('#inputs_adicionaisF').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();

i--;
});
});
</script>

[marcelobbt 7]

Funcionou!

Tive que colocar o input para dentro da função veja abaixo.

<script type="text/javascript">
    $(document).ready(function(){
        var i = 0;
        
        $("input[name='addRF']").click(function( e ){
            var input = '<label>Risco Físico: <input type="text" name="riscoF['+i+']" /> <a href="#">X</a></label><br>';
            $('#inputs_adicionaisF').append( input );
            i++;
        });
        $('#inputs_adicionaisF').delegate('a','click',function( e ){
            e.preventDefault();
            $( this ).parent('label').remove();
            i--;
        });
    });
</script>