What's the best way to prepopulate a multiple choice select field. In my view, I'm adding the context the values for the field.
def get_context_data(self, *args, **kwargs):
context = super(UserProfileUpdateView, self).get_context_data(*args, **kwargs)
context['mystates']=user.states
output
Alaska, Arizona, Alabama,
Hmtl page
<div class="form-group">
<label for="id_states">Add State 2:</label> <select name="states" id="id_states" multiple="multiple">
{% include "accounts/snippets/states_drop_down_options.html" %}
</select>
</div>
state_drop_down_options.htmlm
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
In each option you can check if that option is in the mystates variable:
<option value="AL" {% if 'Alabama' in mystates %}selected{% endif%}>Alabama</option>
<option value="AK" {% if 'Alaska' in mystates %}selected{% endif%}>Alaska</option>
<option value="AZ" {% if 'Arizona' in mystates %}selected{% endif%}>Arizona</option>
<option value="AR" {% if 'Arkansas' in mystates %}selected{% endif%}>Arkansas</option>
<option value="CA" {% if 'California' in mystates %}selected{% endif%}>California</option>
Depending on your project, you can have it the way that you think better for your purpose.
1st:
Django.forms.ModelMultipleChoiceField or Django.forms.MultipleChoiceField
2nd:The answer of #Nazkter is a good one,
3rd:
html
(I add a states attribute to select containing the value of {{ states }})
<select name="states" states="{{ states }}" id="id_states" multiple="multiple">
{% include "accounts/snippets/states_drop_down_options.html" %}
</select>
javascript
[].forEach.call(document.querySelectorAll('#id_states option') , function(elm){
var states = document.querySelector('#id_states').getAttribute("states").replace(/\s/g,'').split(",");
if(states.indexOf(elm.innerText) > -1){
elm.selected = true;
}
});
Related
I am using multiselect dropdown but not able to get old values(by using old('') in laravel blade)on submit.Please tell where i am doing wrong.Below i am sharing code.
<div class="form-group">
<label for="integration">Integration</label>
<div class="select2-purple">
<select id="integration" class="form-control form-select form-select-lg col-lg-12 select2" multiple="multiple" aria-label=".form-select-lg example" data-dropdown-css-class="select2-purple" name="integration[]">
<option value=''>Select Integration</option>
#foreach($integartion as $integartions)
<option value="{{ $integartions->ecom_channel }}" #if(isset($company) && in_array($integartions->ecom_channel, $CmpIntegartion) ) selected #endif>{{ $integartions->ecom_channel }}</option>
#endforeach
</select>
#if ($errors->has('integration'))
<span class="text-danger">{{ $errors->first('integration') }}</span>
#endif
</div>
</div>
<select name="integration[]">
<option value=''>Select Integration</option>
#foreach($integartion as $integartions)
<option value="{{ $integartions->ecom_channel }}" #if(old('integration') && is_array(old('integration')) && in_array($integartions->ecom_channel, old('integration')) selected #endif>{{ $integartions-> ecom_channel}}</option>
#endforeach
</select >
Your data will be stored like this in old:
integration[0] = somevalue,
integration[1] = somevalue
So you first check if your old('integration') is not null,
then you check if its an array, then you check if the current item of loop exists inside that array!!
I have 2 multiple value select lists that I pass users between them using jquery.
<select multiple="multiple" id="ListAllUsers" class="form-control">
#foreach ($users as $user)
<option class="content" value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
</select>
<select name="user_id[]" required multiple="multiple" id="SelectedUsers" class="form-control">
#if (!empty(old('user_id')) && $create_form)
#foreach ($old_value_users as $old_user)
<option class="content" value="{{ $old_user->id }}">{{ $old_user->name }}</option>
#endforeach
#endif
</select>
Now, my issue is that when I go and pass the old('user_id') value in the whereIn query, I only get the first result of the array instead of all of the results that are passed in.
$old_users_id = [old('user_id')];
$old_value_users = User::whereIn('id', $old_users_id)->get();
If I replace $old_users_id = [old('user_id')] with $old_users_id = [1,2,3], it works like a charm. I have dd(old('user_id')) and it is indeed an array, so I do not understand what is the hick-up!
Since old('user_id') is an array, you should not put it in an array. Try this;
You shold provide an empty array if old('user_id') is null.
$old_users_id = old('user_id')?old('user_id'):[];
$old_value_users = User::whereIn('id', $old_users_id)->get();
+ point
Instead of whereIn try with whereIntegerInRaw if you are adding a large array of integer bindings to your query.For more check documentation
Something like this one
<select class="custom-select chosen-select {{ $errors -> has('add_project_owner') ? 'is-invalid' : '' }}" name="add_project_owner[]" id="add_project_owner" multiple>
<option value="">choose</option>
#foreach ($owners as $owner)
<option value="{{ $owner -> emp_name }}" {{ (collect(old('add_project_owner'))->contains($owner -> emp_name)) ? 'selected' : '' }}>{{ $owner -> emp_name }}</option>
#endforeach
</select>
I needed to set a value for < select>
so I added a "value=.." to the element thinking that it will give it a default value.
Is there any way other than selected to use, because in my case the value changes from a candidate to an other.
I did this so the user can see first the candidate's service then change it in case of an error..
<span >Service</span>
<select class="form-control item pb-2" name="service" value={{ $candidate->service->service_name }}>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>
You cannot set a default value for select. Instead, you can do something like this:
<select class="form-control item pb-2" name="service" >
<option value={{ $candidate->service->service_name }}>{{ $candidate->service->service_name }}</option>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>
Any option can be set to selected and that will be the default value for the select. That is the standard way of setting the value. Why not use it?
Also options do not have tags inside
<select class="form-control item pb-2" name="service" >
<option selected value="{{ $candidate->service->service_name }}">{{ $candidate->service->service_name }}</option>
<option value="Outsourcing">Outsourcing</option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>
If you must insert a new option and select it then you can use JavaScript
window.addEventListener("load",function() {
const sel = document.querySelector("[name=service]");
const val = "{{ $candidate->service->service_name }}";
const opts = [new Option(val,val),...sel.options]
sel.length = 0;
opts.forEach(opt => sel.appendChild(opt));
sel.value = val;
})
<span>Service</span>
<select class="form-control item pb-2" name="service">
<option value="Outsourcing">Outsourcing</span></option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>
I am not using Ajax or django forms. I have plain HTML select tag inside the form tag and sending the selected option value in my view. I want to retain the select option value after the submission. Currently, it comes to default value of 1 irrespective of my selection. Help would be appreciated.
Here is my template code:
<form method = "post" action = "{% url 'index' %}">
{% csrf_token %}
<label class="mainlbl">Vega</label>
<select name = "drop1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input class="btn btn-ocean btn-side-bar" type = "submit" value="Submit">
</form>
Here is my view for that:
def index(request):
if request.method == "POST":
vega = request.POST['drop1']
vega = int(vega)
gvo = GVOptimize('NSE', 'Nifty')
data = gvo.get_optimal_strategies(vega)
str1 = None
for i in range(0, len(data)):
if i == 0:
str1 = data[i]
elif i == 1:
str2 = data[i]
elif i == 2:
str3 = data[i]
elif i == 3:
str4 = data[i]
else:
break
context_dict = {'str1': str1, 'str2': str2, 'str3': str3, 'str4': str4 'vega': vega}
return render(request, 'demo/dashboard.html', context_dict)
else:
context_dict = {}
return render(request, 'demo/dashboard.html', context_dict)
If you really insist on having a hacky way of maintaining the selected option you can change your form to check every option to see if it equals the number you pass back in your context
<form method = "post" action = "{% url 'index' %}">
{% csrf_token %}
<label class="mainlbl">Vega</label>
<select name = "drop1" >
{% for idx in "useaformpls!" %}
<option value="{{ forloop.counter }}" {% if context_val == forloop.counter %}selected {% endif %}>
{{ forloop.counter }}
</option>
{% endfor %}
</select>
<input class="btn btn-ocean btn-side-bar" type = "submit" value="Submit">
</form>
Where context_val equals the index you pass back in the context data of your view.
this answer is here only, because this is not how it should be resolved!
you are using Django, so use Forms that are dedicated for such a use, there are many reasons why to use them, but there are few that matters:
simple code
straight-forward use of forms with generic views
data validation (yes, you do not need to check if this is an integer, or if somebody is hacking your page and posting value outside of range that is in your select)
data escape - yes, no more stupid security holes
validation tied to form elements, allowing to resubmit data and display to the user where is exactly an error
and don't tell me that this is more work...
forms.py
class MyForm(forms.Form):
drop1 = forms.IntegerField('Vega', choices=[(x,x) for x in range(1, 13)])
views.py
def index(request):
context_dict = {}
if request.method == "POST":
form = MyForm(data=request.POST)
if form.is_valid():
vega = form.cleaned_data['drop1']
gvo = GVOptimize('NSE', 'Nifty')
data = gvo.get_optimal_strategies(vega)
(str1, str2, str3, str4) = data[:4]
context_dict = {'str1': str1, 'str2': str2,
'str3': str3, 'str4': str4 'vega': vega}
else:
form = MyForm()
context_dict['form'] = form
return render(request, 'demo/dashboard.html', context_dict)
dashboard.html
{% if form.is_valid %}
<p>Vega: {{ vega }}</p>
{% else %}
<form method="post" action="{% url 'index' %}">{% csrf_token %}
{{ form }}
<input class="btn btn-ocean btn-side-bar" type="submit" value="Submit">
</form>
{% endif %}
I am not sure if this is a good practice but you may try creating a function in your view.
def send_selected_combo(self):
value_from_select = self.request.GET.get('select_html')
return value_from_select
Then in your template you can call the function.
<select name="select_html" selected="id_selector">
<option value="combo_value" {%if.view.send_selected_combo=="combo_value"%} selected {%endif%}></option>
</select>
<select name = "drop1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
When you submit the form in views.py you can use
selected_value = request.POST.get("drop1"); // If incase you are using get method which you shouldn't then use request.GET.get("drop1")
I'm passing a dictionary to a django template and trying to set a default value for a select box. This template is an 'edit product' template for a previous 'add product' template, thus the user selected one of the following options from a select box when he added a new product and what I am trying to do now is in the 'edit product' template so he can change it while the default will be as the one he selected at first.
Is there a way to do something like this:
<td><select name="gender_limit" deafault="{{django_context.gender}}">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
</td>
Rather than:
<td><select name="gender_limit" >
<option value="Male" selected >Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
</td>
I have tried to look a solution for this but haven't found. Any help is appreciated. Thanks
I found a solution to my problem, here is an example (a different one from the question example):
<select name="units">
<option ng-selected="'{{ med.units }}' == 'mg' " value="mg">mg</option>
<option ng-selected="'{{ med.units }}' == 'gr' " value="gr">gr</option>
<option ng-selected="'{{ med.units }}' == 'mcg' " value="mcg">mcg</option>
<option ng-selected="'{{ med.units }}' == 'ng' " value="ng">ng</option>
</select>
Or even as so:
<select name="units" ng-model="'{{ med.units }}'">
<option value="mg">mg</option>
<option value="gr">gr</option>
<option value="mcg">mcg</option>
<option value="ng">ng</option>
</select>
med.units is django context passed from a view.