Home/ Questions/Q 7785541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:16:21+00:00

I’m new to JavaScript, and trying to figure out the canonical way to do

  • 0

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:

  1. Have a list of the names and their chosen styles populate below the form, for feedback
  2. 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    1. User selects Joe and the corresponding styles of music.
    2. 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.
    3. 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.
    4. 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.

    • 0