HTML select form with option to enter value does not store the entered value as object field in django

Question

I have a Django form in which I have several drop-down menus that have an option to enter a custom value. In order to enter a custom value, I am using the following implementation to toggle a textbox whenever the custom value is selected from this implementation http://jsfiddle.net/6nq7w/4/

Whenever I select an option from the dropdown list and save the form, the model's object value (In this case it is EmployeeInformation.dept) retains the value selected, but it is not the case if I enter a custom value.

In the below example, I use a chained dropdown implementation to load the Department based on the Department ID.

For example - Let's say while filling the form I select the value Sales then the value of EmployeeInformation.dept = Sales, whereas when I select the option as Enter Manually and enter a new value say DeptXYZ the Django model object does not take this manually entered value as the data for the field Dept.

models.py

class EmployeeInformation(models.Model):
    name = models.Charfield(max_length=30,null=False, blank=False)
    dept_id = models.ForeignKey(DepartmentInformation, on_delete=models.SET_NULL, null=True)
    dept = models.ForeignKey(SubDeptInformation, on_delete=models.SET_NULL, null=True)
    salary = models.DecimalField(null=True, blank=True, decimal_places=2, max_digits=10)

form.html

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="EmployeeInformation" action="#">
Department: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='Enter Manually'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="Enter Manually">[Enter Manually]</option>
            <option>HR</option>
            <option>Sales</option>
            <option>Finance</option>
        </select><input name="Dept" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

views.py

class AddEmployeeInfo(CreateView):
    model = EmployeeInformation
    form_class = EmployeeForm
    template_name = 'form.html'
    success_url = reverse_lazy('employee_list')

How can I store the manually entered value as the value of the model object field, ie., in my example EmployeeInformation.dept.name

Thanks for any help in advance !!

score 0 · Accepted Answer · answered Oct 01 '19 at 19:53

DeptXYZ or any department entered manually does not exist in the database.

dept has a ForeignKey relationship with EmployeeInformation model. Hence, to store DeptXYZ or any other department entered manually, the department should exist in the database. Since, DeptXYZ is not present in the database, Django is storing null instead.

To store DeptXYZ or any other department entered manually, you will need to create the corresponding department first. You will need to override the form_valid() method of AddEmployeeInfo as described here to create and save the manually entered department first.

Hope this help!

HTML select form with option to enter value does not store the entered value as object field in django

1 Answers1