How to pass values via POST
bloodyburger opened this issue · comments
I have the listbox working fine on HTML, how do I pass the selected values to Python via POST ? request.POST doesnt contain any variable with the name of SELECT.
<select name="dual_listbox" id="dual_listbox" class="dual-listbox" multiple
data-available-title="Source Columns"
data-selected-title="Destination Columns"
data-add="<i class='flaticon2-next'></i>"
data-remove="<i class='flaticon2-back'></i>"
data-add-all="<i class='flaticon2-fast-next'></i>"
data-remove-all="<i class='flaticon2-fast-back'></i>">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Do you have this in a form element? Since this package modifies the underlying select. Otherwise, are you able to share a little bit more of how you implemented it?
Yes, the select tag is within <form> and when I inspect the request, there is no variable by the name of select. I have few other elements on this form and those are working fine. Since this package modifies the underlying select, are we sure it gets passed to the request.
If the code you send above is what you use, the name is dual_listbox and not select. Could that be the issue?
Sorry for the confusion, "name of select" I meant is "dual_listbox",
here is the python snippet,
print(request.POST)
and output of the request,
<QueryDict: {'csrfmiddlewaretoken': ['T73H65V4ajn367gDuZtBIbUlmcpqTfOedNdsVmynSrOzucZW1B8ImZDsmzUV3h4p'], 'dg_map_name': ['test'], 'dg_map_output_file': ['output.csv'], 'dg_map_input_file': ['Worksheet_62187.csv'], 'dg_map_header_row': ['0'], 'dg_map_bottom_row': ['0'], 'dg_map_descriptor': ['2']}> <MultiValueDict: {}>
Do you have a working example in any other language?
We use this in our Django project.
The django form looks as followed:
where questionnaire is a ForeignKey and members is a ManyToMany relation.
class OrganizationTeamForm(forms.ModelForm):
questionnaire = forms.ModelChoiceField(queryset=Questionnaire.objects.all())
class Meta:
model = Team
fields = ["name", "members", "questionnaire"]When the form is renderd it looks like this: (some fields are left out since they were not needed)
<form id="team_edit" action="." method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="some_value"/>
<div class="horizontal-form">
<label class="horizontal-form__label">Name</label>
<input type="text" name="name" id="id_name" value="" class="input" maxlength="250" required=""/>
</div>
<div class="horizontal-form">
<label class="horizontal-form__label">questionnaire</label>
<select name="questionnaire" id="id_questionnaire" class="input">
<option value="">---------</option>
<option value="1">questionnaire 1</option>
</select>
</div>
<div class="horizontal-form">
<label class="horizontal-form__label">Members</label>
<div class="dual-listbox id_members">
<div class="dual-listbox__container">
<div>
<input class="dual-listbox__search" placeholder="search" />
<div class="dual-listbox__title">available</div>
<ul class="dual-listbox__available">
<li class="dual-listbox__item" data-id="1">member 1</li>
<li class="dual-listbox__item" data-id="2">member 2</li>
<li class="dual-listbox__item" data-id="3">member 3</li>
</ul>
</div>
<div class="dual-listbox__buttons">
<button type="button" class="dual-listbox__button">>></button>
<button type="button" class="dual-listbox__button">></button>
<button type="button" class="dual-listbox__button"><</button>
<button type="button" class="dual-listbox__button"><<</button>
</div>
<div>
<input class="dual-listbox__search" placeholder="search"/>
<div class="dual-listbox__title">selected</div>
<ul class="dual-listbox__selected"></ul>
</div>
</div>
</div>
<select name="members" id="id_members" multiple="" style="display: none">
<option value="1">member 1</option>
<option value="2">member 2</option>
<option value="3">member 3</option>
</select>
</div>
<div class="action-icons">
<button class="action-icons__button" type="submit">Save</button>
</div>
</form>When I post this form this is what the form is sending:
csrfmiddlewaretoken=some_value
name=testing
questionnaire=1
members=1
members=2
So the select field is rendered by Django, and we add dual-listbox to the field later
dualListbox("#id_members")okay, that's strange, the selected values from duallistbox are not getting passed to the form for me.
Alright, here is what I found, the values are not sent to the request if I dynamically update the options like below, but works if I hardcode the value in the select options.
$.ajax({
url: '/fmi',
type: "POST",
data: formData,
dataType: "json",
headers: {
'X-CSRFToken': $("[name=csrfmiddlewaretoken]").val()
},
mimeType: "multipart/form-data",
success: function (data) {
console.log(data.input_cols)
var cols = data.input_cols
//let dualListbox = new DualListbox("#dg_dual_listbox");
//dualListbox.available = [];
//dualListbox.options = "";
var list_obj = [];
$.each(cols, function (idx, col) {
console.log(col)
list_obj.push({
'text': col,
'value': col
});
});
if ($('#dg_dual_listbox').length) {
dualListbox = new DualListbox("#dg_dual_listbox", {
addEvent: function (value) {
// Should use the event listeners
console.log(value);
},
removeEvent: function (value) {
// Should use the event listeners
console.log(value);
},
availableTitle: "Source Columns",
selectedTitle: "Selected Columns",
addButtonText: ">",
removeButtonText: "<",
addAllButtonText: ">>",
removeAllButtonText: "<<",
sortable: true,
upButtonText: "ᐱ",
downButtonText: "ᐯ",
options: list_obj,
});
Got it working by populating the select from AJAX before initializing duallistbox.
$('#dual_listbox').append('<option value="' + col + '">' + col + '</option>');