I’d like to have a page with a drop down on it containing numbers, say one to ten.
Let’s say the user selects the number four.
I’d like exactly four identical, small forms to appear on the page with, say, two fields: Name and Email
I will need to retrieve all form fields from POST in a controller whatever number the user chooses / however many forms are available.
Can anyone help with this?
Thanks.
What is the real problem you are trying to solve by doing this? Please give us a high level overview of what you have going on.
benanamen,
Thank you for your response.
I have a page which enables someone to book a lesson for a group. The person booking needs to say how many people will be in the group and what their names/emails are. It could be one; it could be ten.
You could probably use some JavaScript to create the multiple forms, name the fields using array names (input type="text" name="name[]" for example) and it would be relatively easy to process them without knowing how many forms are actually there. Of course, your JavaScript could also populate a hidden form variable to say how many fields there are, if you prefer.
An alternate might be to just present the one form for one name/address, and each time the user submits the form, add that name and email to a temporary table. Each time the form is presented, you have an “add user” button to add the form contents to the list, and a “list complete” button which then submits all the names on your temporary list to the next stage of the booking.
droopsnoot,
OK. First option looks clearer from a user perspective but my JS needs work.
Second option looks within my capabilities but looks a bit messy from a user perspective.
Would you be able/willing to help with the JS for option one?
Mike
I’d be happy to help, but my JS is almost non-existent - I can look at it, perhaps spot typos, and sometimes build bits of it up into something that works, but no more than that. Post in the JS section, though, and there are many helpful people in there who actually know what they’re talking about.
That would be a valid use case. You can use JavaScript to dynamically add more form fields. There are plenty of example out there how to do that.
droopsnoot,
Thank you for your response and your honesty. I will do that.
How dynamically added form fields are normally done, is you output one initial set of form field(s), with an add/+ field button after it (javascript is used to append a copy of the html of the initial set of fields, to the form.) You would fill in/select the data for the 1st set of field(s), then click the add/+ button for that field set to append a new set of field(s), with its own add/+ button (and usually a remove/- button.) Repeat until all the data has been filled in/selected. Then, submit the form. As @benanamen wrote in the other thread, there are countless examples of doing this posted on the web.
Is the operation you have described, where the user initially selects the number of field sets, your preferred method of operation? If so, you would have an on-change event attached to that select/option menu. The javascript would get the selected option value, minus one, and use that in a loop to control how many copies of the initial set of form field(s) to append to the form.
Since you should be selecting from existing (registered) students at the point of picking them for a specific group, the available students should already be stored in a database table. The User Interface (UI) for this operation should be selecting from existing students (either using a select/option menu, or check-boxes), probably matching some filter/search term, such as a grade level or those taking a class from a specific teacher, not typing in values, and the form would only submit the selected student ids (auto-increment primary index), not two different pieces of data for each student.
mabismad,
Thank you for taking the time to explain the logic. I’ll get on to Google to resolve.
Just curious, the title of your post suggests you want multiple forms on a page. Is that right, or are you wanting to create extra form fields?
Hi @mike324, rather than adding multiple forms I’d suggest to just append fieldsets to the parent form, which would be easier to process – you’d just have to submit that single form. Such a fieldset can be defined as a template:
<template id="delegate-template">
<fieldset>
<legend>Delegate</legend>
<label>
Name:
<input type="text" name="name[]" required>
</label>
<label>
Email:
<input type="email" name="email[]" required>
</label>
</fieldset>
</template>
<form action="submit.php">
<label>
Number of delegates:
<input type="number" min="0" max="10" name="delegates-count" id="delegates-count">
</label>
<div id="delegates-container"></div>
</form>
Then in your JS, you can append and remove fieldsets from that template depending on the selected number like so:
const delegates = document.getElementById('delegates-count')
const container = document.getElementById('delegates-container')
const template = document.getElementById('delegate-template')
function appendDelegate (index) {
const delegate = template.content.cloneNode(true)
const legend = delegate.querySelector('legend')
legend.textContent += ` ${index + 1}`
container.appendChild(delegate)
}
function removeDelegate () {
const delegate = container.lastElementChild
container.removeChild(delegate)
}
function updateDelegates (event) {
const count = parseInt(event.target.value)
const current = container.children.length
for (let i = count; i < current; i++) {
removeDelegate()
}
for (let i = current; i < count; i++) {
appendDelegate(i)
}
}
delegates.addEventListener('input', updateDelegates)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.