Envoyer des entrées de selection au serveur
Salut tous, J'ai conçu des entrées de sélection personnalisée pour la date de naissance de l'utilisateur (jour, mois et année) avec du et PHP dans une liste non ordonnée, donc l'élément <select> devient <ul> et <option> devient <li>, j'ai décidé de personnaliser ma propre entrée de sélection car je n'aime pas le style traditionnel de l'entrée de sélection, mais malheureusement, le formulaire n'envoie pas les données sélectionnées au serveur de manière dynamique. Cela fonctionne bien lorsque je supprime le code JS qui personnalise la zone de sélection ou lorsque j'attribue des constantes au différentes entrées. Les éléments select sont toujours présents dans le DOM mais je ne sais pas pourquoi ils n'envoient pas les données au serveur, quelqu'un peut-il m'aider s'il vous plaît.
PHP/HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <form action="/url/accounts/" method="POST">
<div class="profile__input">
<div class="input__title tx-gray">Date de naissance</div>
<div class="input__dropdown">
<select id="day" name="birth_day">
<option value="hide">Jour</option> <?php for ($i = 1; $i <= 31; $i++) : ?> <option value="
<?php echo ($i < 10) ? '0'.$i : $i; ?>"> <?php echo $i; ?> </option> <?php endfor; ?>
</select>
<select id='month' name='birth_month'>
<option value="hide">Mois</option> <?php
$monthArray = [
['id'=>1, 'month'=>'Janvier'],
['id'=>2, 'month'=>'Février'],
['id'=>3, 'month'=>'Mars'],
['id'=>4, 'month'=>'Avril'],
['id'=>5, 'month'=>'Mai'],
['id'=>6, 'month'=>'Juin'],
['id'=>7, 'month'=>'Juillet'],
['id'=>8, 'month'=>'Août'],
['id'=>9, 'month'=>'Septembre'],
['id'=>10, 'month'=>'Octobre'],
['id'=>11, 'month'=>'Novembre'],
['id'=>12, 'month'=>'Décembre']
];
foreach($monthArray as $val){
if($val == $userData->birthday)
{
echo "
<option value=".$val['id']." selected>".$val['month']."</option>";
}
else {
echo "
<option value=".$val['id'].">".$val['month']."</option>";
}
}
?>
</select>
<select id="year" name="birth_year">
<option value="hide">Année</option> <?php for ($i = 1950; $i <= date('Y'); $i++) : ?> <option value="
<?php echo $i; ?>"> <?php echo $i; ?> </option> <?php endfor; ?>
</select>
</div>
</div>
<div>
<input type="submit" class="submitBtn" name="btnUpdate" value="SAVE">
</div>
</form> |
JS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
$(function() {
$('select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('<div class="select blu-dropdown dropdown__item b-selection"></div>');
$this.after('<div class="select-styled"></div>');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text()); // <button class="blu-list__item">
var $dropdownContainer = $('<div />', {
'class': 'select-options blu-dropdown__content b-shadowed'
}).insertAfter($styledSelect);
var $listContainer = $('<div />', {
'class': 'blu-list b-overflow-y'
}).appendTo($dropdownContainer);
var $list = $('<ul />').appendTo($listContainer);
for (var i = 0; i < numberOfOptions; i++) {
var $listItem = $('<li />', {
'class': 'calendar__item'
}).appendTo($list);
var $listItemBtn = $('<div />', {
'class': 'blu-list__item',
}).appendTo($listItem);
var $listItemHeading = $('<div />', {
'class': 'blu-list__item-heading',
}).appendTo($listItemBtn);
$('<label />', {
'class': 'blu-list__item-heading',
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($listItemHeading);
}
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('div.select-options').hide();
});
$(this).toggleClass('active').next('div.select-options').toggle();
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$dropdownContainer.hide();
});
$(document).click(function() {
$styledSelect.removeClass('active');
$dropdownContainer.hide();
});
});
}); |
