Django forms Form select Drop down Box Value Passing Instance

  • 2021-07-24 11:10:39
  • OfStack

Today, I continued to do the project and learned the code of forms generation front end of Django.

forms.py


class SignupForm(forms.Form):
  username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True,
                max_length=30, min_length=5,
                error_messages={'required': ' User name cannot be empty ', 'max_length': ' User name at least 5 Bit ',
                        'min_length': ' Maximum User Names 30 Bit '})
  password = forms.CharField(min_length=6, max_length=50, required=True,
                error_messages={'required': ' Password cannot be empty ',
                        'invalid': ' Wrong password format ',
                        'min_length': ' Password cannot be less than 6 Bit ',
                        'max_length': ' Most passwords 50 Bit '})
  classInfo = forms.ModelChoiceField(queryset=ClassInfo.objects.all(), required=True, empty_label=None, initial=" Default value ")# The name of the class is added here 
  email = forms.EmailField(validators=[email_unique_validate, ], required=True,
               error_messages={'required': ' Mailbox cannot be empty ', 'invalid': ' Mailbox format error '})
  mobile = forms.CharField(validators=[mobile_validate, ], required=True,
               error_messages={'required': ' Mobile phone number cannot be empty '})

views then obtains the form of the form through the get method


class SignupView(View):
  def get(self, request):
    obj = SignupForm()
    return render(request, 'user/signup.html', locals())

You can print out obj here, and you can see that the form class has generated the front-end code for us


<tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" value="123123" minlength="5" maxlength="30" required id="id_username"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" value="213123" minlength="6" maxlength="50" required id="id_password"></td></tr>
<tr><th><label for="id_classInfo">Classinfo:</label></th><td>
<select name="classInfo" id="id_classInfo">
 <option value="1" selected>15 Medical software </option>
 <option value="2">15 Medical information </option>
</select></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" value="123123231@qq.com" required id="id_email"></td></tr>
<tr><th><label for="id_mobile">Mobile:</label></th><td><input type="text" name="mobile" value="13328768123" required id="id_mobile"></td></tr>

select drop-down box content is taken out from the database, using ModelChoiceField, queryset settings to take out the data, so that dynamic access to the value of select.

The front-end code can use this form variable obj directly


<form method="post" action="{% url 'signup' %}">
  ...
  {% for field in obj %}
    {{ field }}
  {% end for %}
  ...
</form>

But I didn't set label value here, so I didn't be lazy directly, but wrote one by myself


<form method="post" action="{% url 'signup' %}>
....
   <tr>
     <td width="120" align="right" valign="top"> User name ( Student number )</td>
     <td width="auto" align="left"><input type="text" name="username" class="sls">        </td>
   </tr>
   <tr>
     <td width="120" align="right"> Password </td>
     <td width="auto" align="left"><input type="password" name="password" class="sls"></td>
   </tr>
   <tr>
     <td width="120" align="right" valign="top"> E-mail </td>
     <td width="auto" align="left"><input type="text" name="email" class="sls"></td>
   </tr>
   <tr>
     <td width="120" align="right"> Class </td>
     <td width="auto" align="left">
        {{ obj.classInfo }}
     </td>
   </tr>
   <tr>
     <td width="120" align="right" valign="top"> Mobile phone number </td>
     <td width="auto" align="left"><input type="text" class="sls" name="mobile"></td>
   </tr>
....

I used the select tag to write, and then passed the value to option, but I found that there was a blank value when I used obj. classInfo to get the value inside

It is similar to the original data inventory with two options, and then the front-end display----; Option 1; Blank; Option 2; Blank.

After 1 search, this option appears because the initial value is not set, and then initial is set

Two variables appear because of carelessness. obj. classInfo is itself an select tag with two options in it.

After that, post commit verification, and then render operation


  def post(self, request):
    has_error = True
    obj = SignupForm(request.POST)
    #print(obj)
    if obj.is_valid():
      has_error = False
      username = obj.cleaned_data['username']
      password = obj.cleaned_data['password']
      class_name = obj.cleaned_data['classInfo']
      email = obj.cleaned_data['email']
      mobile = obj.cleaned_data['mobile']
  ......
 

Related articles: