Aggiungere input ad un form con jQuery

Mattepuffo's logo
Aggiungere input ad un form con jQuery

Aggiungere input ad un form con jQuery

In pratica voglio dare la possibilità ad un utente di aggiungere delle input ad un form, che poi saranno inviate al db (ogni coppia di input sarà un record nel mio caso).

Per farlo ho usato jQuery; ma tenete a mente che tutto questo può essere riusato per qualsiasi componente, anche che non sia un form.

Infatti, generalizzando, ci bastano:

  • un oggetto su cui richiamare la funzione (che può essere un qualsiasi oggetto HTML)
  • un oggetto su cui aggiungere il componente (che può essere di qualsiasi tipo, e che identifichiamo tramite id)
  • la struttura che si vuole aggiungere (nel mio caso due input)

Questa la struttura di base:

<form>
	<fieldset id="voci_fatt">
		<legend>
			Voci fattura -
        	<i class="fas fa-plus" onclick="addVociFt($('#voci_fatt'));"></i>
		</legend>
		<input type="text" name="imp_voce[]" value="" class="imp_voce" required>
    	<br>
    	<input type="text" name="sconto_voce[]" value="" class="sconto_voce" required>
	</fieldset>
</form>

Questa invece  la funzione Javascript:

function addVociFt(idComponent) {
    var html = '';
    html += '<hr>';
    html += '<input type="text" name="imp_voce[]" value="" class="imp_voce">';
    html += '<input type="text" name="sconto_voce[]" value="" class="sconto_voce">';
    idComponent.append(html);
}

Come vedete gli passiamo il componente tramite id.

Su questo usiamo la funzione jQuery append.

Enjoy!

 


Condividi

Commentami!