Inserire campo input dinamico con contatore in jquery

L

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 
L

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
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>
Clicca per allargare...

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
 
L

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
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
 
Ultima modifica di un moderatore:
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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;
 
L

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
come fare a svuotare i campi dato
Clicca per allargare...
usa questa sintassi al posto di empty
Codice: 
$('#nome').val("");
$('#cognome').val("");
il codice è giusto?
Clicca per allargare...
se fa quello che ti aspetti direi di si
l'unica cosa che non capisco è questa istruzione
Codice: 
$("#aggiornamento").load(location.href+" #aggiornamento>*","")
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
D Inserire campo input text in questo codice. jQuery 2
J Inserire il colore nel campo di input dove il checkbox è selezionato Javascript 2
Shyson Inserire placeholder nel campo cerca PHP 5
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
pup3770 Controllo su campo prima di inserire PHP 5
G Inserire un campo mysql in un select per form PHP 3
B Inserire date a singolo campo PHP 4
M inserire un campo login HTML e CSS 8
open-think Inserire un file immagine in un campo blob Snippet PHP 0
Elisacau [Contact form 7] Inserire Numero auto incrementante WordPress 1
gara1 inserire immagine di sfondo in canvas Javascript 0
FDF182 Inserire pdf in db PHP 3
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
D Inserire link PHP 0
L PHPSpreadsheet inserire dati da file .xlsx/.xls su database PHP 2
P inserire due voci in un titolo post wp WordPress 1
R inserire video nel sito HTML e CSS 15
J Inserire blog wordpress in angular CMS (Content Management System) 0
A inserire variabile php colore in div html PHP 2
L inserire dati multi livello PHP 8
G Inserire una scritta Java 1
M Inserire variabile nella value di una hidden PHP 3
S Inserire foto in ogni cella di una tabella Javascript 0
G inserire dati automaticamente in mysql PHP 0
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
B inserire valori da una tabella a un altra mysql PHP 34
D [Javascript] inserire uno script in un file php Javascript 6
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
P [PHP] Inserire stringhe in input(text),memorizzarle e stamparle in file successivo PHP 0
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
Shyson [PHP] Inserire testo nel codice PHP 2
D Mailchimp - Possibile inserire doppia condizione per i triggers? Email Marketing 0
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
Alex_70 Inserire photo in php PHP 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
spider81man Connettersi ad un DB ed inserire dati con Javascript Javascript 3
spider81man [PHP] Inserire file .pdf in db PHP 6
P [WordPress] Inserire codice in pagina dinamica WordPress 0
A [PHP] Ciclare array multidimensionale e inserire valori in DB PHP 2

Discussioni simili

Alto Basso