Hello I have this select but I got an error with that :
Here is my code :
<label for="id_user">{% 'User' %}
<select name="user" id="id_user" class="form-control user"
data-live-search="true" data-width="100%"
ng-change="user()" ng-init="user()"
ng-model="user">
<option value=""></option>
{% for user in users %}
<option data-content="{{ user.displayname }}" value="{{ user.uniqueid }}">
{{ user.displayname }}</option>
{% endfor %}
</select>
</label>
Actually I got this :
My problem
I don't know why I got two circles like this...
Anyone can help me please ?
Thank you very much !
Try to remove this line:
<option value=""></option>
Related
This is my html:
{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% else %}
<div class="btn-group">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% endif %}
And this is my javascript:
var updateBtns = document.getElementsByClassName('update-cart')
for (i=0;i<updateBtns.length;i++){
updateBtns[i].addEventListener('click',function(){
var productId=this.dataset.product
var action=this.dataset.action
var sizebox = document.getElementById("sizebox");
var size = sizebox.options[sizebox.selectedIndex].value;
console.log(size)
updateUserOrder(productId, action, size)
})
}
I am working on a basic django ecom. website. I have come across a problem which I am not able to solve. The problem is that on the products page of my website every product has a select box for size of the item and every select box has the same id (As i am iterating over the products). So whenever I choose a size for any product other than the first product the size selected from the first select box under first product goes to my database instead of the size selected under that product.
I want to figure out a way so that the size from the select box under a product is sent to the database instead of the size from first select box with id selectbox which is currently happening. Please help. Thanks.
Try using loop counter and generate different id for select field,
use loop.index to generate value or use custom counter like
counter = 0
{%for ...%}
<option value="{{t}}" id="{{t+counter}}">{{t}}</option>
counter++
{%endfor%}
Or by using loop.index here's your code
{% if product.id in list_cart %}
<div class="btn-group" style="display: none;">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% else %}
<div class="btn-group">
<select class="selection-2 border" data-product={{product.id}} style="border: cadetblue;"
name="size" required id="sizebox">
{% for t in product.size.all %}
<option value="{{t}}" id="{{t+loop.index}}">{{t}}</option>
{% endfor %}
</select>
</div>
{% endif %}
I am trying to get the value inside input field whenever an option is selected from select box. For now, whenever I select an option, the related values are showing but it is in select option format. I just want it in input field.
Here is my HTML
<select class="form-control" name="organisation" id="mainpage">
<option selected="">Select</option>
#foreach($users as $k=>$u)
#if($u->created_by == $userId)
<option value="{{ $u->id }}" id="{{ $u->id }}">{{ $u->name }}</option>
#endif
#endforeach
</select>
I just want that the below selection box will come in input field.
<select class="form-control" id="mainsection" required>
<option>--Select--</option>
#foreach($users as $k=>$u)
#if($u->created_by == $userId)
<option value="{{ $u->user_id }}" data-parent="{{ $u->id }}">{{ $u->user_id }}</option>
#endif
#endforeach
</select>
Here is my Script :
<script type="text/javascript">
jQuery("select#mainpage").on('change',function () {
jQuery("select#mainsection").find('option').css('display', 'none');
var idclassurl = jQuery("select#mainpage :selected").attr('id')
jQuery("select#mainsection").find('option[data-parent="'+idclassurl+'"]').css('display', 'block');
});
</script>
change this code
<select class="form-control" id="mainsection" required>
<option>--Select--</option>
#foreach($users as $k=>$u)
#if($u->created_by == $userId)
<option value="{{ $u->user_id }}" data-parent="{{ $u->id }}">{{ $u->user_id }}</option>
#endif
#endforeach
</select>
with this code
<div class="form-control" id="mainsection">
#foreach($users as $k=>$u)
#if($u->created_by == $userId)
<input id="{{ $u->user_id }}" data-parent="{{ $u->id }}" value="{{ $u->user_id }}">
#endif
#endforeach
</div>
and change your script to
<script type="text/javascript">
jQuery("select#mainpage").on('change',function () {
jQuery("#mainsection").find('input').css('display', 'none');
var idclassurl = jQuery("select#mainpage :selected").attr('id')
jQuery("#mainsection").find('input[data-parent="'+idclassurl+'"]').css('display', 'block');
});
</script>
Above solution is according to your already developed code concept. There are few other easy methods too.
I want to make a condition under which it will not be necessary to change the code if the data in the database has been deleted. Now I have a simple condition:
$('#category_id').change(function () {
var optionSelected = $("option:selected", this);
var valueSelected = $(this).val();
if (valueSelected === '1') {
$('#rooms_id').hide();
$('#series_id').hide();
} else if (valueSelected === '2') {
$('#rooms_id').hide();
$('#series_id').hide();
} else {
$('#rooms_id').show();
$('#series_id').show();
}
});
That is, when you select a specific category, unnecessary fields are hidden. But, if you delete the categories in the database, and the categoties is added again not in the order as they were before, the condition will stop working. Because select will be different.
<div class="col-md-3 mb-3">
<label class="sr-only">Categories</label>
<select name="category" class="form-control" id="category_id">
<option selected="true" disabled="disabled">Categories</option>
{% for category in categories %}
<option value="{{ category.pk }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
This fields must be hide:
<div class="col-md-6 mb-3">
<label class="sr-only">Комнаты</label>
<select name="rooms" class="form-control" id="rooms_id">
<option selected="true" disabled="disabled">Комнаты</option>
{% for key, value in room_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-3">
<label class="sr-only">Серия</label>
<select name="series" class="form-control" id="series_id">
<option selected="true" disabled="disabled">Серия</option>
{% for series in series %}
<option value="{{ series.pk }}">{{ series.name }}</option>
{% endfor %}
</select>
</div>
Now everything works only in this sequence, but if you add categories to the database in a different order, then nothing works, because this solution is not entirely correct. Pleace, help :)
I use select2 and have this layout
Original code(using Twig):
<select id="workerId" name="workerId" class="form-control select2 text">
<option value="0">-- Не указано --</option>
{% for worker_one in workerList %}
<option data-position="{{ worker_one.position_list }}" value="{{ worker_one.id }}"
{% if worker_one.status != 3 %}
{% if sampleActs.worker_id %}
{% if worker_one.id == sampleActs.worker_id %}
selected
{% endif %}
{% else %}
{% if worker_one.id == areaCore.worker_id %}
selected
{% endif %}
{% endif %}
{% else %}
disabled
{% endif %}
>{{ worker_one.name }}
</option>
{% endfor %}
</select>
$('.select2').select2();
<select name="name">
<option disabled>Vasia</option>
<option>Petia</option>
<option>Stas</option>
</select>
When $("[name='name'").select2() init in dropdown list I still can select option options with disabled attribute. How I can fix this?
Thanks.
Seems to work fine here:
$("[name='name'").select2()
select {
width: 100px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="name">
<option disabled>Vasia</option>
<option>Petia</option>
<option>Stas</option>
</select>
So your issue is not related to your HTML
Set an ID for all the option and then, on page load, maybe in the onload of the body tag, you can set this:
<select name="name">
<option id="vasia">Vasia</option>
<option id="petia">Petia</option>
<option id="stas">Stas</option>
</select>
Then
<body onload="document.getElementById('vasia').disabled = true;">
Hope it helps
I installed on my dev chosen.js library. My php code :
$this->form_add_offer = new Form\Form(
new Form\Field\Text('name', '', true),
new Form\Field\Select('orders','',true, $a_offer_group)
);
if ($this->getRequest()->isPostMethod() && $this->form_add_offer->bind($_POST)) {
print_r($this->form_add_offer->orders->getValue())
}
My view :
<form id="form_add_offer" action="{{ 'route'|url_route }}" method="post" >
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="" style="display: block;font-size: 100%;margin: 0;width: 12em;padding: 5px;">Nom : </label>
<input type="text" id="{{ form_add_offer.name.name }}" name="{{ form_add_offer.name.name }}" value="{{ form_add_offer.name.value }}" required="required" placeholder="Nom" class="form-control" style="display: block;font-size: 100%;margin: 0;padding-left: 5px;"/>
</div>
<div class="form-group">
<label class="control-label" for="{{ form_add_offer.orders.name }}" >Type : </label>
<div>
<select data-placeholder=""
style="width:350px;"
class="chosen-select form-control {{ form_add_offer.orders.name }}" multiple
tabindex="6"
id="{{ form_add_offer.orders.name }}">
{% for key,optogroup in form_add_offer.orders.choices %}
<optgroup label="{{ key }}">
{% for k,v in optogroup %}
<option value="{{ key }}"
{% if k == form_add_offer.orders.value %}selected="selected"{% endif %}>
{{ v }}
</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
</div>
</div>
The .js inside the view :
<script>
$(document).ready(function() {
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
console.log(config);
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
</script>
The multiselect box works fine, the problem is when I submit the form, for example if I do $this->form_add_offer->name->getValue() I get the value from input text name. If I do $this->form_add_offer->orders->getValue() so I get null array, but the multiple select box in the view is not empty. Can you help me please ? Thx in advance and sorry for my english