jquery - populate blocks of html code dependant on select option value -
i have select box user can select how many people want select register. example if 4 selected 4 people registration areas appear below in form:
jquery:
var person = '<div class="reg-person"><span class="person">person 1</span><div class="field"><label for="name">name</label><input type="text" id="name" name="name" /></div><div class="field"><label for="company">company</label><input type="text" id="company" name="company" /></div><div class="field"><label for="email">email address</label><input type="text" id="email" name="email" /></div><div class="field"><label for="contact">contact number</label><input type="text" id="contact" name="contact" /></div></div>'; var peopledisplayed = 0; $('.places-req').change(function() { if(peopledisplayed == 0) { peopledisplayed = ($(this).val()); numberpeople = ($(this).val()); for(var = 1 ; <= numberpeople ; i++){ $('#register').prepend(person); } } else { var peoplediff = ($(this).val() - peopledisplayed); if (peoplediff > 0) { for(var = 1 ; <= peoplediff ; i++){ $('#register').prepend(person); } } else if (peoplediff < 0) { var diff = -peoplediff; for(var = 1 ; <= diff ; i++){ $('#register').children('div.person').last().remove(); } } peopledisplayed = ($(this).val()); } });
the html is:
<form id="register" action="/event/scripts/register.html" method="post"> <div class="submit-field"> <input type="hidden" value="1" id="event" name="event" /> <input type="submit" value="" /> </div> <p>* please note not pass details third party.</p> </form>
my question how can amend code each person shows person 1, person 2 etc... @ moment show person 1. i'll need use number use form field names different, name1, name2 etc..
i dont know how comment answer on fiddle
parseint(parseint(peopledisplayed)+i)
Comments
Post a Comment