CODEWITHSUNDEEP
djangoformstwitter-bootstrapbootstrap-4django-forms
M.J
M.J

Reputation: 325

How to style a Django editable form in bootstrap

I have a form that returns the following fields:

fields = ['username', 'first_name', 'last_name', 'email']

So in my profile/edit view(I mean an HTML page) I have this code:

<div class="col-xl-9">
        <div class="widget has-shadow" style="height:100%">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>edit profile</h4>
            </div>
            <div class="widget-body">
                <form method="POST">
                    {% csrf_token %}
                    <div class="form-group row d-flex align-items-center mb-5">
                        <label class="col-lg-2 form-control-label d-flex justify-content-lg-end">username</label>
                        <div class="col-lg-6">
                            <input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">
                        </div>
                    </div>

                    <div class="em-separator separator-dashed"></div>
                    <div class="text-right">
                        <button class="btn btn-gradient-01" type="submit">Save</button>
                        <button class="btn btn-shadow" type="reset">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

And you see I want to show username field from update_profile_form form. But when I reload the page I have an extra "> below of my username field.

I don't know how to get rid of these characters in my page.

Update

my forms.py looks like:

class AccountUpdateForm(forms.ModelForm):

    class Meta:
        model = Account
        fields = ['username', 'first_name', 'last_name', 'email']

    def clean_username(self):
        if self.is_valid():
            username = self.cleaned_data['username']
            try:
                account = Account.objects.exclude(pk=self.instance.pk).get(username=username)
            except Account.DoesNotExist:
                return username
            raise forms.ValidationError('The username "%s" is now allowed to be used!', username)

and my views.py is:

def edit_profile_view(request):
    context = {}
    if not request.user.is_authenticated:
        return redirect('login')

    if request.POST:
        upd_form = AccountUpdateForm(request.POST, instance=request.user)
        if upd_form.is_valid():
            upd_form.save()
    else: # Get request
        upd_form = AccountUpdateForm(
            initial = {
                "username": request.user.username,
            }
        )
    context = {'update_profile_form': upd_form}
    return render(request, 'account/user/edit-profile.html', context)

Upvotes: 0

Views: 302

Answers (2)

M.J
M.J

Reputation: 325

Because of initials I need to do:

<input type="text" name="username" class="form-control" value="{{update_profile_form.initial.username}}">

Upvotes: 0

Shri Hegde
Shri Hegde

Reputation: 574

you have to replace this line

<input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">

with

<input type="text" name="username" class="form-control" placeholder="{{request.user.username}}">

you do not have to provide initial values to your form in your views.

Upvotes: 1

Related Questions