基于Django表单下拉选项动态生成输入文本框的实现方案

Got it, let's break this down into manageable steps to build your dynamic Django form. Here's exactly how to make it work:

1. Create the Base Form in forms.py #

First, we'll define a simple form with the dropdown field. We won't predefine the input text boxes here—those will be handled dynamically in the template and validated on submission.

from django import forms

class DynamicInputForm(forms.Form):
    num_fields = forms.ChoiceField(
        choices=[(2, '2'), (3, '3'), (5, '5')],
        initial='3',  # Default to 3 input boxes
        widget=forms.Select(attrs={'id': 'num-fields-select'})
    )

2. Set Up the View to Handle Requests #

Next, write a view to handle both GET (initial load) and POST (form submission) requests. On submission, we'll validate the number of fields selected and collect the input values.

from django.shortcuts import render
from .forms import DynamicInputForm

def dynamic_form_view(request):
    if request.method == 'POST':
        form = DynamicInputForm(request.POST)
        if form.is_valid():
            num_fields = int(form.cleaned_data['num_fields'])
            input_values = []
            valid_submission = True

            # Collect and validate each input box value
            for i in range(1, num_fields + 1):
                input_val = request.POST.get(f'input_{i}')
                if not input_val:
                    form.add_error(None, f"Input {i} cannot be empty!")
                    valid_submission = False
                else:
                    input_values.append(input_val)
            
            if valid_submission:
                # Replace this with your logic (save to DB, etc.)
                return render(request, 'form_success.html', {'inputs': input_values})
    else:
        form = DynamicInputForm()

    return render(request, 'dynamic_form.html', {'form': form})

3. Build the Template with Dynamic JavaScript #

The magic happens here—we'll use vanilla JavaScript to listen for dropdown changes and add/remove input boxes as needed. Create a template dynamic_form.html:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Input Form</title>
    <style>
        .input-group { margin: 10px 0; }
        label { display: inline-block; width: 80px; }
    </style>
</head>
<body>
    <h2>Dynamic Input Form</h2>
    <form method="post">
        {% csrf_token %}
        
        <!-- Render the dropdown field -->
        <div class="input-group">
            {{ form.num_fields.label_tag }} {{ form.num_fields }}
        </div>

        <!-- Container for dynamic input boxes -->
        <div id="input-container">
            <!-- Load 3 input boxes by default -->
            {% for i in 1..3 %}
            <div class="input-group">
                <label for="input_{{ i }}">Input {{ i }}:</label>
                <input type="text" name="input_{{ i }}" id="input_{{ i }}" required>
            </div>
            {% endfor %}
        </div>

        <button type="submit">Submit</button>
        
        <!-- Show form errors if any -->
        {% if form.non_field_errors %}
            <div style="color: red; margin-top: 10px;">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}
    </form>

    <script>
        const numSelect = document.getElementById('num-fields-select');
        const inputContainer = document.getElementById('input-container');

        numSelect.addEventListener('change', () => {
            const targetCount = parseInt(numSelect.value);
            const currentInputs = inputContainer.querySelectorAll('.input-group');
            const currentCount = currentInputs.length;

            if (targetCount > currentCount) {
                // Add new input boxes
                for (let i = currentCount + 1; i <= targetCount; i++) {
                    const inputGroup = document.createElement('div');
                    inputGroup.className = 'input-group';
                    inputGroup.innerHTML = `
                        <label for="input_${i}">Input ${i}:</label>
                        <input type="text" name="input_${i}" id="input_${i}" required>
                    `;
                    inputContainer.appendChild(inputGroup);
                }
            } else if (targetCount < currentCount) {
                // Remove extra input boxes
                for (let i = currentCount; i > targetCount; i--) {
                    inputContainer.removeChild(currentInputs[i - 1]);
                }
            }
        });
    </script>
</body>
</html>

Extra Tips #

• If you need more complex validation for individual inputs (like email/number checks), you can add that logic in the view when collecting input_values.
• For a more Django-native approach, you could use formsets, but this vanilla JS method is simpler for basic use cases like yours.
• Don't forget to map the view to a URL in your urls.py so users can access the form.

内容的提问来源于stack exchange，提问作者Bharanidhar Reddy