Inserire campo input dinamico con contatore in jquery

lorenzo84 · 7 Feb 2013

Salve a tutti. Mi sto cimentando con jquery e sono proprio agli inizi. Sono riuscito a creare un input dinamico dove quando viene cliccato su un pulsante aggiungi mi aggiunge la casella. Fin qui va bene ma il problema è che vorrei inserire nel nome dell'input un numero o meglio ancora una parola con un numero (es. nome1,nome2,ect...). mi aiutate?

criric · 7 Feb 2013

Ciao,
visto che non hai postato il codice che hai scritto tu ti posto un esempio completo

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function(){
                var i=0;
                $("#add").click(function(){
                    $("#myform").append("<input type='text' value='value" + i + "' name='nome" + i + "'/><br/>");
                    i++;
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="add" name="add" value="Aggiungi"/>
        <form id="myform">

        </form>

    </body>
</html>

lorenzo84 · 7 Feb 2013

criric ha scritto:

Ciao,
visto che non hai postato il codice che hai scritto tu ti posto un esempio completo

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function(){
                var i=0;
                $("#add").click(function(){
                    $("#myform").append("<input type='text' value='value" + i + "' name='nome" + i + "'/><br/>");
                    i++;
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="add" name="add" value="Aggiungi"/>
        <form id="myform">

        </form>

    </body>
</html>

ciao!!! grazie mille. non ho postato il codice perchè mi sa che avevo scritto castronerie..

visto che ci sono ti chiedo anche l'operazione al contrario tipo:
$('#remove').remove();
il problema che mi elimina tutte le righe che si chiamano con id remove ma io volevo solo eliminare quella riga associata al bottone

$('#form').append('<div id="remove"><input type="text" name="ingr'+$i+'" value="\"\""><button >X</button></div><br>');

grazie mille

criric · 7 Feb 2013

Sarò fuso ma non riesco ad applicarlo all'esempio che ti ho postato
prova a dare un occhiata a questo indirizzo

lorenzo84 · 7 Feb 2013

grazie per la risposta. ne approfitto per chiederti una cosa.
ho fatto un inserimento in un db con una risposta in caso di errore e una risposta in caso positivo con un timeout dove la scritta appare per 5 secondi. dopo che la scritta è andata via però per inserire un nuovo record devo aggiornare la pagina.dove sbaglio? è possibile poi aggiornare la tabelina sotto con una query senza aggiornare la pagina??

il codice è questo:

PHP:

<?php	
	require 'configsql.php';
	require 'connect.php';
?>

<html>  
<head>  
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
	var $i=0;
	$('#attesa').hide();
	$('#aggiungi').bind({
	'click': function(){
		var $text=$(this).attr('value');
		console.log($text);
		$('form').append('<div id="remove"><input type="text" name="ingr'+$i+'" value="\"\""><button >X</button></div><br>');
		console.log('append');
		$i++;
	}
	});
	$('#parte').bind({
	'click':function(){
	var nome = $("#nome").val();
    var cognome = $("#cognome").val();
	$('#attesa').show();
	$.ajax({
    // l'URL per la richiesta
    url : 'ricezione_dati.php',

    // invio di informazioni
    // (è anche possibile utilizzare una stringa di dati)
    data : "nome=" + nome + "&cognome=" + cognome,

    // specificare se si tratta di una richiesta POST o GET
    type : 'POST',

    // il tipo di informazioni 
    // che ci si attende come risposta
    dataType : 'html',

    // codice da eseguire se la richiesta viene accettata;
    // la risposta è passata come argomento alla funzione
    success : function(msg) {
        $('#title1').html(msg);
		setTimeout(function(){$('#title1').hide();location.reload();},5000);
		$('#attesa').hide();
		//$('#title1').hide();
    },

    // codice da eseguire se la richiesta fallisce;
    // sono passati come argomenti alla funzione
    // l'oggetto della petizione in codice grezzo 
    // e lo stato della richiesta
    error : function(xhr, status) {
        alert('Spiacente, c\'è stato un problema!');
    }
});
	},
	});
});
</script>  
<style>
#voce{
border:1 px solid purple;


}
.menulista{
fontSize:20px; 
color : purple;

}
.menulistahov{

fontSize:50px; 
color : red;

}
</style>
</head>  
<body>  
<form id="mioform">
	<!--<input type="text" name="1" value=""><br>-->
	<input type="text" name="nome" id="nome" value=""><br>
	<input type="text" name="cognome" id="cognome" value=""><br>
	<img width="50" id="attesa" src="loading.gif" alt="attendere"/>
</form>
<div id="title1"></div>
<button id="parte">invia</button>


<table>
<tr><td>nome</td><td>cognome</td></tr>
<?php
	$query="select * from utenti";
	$risultato=mysql_query($query);
	while($row = mysql_fetch_assoc($risultato))
	{
		echo("<tr><td>".$row['nome']."</td><td>".$row['cognome']."</td></tr>");
	}

?>


</table>
</body> 
</html>

grazie mille

criric · 7 Feb 2013

qui c'è un errore di sintassi

Codice:

alert('Spiacente, c\'è stato un problema!');
}
});
}, // <-------------
});
});

