How can I get a value from a personalized dropdown? - php

Question

All the people use the normal dropdown like:
<form>
<select>
<option> bla bla </option>
</select>
</form>
Like that I can get the selected value trough PHP. But if I use divs I can't get the values from the multiple dropdowns.
function select_best_plan(sel, _this) {
$parent = $(_this).closest('.select-general');
$parent.find('button font').html($(_this).find('font').html());
$parent.find('.select-menu .select-menu-option').removeClass('active');
$(_this).addClass('active');
}
.select-general {
display: inline-block;
overflow: hidden;
border-radius: 12px;
vertical-align: middle;
position: relative;
text-transform: uppercase;
background: #182045;
color: #FFFFFF;
width: 170px;
min-width: 160px;
text-align: left;
font-size: 15px;
max-width: 100%;
}
.select-general .select-button {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
border-radius: 12px;
color: #FFFFFF;
width: 100%;
}
.select-general .select-button font {
text-align: left;
width: calc(100% - 20px);
height: 100%;
overflow: hidden;
max-width: 340px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-general .select-menu {
padding: 0px;
overflow: hidden;
max-height: 0;
transition: max-height 0.15s ease-out, padding 0.15s ease-out;
}
.select-general .select-menu-option {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
color: #FFFFFF;
width: calc(100% - 26px);
cursor: pointer;
}
.select-general .select-menu-option font {
text-align: left;
}
.select-general .select-menu-option:hover {
background: #1A2A74;
}
.select-general .select-menu-option.active {
opacity: 0.5;
}
.select-general:hover .select-menu {
padding: 10px 0px;
max-height: 500px;
transition: max-height 0.15s ease-in, padding 0.15s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
<div class="select-menu-option" data="3" onclick="select_best_plan(7, this)">
<font class="float-left">Até 3</font>
</div>
<div class="select-menu-option" data="5" onclick="select_best_plan(8, this)">
<font class="float-left">Até 5</font>
</div>
<div class="select-menu-option" data="10" onclick="select_best_plan(9, this)">
<font class="float-left">Até 10</font>
</div>
<div class="select-menu-option" data="15" onclick="select_best_plan(10, this)">
<font class="float-left">Até 15</font>
</div>
</div>
</div>
My idea is that the people select the first div "Apenas 1" and on submit I get that values on PHP.
I really can't find any tips that can help me or I'm just newbie on this..
Thanks.

Answer 1

Just add <input type="hidden" name="select" id="hidden-select" />
Change <div class="select-menu-option" data="5" to ... data-val="5"
and in: select_best_plan add
$('#hidden-select').val($(_this).data('val'))

Answer 2

There is lot of content available online explaining a lot of ways to implement this kind of a behavior.
One such link -
How to use FormData for ajax file upload
Set value of hidden field in a form using jQuery's ".val()" doesn't work
For more ways of implementation you can google with these key words -
Ajax calls
Submitting form with hidden input fields
How to build and submit Form using FormData. etc

Answer 3

Sorry for the first answer.
Well if you want to use customize select then use JavaScript to get the data. Normally only input tags select can be post or send automatically by form tag.
The submit button triggers a JavaScript function then get the value of the selected div then create a input tag containing the value of the div.
Ex:
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
function getselectedval(){
var data = $("div selected identifier here").attr("data");
$("container of passing input").append('<input name="name" val="'+ data +'" type="hidden">');
//submit the form
$("your form").submit();
}
This seems to be a cheat but hope this helps.