I am using check box control in a simple django application. When I use the standard check box control, I can get the desired values in views.py. But I fail to get the values when I use bootstrap check box control. Logic seems to be fine, I don't know why it's not working. Can anybody point out the mistake, Thanks in advance.
Standard Way
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
Bootstrap Way
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Mango</label>
</div>
view.py
if request.method == 'POST':
fruit = request.POST.getlist('fruit')
You have set id="fruit" for both and for="fruit" for both.
Those need to be different for different checkboxes.
Also, the values were set to empty in your case.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Apple" id="apple">
<label class="form-check-label" for="apple">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mango" id="mango">
<label class="form-check-label" for="mango">Mango</label>
</div>
</div>
</div>
</div>
Related
I have input fields that lower label when something has been typed in it.
paste bin css
<div class="form__group">
<input type="text" class="form__input" id="name" placeholder="Full name" required=""
autocomplete='off' />
<label for="name" class="form__label">Full Name</label>
</div>
But, when I use django forms, they don't work at all
<div class="form__group col">
{{createSet.title}}
<label for="id_title" class="form__label">Title</label>
</div>
please anyone can help me ? How can I convert a field string to list ? I have a field called Size, it means that the field contains somthing as : "XXL, XL, X, SM".
So I want to get something as :
<form class="form-control" action="index.html" method="post">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="taille">
<label class="custom-control-label" for="taille">SM</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="size">
<label class="custom-control-label" for="size">XXl</label>
</div>
<div class="customenter code here-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="size">
<label class="custom-control-label" for="size">XL</label>
</div>
</form>
What's your recommandations guys ?
Thank you guys, I already got the answer. I solved it by creating a table with the field article_size in models.py file.
Here is the working code:
<form class="form-control" action="index.html" method="post">
{% for size in article.size_article.all %}
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="taille{{size.article_size}}">
<label class="custom-control-label">{{size.article_size}}</label>
</div>
{% endfor %}
</form>
Good day,
In Django project I have an html file with a div in which some fields(like p) change the content by radiobutton choice (using JavaScript).
Need to turn the div with the changed content (by radiobutton choice) into pdf and doc (with saving of all styles).
Any help is appreciated.
I tried "wkhtmltopdf" but it generates pdf only with model contents from db and without result of radiobutton work.
<!--Choice radiobuttons-->
function Display(obj) {
fioid=obj.id;
if(fioid=='exampleRadios1'){
document.getElementById("fiz").style.display='block';
document.getElementById("ip").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios2'){
document.getElementById("ip").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios3'){
document.getElementById("ur").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ip").style.display='none';
}}
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios1" value="FIZ" onclick="Display(this);" checked>
<label class="form-check-label" for="exampleRadios1">
FIZ
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios2" value="IP" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios2">
IP
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios3" value="UR" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios3">
UR
</label>
</div>
</div>
<div>
<p style="text-align: justify; font-family: Times New Roman;">
<span style='display: block;' id="fiz">This is FIZ</span>
<span style='display: none;' id="ip">This is IP</span>
<span style='display: none;' id="ur">This is UR</span>
</p>
<div>
This is may be answer to the question.
https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/
I am using Django and Bootstrap on frontend to write a single profile editing module.
Plain form from Django is ugly, so I did some custimizing on the form. Here is the HTML form:
<form actoin="{% url 'edit_profile' %}" method="post">
{% csrf_token %}
<div class="form-group row">
<label for="chineseName" class="col-sm-2 control-label">name</label>
<div class="col-sm-10">
<input name="chinese_name" class="form-control" id="chineseName" placeholder="name" value="{{form.chinese_name.value}}">
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
{% if form.gender.value == "M" %}
<input type="radio" name="gender" id="gender1" value="M" checked> Male
{% else %}
<input type="radio" name="gender" id="gender2" value="M"> Male
{% endif %}
</label>
<label class="radio-inline">
{% if form.gender.value == "F" %}
<input type="radio" name="gender" id="gender1" value="F" checked> Female
{% else %}
<input type="radio" name="gender" id="gender2" value="F"> Female
{% endif %}
</label>
</div>
</div>
<div class="form-group row">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input name="age" class="form-control" id="age" placeholder="年龄" value="{{form.age.value}}">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 control-label">phone</label>
<div class="col-sm-10">
<input name="phone" class="form-control" id="phone" placeholder="phone" value="{{form.phone.value}}">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default col-xs-12" id="confirm" style="display:none;">confirm</button>
</div>
</div>
</form>
Somehow request.POST is not receiving data from this form. When I switch this long HTML snippet into {{form}}, everything is fine.
So view function is correct. Is there anything wrong with this template file, especially the form part?
You should add the css in the form class, for example if you are using ModelForm:
self.fields['phone'].widget.attrs['placeholder'] = self.fields['phone'].label
or if you are using Form :
phone = forms.CharField(widget=forms.TextInput(attrs={'placeholder' : 'phone'))
Nothing looks out of order at first look. One way to debug further would be to instantiate the form and print it. Then compare everything, especially the <form> tag and <input> tags.
I've searched extensively on this site and tried my best, but cannot figure out how to put the label and input on the same line, right now, it displays like this:label and input box are on different lines
First, as people suggested, I grouped them using "form-group" class, but no luck. Then I continued to search, some says you should use "col-sm-1" which I tried, no luck, some says you should use "form-control-static", but still no luck. Any help is deeply appreciated!
<div class="tab-content">
<div class="row" id="create_new_spa_form">
<form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();">
<div class="span4">
<div class="form-group">
<label class="control-label col-sm-1" for="input01">Text input</label>
<div class="controls col-sm-1">
<input type="text" class="form-control-static" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
</form>
</div>
</div>
After making edits as ZimSystem suggested, now it looks like this:part of first label got truncated
How can I fix this? Also, how can I adjust the size of the input box? I don't need them to be so wide.
Use form-inline and remove the extra markup around the labels and inputs..
<form method="post" action="" class="form-inline">
<label for="input01">Text input</label>
<input type="text" class="form-control-static" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
</form>
http://www.bootply.com/7BrrI0uZiH
From the 2.x docs: http://getbootstrap.com/2.3.2/base-css.html#forms
add this to your form
class="form-inline"
more examples here about the Inline form... http://getbootstrap.com/css/#forms
hope this helps :)