Jump to content
Sign in to follow this  
marcelobbt

Adicionar campos (inputs) no form

Recommended Posts

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>

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.