Multiple use of a form before it is submitted

Question

I'm new to JavaScript, and trying to figure out the canonical way to do the following.

I have a form with some checkboxes and a selector. Let's say the checkboxes are styles of music and the selector is for people's names.

I'd like the user to be able to select the styles of music for multiple people and then submit the form with all of the data.

For example, the user might first check off Classical, Jazz, Rock, and Pop and choose "Joe", then select Jazz, Pop, Country, and Electronica and choose "Jane". So there would have to be two different buttons for "submit person" and "submit form".

I would like to:

Have a list of the names and their chosen styles populate below the form, for feedback
Allow the user to use the form as much as they want, and then submit all the data at the end

I get the feeling that using jquery and JSON is perfect for this, but I'm not sure what search terminology to use to figure out how to do this.

If it matters, the form will be processed by a Django view in Python.

Do you need to support non-JS browsers? (Typically about 2% of all web users.) Separately, do you need to support mobile browsers (phones, tablets)? — T.J. Crowder, Apr 15 '12 at 17:18
Just curious, how many people could there be listed within the selector? — Alerty, Apr 15 '12 at 17:29
There will be about 20 "people", the user does not need to choose for all of them. — OregonTrail, Apr 15 '12 at 19:08

score 1 · Accepted Answer · answered Apr 15 '12 at 17:24

You can achieve this by using AJAX for submit person. Your work flow should go like this:

User selects Joe and the corresponding styles of music.
User hits 'Submit Person'. On this event, encode the name of the person (Joe) and the styles of music selected into a JSON object and pass it to your back end script via an AJAX (jquery ajax() ) request.
The server side script with do whatever processing it needs to. When it finishes, you AJAX calls' success handler will be invoked. At this point, you can probably remove 'Joe' so the user knows the submission was successful and does not submit for Joe again.
Wash, rinse, repeat for all other people in your form.

PS - when you pass information to the back-end via AJAX, you do not have to encode it as JSON. You can either send it as a standard POST request. To encode a Javascript objects into JSON, use JSON.stringify()

The above is one way of doing it, however it won't work like you asked in your question (keep collecting data - submit at once), To work it that way, everytime the user hits 'Submit Person', add the data to a Javascript object, but do not submit it. The submitted data will keep building up in a JS object.

Finally, when the user hits 'Submit form', stringify the data and submit it.

score 0 · Answer 2 · answered Apr 18 '12 at 21:45

0

How about using django form-wizard.. Could it be enough? https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/

answered Apr 18 '12 at 21:45

niko.makela

449
2
14

Multiple use of a form before it is submitted

2 Answers2