Absolutely, you can fix this issue using just Python/Flask and JavaScript—let's first diagnose what's going wrong with your current code, then walk through the corrected implementation.

What's Causing the Problem? #

Your current setup generates a separate changeTemplate() function for every template in your loop. By the time the page renders, only the last function remains (it overwrites all previous ones), which is why only the newest template's data gets populated no matter which option you select. Additionally, you're not actually matching the selected dropdown value to the corresponding template data.

Step-by-Step Fix #

1. Prepare Template Data in Flask #

First, convert your database query results into a JSON-serializable list of dictionaries. This lets you pass all template data to the frontend in one go, so JavaScript can access it directly.

# In your Flask route
from flask import render_template

# Your existing query
template_search = newmatter_model.NewClientMatter.query.filter_by(
    creator=verifier, 
    is_template='on'
).all()

# Convert templates to a list of dictionaries (include all fields your form needs)
template_data = []
for template in template_search:
    template_data.append({
        "id": template.id,  # Use a unique identifier (preferred over client_name to avoid duplicates)
        "client_name": template.client_name,
        # Add other form fields here (e.g., contact info, address, etc.)
        "contact_email": template.contact_email,
        "address": template.address
    })

# Pass both the search results (for the dropdown) and the data (for JS) to your template
return render_template("your_form_template.html", 
                       template_search=template_search, 
                       template_data=template_data)

2. Update the Dropdown Menu #

Use the template's unique id as the option value (instead of client_name) to ensure you can reliably match the selected option to its data.

<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id='template_select' onchange='changeTemplate()'>
    <option value=''></option>
    {% for template_info in template_search %}
        <option value='{{ template_info.id }}'>{{ template_info.client_name }}</option>
    {% endfor %}
</select>

3. Rewrite the JavaScript Function #

Replace your loop-generated scripts with a single changeTemplate() function that uses the preloaded template_data to find and populate the selected template's data.

<script>
// Convert the Flask-passed template data into a JavaScript array
const templateData = {{ template_data|tojson }};

function changeTemplate() {
    const selectedId = document.getElementById('template_select').value;
    
    // Clear the form if no template is selected
    if (!selectedId) {
        document.getElementById('client_name').value = '';
        document.getElementById('contact_email').value = '';
        document.getElementById('address').value = '';
        return;
    }

    // Find the matching template in our data array
    const selectedTemplate = templateData.find(template => template.id == selectedId);
    
    // Populate the form fields if we found a match
    if (selectedTemplate) {
        document.getElementById('client_name').value = selectedTemplate.client_name;
        document.getElementById('contact_email').value = selectedTemplate.contact_email;
        document.getElementById('address').value = selectedTemplate.address;
        // If you need to update non-input elements (like text displays), use innerHTML:
        // document.getElementById('client_name_display').innerHTML = selectedTemplate.client_name;
    }
}
</script>

Key Improvements #

• No more overwritten functions: We only define changeTemplate() once, avoiding the loop-induced function duplication.
• Reliable data matching: Using the template's unique ID ensures we always pull the correct data, even if multiple templates share the same client name.
• Clean data flow: All template data is passed to the frontend in one structured package, making it easy to maintain and extend.

内容的提问来源于stack exchange，提问作者HHTEST TESTING