Have a button add on another contact form to page per click

Question

I'm creating an RSVP form. A person enters their name and details to submit. However, this person may wish to add other people too. I want a button where they can add another person if needed and then this will create another contact form.

The form will have individual meal choices, which is why it's needed again for a new person. Is it a case of duplicating the DIV containing the contact form multiple times and then somehow revealing each one per click of the "+1" button?

My code could have been here

Sure there is. Please post what you've already tried so we can take a look at it! — Tewdyn, Jan 19 '16 at 13:40
Welcome to SO. Please visit the [help] to see what and how to ask — mplungjan, Jan 19 '16 at 13:45
You can submit the previous filled form on click of 2nd button via ajax and reset the all the field. Then if you want to submit form of another person then you fill it again and click submit. — Domain, Jan 19 '16 at 13:50

Mohd Abdul Mujib · Answer 1 · 2016-01-19T13:54:36.873

Keep the form as one entity, and the contacts that are to be submitted as another set of entities. Now on page load create form skeleton.

I'll just show you roughly how to go about it..

<from id="someform" name="someform" action="blah!blah!"></form>

Now create a contact creator function in javascript,

function contactcreator(srno){
  var iDiv = document.createElement('div'); //create the container div
  iDiv.id = srno + 'id';
  var input = document.createElement('input'); // create an input
  input.id = srno + 'inputid';
  input.name = srno + 'inputname';
  iDiv.append(input);
  $("#someform").append(iDiv);  
}

on document load, call this function once, and everytime the user clicks to add another contact, just increment the counter srno and call the function again, with the new srno.

This way you shall have a serially arranged set of contacts inputs.

Once you are done with the basics, then you can work on enhancing the UX/UI by handling the action of user wanting to remove some contact form, and so on.

Have a button add on another contact form to page per click

1 Answers1