la virgola non ci va

racchiudi il codice che posti tra i tag per la formattazione(seconda linea ultime 3 icone) altrimenti mi tocca farlo a mano ed è molto noioso

criric · 7 Feb 2013

per quanto riguarda il css invece la sintassi corretta per

Codice:

border:1 px solid purple;

è

Codice:

border:1px solid purple;

per

Codice:

 fontSize:20px;

è

Codice:

 font-size:20px;

lorenzo84 · 7 Feb 2013

eccomi!!! grazie mille e scusa. ora effettivamente funziona e sono riuscito a far aggiornare solo la tabella sotto (almeno credo si aggiorni solo quella) ti volevo chiedere come fare a svuotare i campi dato che rimangono compilati anche dopo l'inserimento? ti posto il codice nuovo funzionante tranne appunto lo cancellazione dei valori. Secondo te a prescindere dalla cancellazione il codice è giusto?
grazie mille

Codice:

<script type="text/javascript">  
$(document).ready(function() {
	var $i=0;
	$('#attesa').hide();
	$('#parte').bind({
	'click':function(){
	var nome = $("#nome").val();
    var cognome = $("#cognome").val();
	$('#attesa').show();
	$.ajax({
    // l'URL per la richiesta
    url : 'ricezione_dati.php',

    // invio di informazioni
    // (è anche possibile utilizzare una stringa di dati)
    data : "nome=" + nome + "&cognome=" + cognome,

    // specificare se si tratta di una richiesta POST o GET
    type : 'POST',

    // il tipo di informazioni 
    // che ci si attende come risposta
    dataType : 'html',

    // codice da eseguire se la richiesta viene accettata;
    // la risposta è passata come argomento alla funzione
    success : function(msg) {
        $('#title1').html(msg);
		setTimeout(function(){$('#title1').hide(),$("#aggiornamento").load(location.href+" #aggiornamento>*","")},5000);
		$('#attesa').hide();
		$('#nome').empty();
		$('#cognome').empty();
    },
    error : function(xhr, status) {
        alert('Spiacente, c\'è stato un problema!');
    }
});
	}
	});
});
</script>

criric · 7 Feb 2013

come fare a svuotare i campi dato

usa questa sintassi al posto di empty

Codice:

$('#nome').val("");
$('#cognome').val("");

il codice è giusto?

se fa quello che ti aspetti direi di si
l'unica cosa che non capisco è questa istruzione

Codice:

$("#aggiornamento").load(location.href+" #aggiornamento>*","")

Inserire campo input dinamico con contatore in jquery

lorenzo84

Utente Attivo

criric

Super Moderatore

lorenzo84

Utente Attivo

criric

Super Moderatore

lorenzo84

Utente Attivo

criric

Super Moderatore

criric

Super Moderatore

lorenzo84

Utente Attivo

criric

Super Moderatore

Discussioni simili

Inserire campo input dinamico con contatore in jquery

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Super Moderatore

Utente Attivo

Super Moderatore

Discussioni simili

Privacy & Transparency

Privacy & Transparency