Django 表单中的自定义 EditProfile,提交按钮不起作用
custom EditProfile in Django forms, submit button not working
我在我的 forms.py 文件中创建了 EditProfile 表单:
from django.contrib.auth.forms import UserChangeForm
from korisnici.models import CustomKorisnici
from django import forms
class EditProfile(UserChangeForm):
email = forms.EmailField(widget=forms.EmailInput(attrs={'class': 'form-control'}))
first_name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
last_name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
phone_number = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
bio = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
phone_number = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
class Meta:
model = CustomKorisnici
fields = ('username', 'first_name', 'last_name', 'email','bio','phone_number','profile_image')
def __init__(self, *args, **kwargs):
super(EditProfile, self).__init__(*args, **kwargs)
self.fields['username'].widget.attrs['class'] = 'form-control'
self.fields['phone_number'].required = False
self.fields['profile_image'].required = False
self.fields['bio'].required = False
在我 运行 我的 HTML 文件中的默认 Django 表单之后(edit_profile.html):
<div class="form-group">
<div class="container">
<div class="form">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>
</div>
</div>
</div>
当我点击提交按钮时,它工作正常,我的个人资料页面被编辑,数据库中的数据发生变化。
但是当我在 bootstrap 中自定义表单时,提交按钮没有任何作用。这是我的 bootstrap 表格:
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label >Username</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label >First name</label>
<input type="text" class="form-control" name="first_name">
</div>
<div class="form-group">
<label >Last name</label>
<input type="text" class="form-control" name="last_name">
</div>
<div class="form-group">
<label >Email </label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label >Biography </label>
<input type="text" class="form-control" name="bio">
</div>
<div class="form-group">
<label >Phone number</label>
<input type="text" class="form-control" name="phone_number">
</div>
<div class="form-group">
<label >Profile image</label>
<input type="file" class="form-control" name="profile_image">
</div>
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>
和view.py:
class UserEditProfileView(generic.UpdateView):
form_class = EditProfile
template_name = 'registration/edit_profile.html'
success_url = reverse_lazy('home')
def get_object(self):
return self.request.user
使用标签
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label >Username</label>
<input type="text" class="form-control" name="username">{{ form.first_name }}
</div>
...ecc
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>
我在我的 forms.py 文件中创建了 EditProfile 表单:
from django.contrib.auth.forms import UserChangeForm
from korisnici.models import CustomKorisnici
from django import forms
class EditProfile(UserChangeForm):
email = forms.EmailField(widget=forms.EmailInput(attrs={'class': 'form-control'}))
first_name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
last_name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
phone_number = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
bio = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
phone_number = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'class': 'form-control'}))
class Meta:
model = CustomKorisnici
fields = ('username', 'first_name', 'last_name', 'email','bio','phone_number','profile_image')
def __init__(self, *args, **kwargs):
super(EditProfile, self).__init__(*args, **kwargs)
self.fields['username'].widget.attrs['class'] = 'form-control'
self.fields['phone_number'].required = False
self.fields['profile_image'].required = False
self.fields['bio'].required = False
在我 运行 我的 HTML 文件中的默认 Django 表单之后(edit_profile.html):
<div class="form-group">
<div class="container">
<div class="form">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>
</div>
</div>
</div>
当我点击提交按钮时,它工作正常,我的个人资料页面被编辑,数据库中的数据发生变化。 但是当我在 bootstrap 中自定义表单时,提交按钮没有任何作用。这是我的 bootstrap 表格:
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label >Username</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label >First name</label>
<input type="text" class="form-control" name="first_name">
</div>
<div class="form-group">
<label >Last name</label>
<input type="text" class="form-control" name="last_name">
</div>
<div class="form-group">
<label >Email </label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label >Biography </label>
<input type="text" class="form-control" name="bio">
</div>
<div class="form-group">
<label >Phone number</label>
<input type="text" class="form-control" name="phone_number">
</div>
<div class="form-group">
<label >Profile image</label>
<input type="file" class="form-control" name="profile_image">
</div>
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>
和view.py:
class UserEditProfileView(generic.UpdateView):
form_class = EditProfile
template_name = 'registration/edit_profile.html'
success_url = reverse_lazy('home')
def get_object(self):
return self.request.user
使用标签
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label >Username</label>
<input type="text" class="form-control" name="username">{{ form.first_name }}
</div>
...ecc
<button id="btn" class="btn" type="submit">Edit Profile</button>
</form>