Creare una funzione "aggiungi" per bottone

**DXgeneration01** · 24-02-2018, 15:54

Ciao a tutti. Vi spiego in parole povere cosa devo fare. Devo creare un sito html che mi crei, dato il nome della tabella, della chiave primaria e i campi della tabella, il codice in sql di una tabella.
Stavo seguendo questo esempio: https://editor.datatables.net/generator/, però mi sono fermato al bottone "add" ovvero quello che mi aggiunge un altro campo per la tabella. Mi hanno detto che devo usare una funzione in javascript ma io so 0 del javascript. Come faccio a fare una funzione che, se cliccato il bottone aggiungi, mi aggiunga un campo per la tabella?
Qui c'è quello che ho fatto:
<DOCTYPE html><head>
<body>
<script>

</script>
<form name="sql generator" method="post">
<table width="300px">
</tr>
<tr>
<td>
<label for="nometabella">Nome tabella:</label>
</td>
<td>
<input type="text" name="nometabella">
</td>
</tr>
<tr>
<td>
<label for="chiaveprimaria">Chiave primaria:</label>
</td>
<td>
<input type="text" name="chiaveprimaria" value="id">
</td>
</tr>
<tr>
<td>
<button name="aggiungi" onclick="aggiungi()">aggiungi</button>
</td>
</tr>

**Vincent.Zeno** · 24-02-2018, 18:45

sposto in JS
fai un ricerca in questa sezione: l'argomento è già stato trattato. vedi se ne frattempo trovi qualcosa di utile

ricorda di usare sempre il tag CODE per postare codice sul from, grazie

**robynosse** · 24-02-2018, 23:30

Ciao,
dato l'id di un elemento, in questo caso il bottone, aggiungi un evento "click" che lancia la funzione miaFunzione(), che in questo caso effettua un allert, ma all'interno della funzione puoi mettere qualsiasi funzionalità.
Il codice javascript è stato racchiuso in un: window.onload=function(){} che non è che un altro modo per registrare un evento, in questo caso l'azione si effettua al caricamento della pagina. Se voglio registrare un evento click su un elemento specifico della pagina, onde evitare di mettere il codice alla fine della pagina stessa, devo attendere che la pagina sia caricata.

Roberto

codice:

<DOCTYPE html><head>
<body>
<script>
window.onload=function(){
  document.getElementById("aggiungi").addEventListener("click",miaFunzione);
  
  function miaFunzione(){
    alert("Hai premuto il tasto con id:"+this.id);
  }
}

</script>
<form name="sql generator" method="post">
<table width="300px">
</tr>
<tr>
<td>
<label for="nometabella">Nome tabella:</label>
</td>
<td>
<input type="text" name="nometabella">
</td>
</tr>
<tr>
<td>
<label for="chiaveprimaria">Chiave primaria:</label>
</td>
<td>
<input type="text" name="chiaveprimaria" value="id">
</td>
</tr>
<tr>
<td>
<button name="aggiungi" id="aggiungi">aggiungi</button>
</td>
</tr>

**DXgeneration01** · 25-02-2018, 18:25

ok però sono ancora in alto mare. Ho trovato un codice in una vostra discussione che ho provato a seguire ma a me non mostra nulla quando clicco il bottone. il codice aggiornato è:
<!DOCTYPE html>
<head>
<body>
<script>
var numero=1
function aggiungi(){
// crea elementi
var oText=document.createTextNode("campo "+num);
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oTd2=document.createElement("TD");
var oField=document.createElement("INPUT");

// setta attributi
oField.setAttribute("type","text");
oField.setAttribute("name","testo"+num);

// appendi al relativo padre
oTd1.appendChild(oField);
oTd2.appendChild(oText);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);

// incrementa variabile globale
num++
}

function rimuovi(){
if(document.removeChild && document.getElementById && document.getElementsByTagName) {
// se non e' la prima riga
if(num>1){
// riferimento al tbody
var tb=document.getElementById('tabella').getElementsB yTagName('TBODY')[0];
// riferimento all' ultimo TR
var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1]
// rimuovi
tb.removeChild(lastTr);
// decrementa variabile globale
num--
}
}
}
</script>
<form name="sql generator" method="post">
<table width="300 px" name="tabella">
</tr>
<tbody>
<tr>
<td>
<label for="nometabella">Nome tabella:</label>
</td>
<td>
<input type="text" name="nometabella">
</td>
</tr>
<tr>
<td>
<label for="chiaveprimaria">Chiave primaria:</label>
</td>
<td>
<input type="text" name="chiaveprimaria" value="id">
</td>
</tr>
<tr>
<td>
<button name="aggiungi" onclick="aggiungi()">aggiungi</button>
</td>
<td>
<button name="rimuovi" onclick="rimuovi">rimuovi</button>
</td>
</tr>
<tr>
<td>
<label for="campo1">campo 1:</label>
</td>
<td>
<input type="text" name="campo1">
</td>
<td>
<select>
<option value="testo">testo</option>
<option value="numero">numero</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

</body>
</head>

**DXgeneration01** · 25-02-2018, 18:28

ok però sono ancora in alto mare. ho provato a seguire un esempio trovato su google ma niente. il codice aggiornato è:
<!DOCTYPE html>
<head>
<body>
<script>
var numero=1
function aggiungi(){
// crea elementi
var oText=document.createTextNode("campo "+num);
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oTd2=document.createElement("TD");
var oField=document.createElement("INPUT");

// setta attributi
oField.setAttribute("type","text");
oField.setAttribute("name","testo"+num);

// appendi al relativo padre
oTd1.appendChild(oField);
oTd2.appendChild(oText);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);

// incrementa variabile globale
num++
}

function rimuovi(){
if(document.removeChild && document.getElementById && document.getElementsByTagName) {
// se non e' la prima riga
if(num>1){
// riferimento al tbody
var tb=document.getElementById('tabella').getElementsB yTagName('TBODY')[0];
// riferimento all' ultimo TR
var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1]
// rimuovi
tb.removeChild(lastTr);
// decrementa variabile globale
num--
}
}
}
</script>
<form name="sql generator" method="post">
<table width="300 px" name="tabella">
</tr>
<tbody>
<tr>
<td>
<label for="nometabella">Nome tabella:</label>
</td>
<td>
<input type="text" name="nometabella">
</td>
</tr>
<tr>
<td>
<label for="chiaveprimaria">Chiave primaria:</label>
</td>
<td>
<input type="text" name="chiaveprimaria" value="id">
</td>
</tr>
<tr>
<td>
<button name="aggiungi" onclick="aggiungi()">aggiungi</button>
</td>
<td>
<button name="rimuovi" onclick="rimuovi">rimuovi</button>
</td>
</tr>
<tr>
<td>
<label for="campo1">campo 1:</label>
</td>
<td>
<input type="text" name="campo1">
</td>
<td>
<select>
<option value="testo">testo</option>
<option value="numero">numero</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

</body>
</head>

**DXgeneration01** · 25-02-2018, 18:29

ho inviato lo stesso messaggio due volte scusatemi ho sbagliato

**ciro78** · 25-02-2018, 21:43

Originariamente inviata da DXgeneration01

ho inviato lo stesso messaggio due volte scusatemi ho sbagliato

hai sbagliato anche a non leggere il regolamento. in particolare la sezione che riguarda il tag code

Discussione: Creare una funzione "aggiungi" per bottone

Strumenti discussione

Ricerca discussione

Visualizza

Creare una funzione "aggiungi" per bottone

Tag per questa discussione

Permessi di invio