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

http://jsfiddle.net/cqg8l/

parseint(parseint(peopledisplayed)+i) 

Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -