I have a from and added a bootstrap class':'form-control' to every field of the form to make them responsive like this :
companyname=forms.CharField( widget=forms.PasswordInput(attrs={'class':'form-control' ,'style': 'width:30%'}) )
but when i add form-control class , the label is showd at the upper row of the text box
i dont know what to do to bring the label beside the text box
when it has no class the code below is ok but its not responsive
<div class="panel-body" style="text-align:right ; margin-left:auto;margin-right:auto;width:80%;">
<div style="width:85% ;margin-left:auto;margin-right:auto;">
<form enctype="multipart/form-data" method="post" >
{% csrf_token %}
{{ profile_form.as_p}}
<input id="savepersonalinfo" type="submit" name="" value="ثبت">
</form>
</div>
</div>
and also how can i put the textboxes arranged exactly in same column ?
in the picutre iust companyname has form-control class and is responsive and other fields are not
Related
I am wanting to create a bootstrap themed togglebox with crispy forms, but the toggle box displays with a checkbox inside it.
In order to find out why I opened the page in Chrome and using inspect, deleted the class from the label tag (custom-control-label below) which removed the inner checkbox leaving just the bootstrap togglebox as I wanted.
So my question is how can I remove a class from a cripsy forms field?
forms.py
completed = forms.BooleanField(label='Have you completed it?', required=False, widget=forms.CheckboxInput(attrs={}))
generated html:
<div class="form-group">
<div id="div_id_completed" class="custom-control custom-checkbox">
<input type="checkbox" name="completed" class="checkboxinput custom-control-input"
id="id_completed" checked="">
<label for="id_completed" class="custom-control-label">
Have you completed it
</label>
</div>
</div>
Thank you.
I am newbie in Django and I would appreciate if someone can help me about this problem.
I have a database in backend with 100 rows of users information.
Name, surname, phone number.
The database is visible on Home page template and if you choose one of this names you can donate something to this person.
When you click on submit button will lead you to new ajax window where you input your data and then submit.
Then I got your message on email.
My questions is how to do at the same time to confirm (submit) and delete row from database (person from database) and then to refresh page ?
Meaning, when you submit form then function should delete person from Home page at once and have to refresh page so you can see another person ?
Here is the code.
I would appreciate any help.
Thanks to all.
views.py
def about(request):
context = {
'num_toys': '1',
}
return render(request, 'about.html') # , context=context
def couses(request):
db_queryset = Children.objects.all()
context = {'child': db_queryset}
return render(request, 'couses.html', context=context)
class ChildrenListView(ListView):
model = Children
context_object_name = 'child'
class ChildrenCreateView(CreateView):
model = Children
form_class = ChildrenForm
success_url = reverse_lazy('children_changelist')
class ChildrenUpdateView(UpdateView):
model = Children
form_class = ChildrenForm
success_url = reverse_lazy('children_changelist')
class ChildrenDetailView(DetailView):
model = Children
form_class = ChildrenForm
success_url = reverse_lazy('children_detail')
children_detail.html
<!-- Start contact form area -->
<div class="couses">
<section class="contact-form-area pb-60 pt-90">
<div class="couses">
<div class="container">
<div class="row">
<!-- Start section title -->
<div class="col-sm-12">
<div class="section-title text-center">
<h2>Donate <span> {{ children.toy }} </span> to <span>{{ children.name }}</span> who is <span>{{children.date }} old</span></h2>
<img src="static/children/img/title-bottom.png" alt="">
</div>
</div>
<!-- End section title -->
<div class="col-sm-12">
<div class="contact-form">
<form id="contact-form" method="POST" action="mail.php">
<div class="form-fields">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your Name" required>
</div>
<div class="form-fields">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Your Email" required>
</div>
<div class="form-fields last">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="text" placeholder="Your Phone" required>
</div>
<div class="message-fields">
<label for="mess">Message</label>
<textarea name="mess" id="mess" cols="30" rows="10" placeholder="Message"></textarea>
</div>
<div class="form-button">
<button type="submit">Send your message</button>
<button type="reset">Reset</button>
</div>
</form>
<p class="form-messege"></p>
</div>
</div>
</div>
</div>
</div>
</section>
sorry if I'm wrong but I understand that you want to do two actions.
In your code I can see that you have forms and class-based Views. Maybe you need to override the function form_valid to do the operations you need when you submit.
Check this website http://ccbv.co.uk there you will find the details of the views.
On click of submit hit the url & process your message on email part first and then you can delete the person from database by filtering out object of that particular person with whatever primary key you have for that table by writing a query in your view. and then render the remaining data of that table to your template on which you are Redirecting from your on submit click.
From above conversation what i understood that you don't want delete that person from database boolean field would be great option rather you want to save the message that has been sent from email by this way you can do both at the same time. you have the message saved in your database and from empty message data can render those user on template.
I have a Django form, which has a lot of fields so that I have to break it up to 3 pages. It means user has to fill some fields of the form in one page , and then they click next to go to next pages and continue to fill the forms.
To achieve that, I plan to display some fields of the form on each page.
I have come up with this code:
HTML Page 1:
<form method="POST" action="#" class="form">
{{form.email}}
{{form.phone_number}} ...
</form>
HTML Page 2 :
<form method="POST" action="#" class="form">
{{form.current_job}}
{{form.current_salary}}...
</form>
It works fine with this code but it just shows the form in basic appearance, I would like to use bootstrap to make it more beautiful.
My questions is that, how can I integrate bootstrap ?
I have come up with this solution, but it is hard-coded and difficult if I changes fields of the form in the future:
<label class="control-label" for="id_field1">Field 1</label>
<input class="form-control" id="id_field1" maxlength="50" name="field1" type="text"/>
<label class="control-label" for="id_field2">Field 2</label>
<input class="form-control" id="id_field2" maxlength="50" name="field2" type="text"/>
Thank you for your help!
I need to render individual fields from my Form so I use the filter |as_crispy_field from crispy-forms and use bootstrap 3 for the style but I need to do it in a form-inline like the first example here bootstrap example page so I tried to do it like this:
template.html
<form class="form-inline">{% csrf_token %}
{{ form.name|as_crispy_field }}
</form>
But the label shows above the TextInput field and not in-line as I need. How can I do this using |as_crispy_field?
EDIT: Here is the HTML after the render with crispy
<form class="form-inline"><input type='hidden' name='csrfmiddlewaretoken' value='****...' />
<div id="div_id_name" class="form-group">
<label for="id_name" class="control-label requiredField">
Name<span class="asteriskField">*</span>
</label>
<div class="controls ">
<input class="form-control textinput textInput form-control" id="id_name" maxlength="100" name="name" type="text" />
</div>
</div>
</form>
The one you linked to, with the labels on the left of the fields, is called "form-horizontal" in Crispy. It is explained here. You need to set these helper properties
helper.form_class = 'form-horizontal'
helper.label_class = 'col-lg-2'
helper.field_class = 'col-lg-8'
Actual inline forms, with the label displayed inside the fields are right below on the same page. You only need to set two helper properties
helper.form_class = 'form-inline'
helper.field_template = 'bootstrap3/layout/inline_field.html'
That should do it, if I understood your question correctly.
I've got a jqGrid that has a button to create a new row. Instead of the Django form that I expect to show up, it just brings up a dialog that says "< views.export_view.ExportTemplateForm instance at 0xb1b2beec>"
HTML:
<div id="add-template-form-div" style="display:none">
<form method="post" name="templateform" id="template-form" title="Template Details">
<table><tbody>
{{export_template_form}}
</tbody></table>
</form>
<div class="form_loading">Adding Template...</div>
<div class="form_error"></div>
<div>
view:
#set other variables
infoDict['export_template_form'] = ExportTemplateForm()
#infoDict gets passed into render_response
class ExportTemplateForm():
id = forms.CharField(widget=forms.HiddenInput())
class Meta(renderutils.BaseModelForm.Meta):
model = ExportTemplate
Any tips?