Django form is not rendered properly after setting initial values dynamically

Question

I am trying to render a form where more then one field are initialized dynamically based on a parameter passed from view to form. I am setting the initial value at the form's init method and it seems to work fine as far as assigning the values to field elements is considered. When I print the form, I can see those values attached to appropriate field element. The issue is that those values does not show up when rendered.

My View is:

def zoneinfo(request):
    siteId = request.GET.get('siteId')
    form = PostForm(site = siteId.upper())
    print form
    return render(request, 'details.html', {'form': form})

code in form.py

def __init__(self, *args, **kwargs):
    siteId =  kwargs.pop('site', None)
    super(PostForm, self).__init__(*args, **kwargs)
    if siteId:
        siteInfo = getSiteInfo(siteId.upper())
        self.fields['city'] = forms.CharField(max_length=25, initial=siteInfo['city'])
        self.fields['address'] = forms.CharField(max_length=25, initial=siteInfo['address'])
        self.fields['state'] = forms.CharField(max_length=50, initial=siteInfo['state'])
        self.fields['zip'] = forms.CharField(max_length=10, initial=siteInfo['zip'])

details.html:

{% load staticfiles %}
<form action = "/zones/add" id="addNewZoneForm1" method='post'>{% csrf_token %}
<!-- <form  id="addNewSite" method='post'>{% csrf_token %} -->
    <fieldset>
        <table border="0" cellspacing="2" cellpadding="2" width="100%">
            {{ form.as_table }}
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      </table>
      <input type="submit" value="Submit">
    </fieldset>


</form>
<script type="text/javascript">
        function getSite(value){
        $.ajax({
             url: "sites/getinfo?siteId="+value,
             type: "get",
        })
    }
</script>

where Print form returns :

<tr><th><label for="id_site">Site:</label></th><td><select id="id_site" name="site" onChange="getSite(this.value);">
<option value="initialValue">----Select Site----</option>
<option value="abc">ABC</option>
<option value="xyz">XYZ</option>
</select></td></tr>
<tr><th><label for="id_city">City:</label></th><td><input id="id_city" maxlength="25" name="city" type="text" value="SAN" /></td></tr>
<tr><th><label for="id_address">Address:</label></th><td><input id="id_address" maxlength="25" name="address" type="text" value="SAN" /></td></tr>
<tr><th><label for="id_state">State:</label></th><td><input id="id_state" maxlength="50" name="state" type="text" value="SAN" /></td></tr>
<tr><th><label for="id_zip">Zip:</label></th><td><input id="id_zip" maxlength="10" name="zip" type="text" value="10000001" /></td></tr>
<tr><th><label for="id_description">Description:</label></th><td><textarea cols="40" id="id_description" name="description" rows="10">
</textarea></td></tr>

We can see in the html out put that the fields have values associated but they are not rendered in the view. There is no error that I am getting, just a form with empty fields

EDIT: I tired to print return render(request, 'details.html', {'form': form}) on console and the output contains the values for the fields. Not sure why those values are not visible on the web page.

Thanks in advance for your help

This is a duplicate of http://stackoverflow.com/questions/604266/django-set-default-form-values — Alexander, Apr 02 '15 at 15:49
I tried to follow those examples but it does not apply to a successful result. I still face the same issue. Moreover it seems a bit odd to define so many fields while initializing the form. Also I am not using modelForms. It is just a basic form, not sure if that makes a difference — mudumbi acharya, Apr 02 '15 at 16:21
Are you somehow expecting your Ajax getSite call to change the form you have already rendered? — Daniel Roseman, Apr 02 '15 at 16:28
What I want to achieve is: on the html page user will get an dropdown to select an option based on which I want to populate remaining fields. So I am trying to fetch data from db based on the dropdown option selected and I am successful in that. But the form is not rendering based on the new values. One clarification I would like to make is I have written two views. The first one renders the plain form. The second view which I have shown here is the one that should render with updated values. — mudumbi acharya, Apr 02 '15 at 16:37
Yes but all your JS is doing is making a GET to the view. It's not doing anything at all with the result. JS doesn't magically update your HTML for you, you'd need to define a success method in your ajax call and do something with the result. — Daniel Roseman, Apr 02 '15 at 20:20
OK, I understood. I was not returning the data from html response to the page. adding below to the getSite made it to work. Thanks success: function(data){ $( "#content" ).html(data); } — mudumbi acharya, Apr 03 '15 at 12:25

score 0 · Answer 1 · answered Apr 03 '15 at 12:27

Modified the getSite code and it worked exactly as I wanted

<script type="text/javascript">
        function getSite(value){
        $.ajax({
             url: "/zones/info?siteId="+value,
             type: "get",
             success: function(data){
                $( "#content" ).html(data);
             }
        })
    }
</script>

Django form is not rendered properly after setting initial values dynamically

1 Answers1