Oct29

jQuery: Click button to dynamically call function (for adding or removing input fields)

by webpaws on October 29th, 2015 at 2:16 pm
Posted In: Marketing

Took a while to come up with a way to add or remove dynamic form input fields using jQuery to be able to add specific number of inputs into a database.

See the code in action here:
JSFiddle


$(document).ready(function(){

var nf;
$("#addfeatnow").on('click', SecondFeat);
$("#remfeatnow").on('click', FirstFeat);

var storednf = JSON.parse(localStorage.getItem('nf'));

if((nf == null || !nf) && (!storednf || storednf == null)) {

nf=1;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').fadeTo('slow', 1 );
$("#feature2").hide();
$("#feature3").hide();
$("#feature4").hide();
document.getElementById("numbfeats").value = 1;
$("#addfeatnow").off('click').on('click', SecondFeat);
$("#remfeatnow").off('click').on('click', NoFeat);

}else if(storednf>=0){

alert(storednf);
switch(storednf) {
case 0:
NoFeat();
break;

case 1:
FirstFeat();
break;

case 2:
SecondFeat();
break;

case 3:
ThirdFeat();
break;

case 4:
FourthFeat();
break;
} //end switch

} //end if statement

function FirstFeat() {
nf=1;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').fadeTo('slow', 1 );
$("#feature2").hide();
$("#feature3").hide();
$("#feature4").hide();
document.getElementById("numbfeats").value = 2;
$("#addfeatnow").off('click').on('click', SecondFeat);
$("#remfeatnow").off('click').on('click', NoFeat);
$("#remfeatnow").show();
return false;
}

function SecondFeat() {
nf=2;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').fadeTo('slow', 1 );
$("#feature2").fadeTo('slow', 1 );
$("#feature3").hide();
$("#feature4").hide();
document.getElementById("numbfeats").value = 3;
$("#addfeatnow").off('click').on('click', ThirdFeat);
$("#remfeatnow").off('click').on('click', FirstFeat);
$("#remfeatnow").show();
return false;
}

function ThirdFeat() {
nf=3;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').fadeTo('slow', 1 );
$("#feature2").fadeTo('slow', 1 );
$("#feature3").fadeTo('slow', 1 );
$("#feature4").hide();
document.getElementById("numbfeats").value = 4;
$("#addfeatnow").off('click').on('click', FourthFeat);
$("#remfeatnow").off('click').on('click', SecondFeat);
$("#remfeatnow").show();
return false;
}

function FourthFeat() {
nf=4;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').fadeTo('slow', 1 );
$("#feature2").fadeTo('slow', 1 );
$("#feature3").fadeTo('slow', 1 );
$("#feature4").fadeTo('slow', 1 );
document.getElementById("numbfeats").value = nf;
$("#addfeatnow").off('click').on('click', FifthFeat);
$("#remfeatnow").off('click').on('click', ThirdFeat);
$("#remfeatnow").show();
return false;
}

function NoFeat() {
nf=0;
var storednf = JSON.stringify(nf);
localStorage.setItem('nf', storednf);
$('#feature1').hide();
$("#feature2").hide();
$("#feature3").hide();
$("#feature4").hide();
$("#addfeatnow").off('click').on('click', FirstFeat);
$("#remfeatnow").hide();
return false;
}

});