I have a form that, for example, allows people to enter all their siblings. This could be 0 or 100(depending on how “busy” their parents were). What can I do to have the input fields grow automatically? I have a form right now that a user clicks ‘add more siblings’ and it adds a input field but that button annoys me so I’m trying to figure a way to have a new blank fields appear as soon as they start tying on one. So as soon as you type your siblings name, a new field appears below so when your done with that siblings info you can continue with the next one(and when you type on that one a new input appears below).
Also if it helps, my long term goal with this would be to also provide some ‘analytic’ on the items being entered so as they enter their siblings info it would show the average age, validate no siblings are older than the parents(and warning of possible error), etc before sending to server.
I’m very new to web development and have been learning jquery but I’m unsure if jquery can do what I’m trying to do and was wondering if someone could tell me what technology I need to study to achieve this(I thought ajax but couldn’t find much on if it was possible). My current (newbie) approach is to have 50 fields and hide them all, when a user clicks ‘add more siblings’ it simply unhides the next field. Is there a better way to do this or if my current way is good is there a way to modify it to remove the need for the ‘add more siblings’ button? A example would be great but really I’d just like a high level explanation of what I would need to do so I know what to be looking for(and learn it myself).
I’ts not difficult. Observe a key-event inside the input and when the current input is the last input add a new input(e.g. using
$.after())Demo: http://jsfiddle.net/doktormolle/WaL84/