Afficher les textes ON ou OFF à chaque clic du checkbox
Bonjour.
L'idée pour moi est d'ajouter une fonctionnalité d'activation et de désactivation en PHP et Ajax plus tard. Mais pour le moment, je suis confronté à une erreur d'affichage de texte on et off au niveau de l'activations des cartes carte Visa et Mastercard dont le Code HTML est le suivant:
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
| <div class="col-lg-3 mb-lg-0 mb-3">
<div class="card p-3">
<div class="row">
<div class="col-8">
<div class="img-box"><img src="cardimg/visa.png" alt=""></div>
<div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
</div>
<div class="col-4">
<form method="post" class="toggleForm">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" name='machine_state'>
<label class="custom-control-label" id="statusText1" for="customSwitch1"></label>
</div>
</form>
</div>
</div>
<div class="row">
<small class="col-9">
<span class="fw-bold">Expiry date:</span>
</small>
<small class="col-3">
<span>10/16</span>
</small>
</div>
</div>
</div>
<div class="col-lg-3 mb-lg-0 mb-3">
<div class="card p-3">
<div class="row">
<div class="col-8">
<div class="img-box"><img src="cardimg/mastercard.png" alt=""></div>
<div class="number"><label class="fw-bold" for="">**** **** **** 1060</label></div>
</div>
<div class="col-4">
<form method="post" class="toggleForm">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2" name='machine_state'>
<label class="custom-control-label" id="statusText2" for="customSwitch2"></label>
</div>
</form>
</div>
</div>
<div class="row">
<small class="col-9">
<span class="fw-bold">Expiry date:</span>
</small>
<small class="col-3">
<span>10/16</span>
</small>
</div>
</div>
</div> |
Et un 1er Code JS des ids customSwitch1 et statusText1:
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
| function putStatus() {
$.ajax({
type: "GET",
url: "https://api.srv3r.com/toggle/",
data: {toggle_select: true},
success: function (result) {
if (result == 1) {
$('#customSwitch1').prop('checked', true);
statusText1(1);
} else {
$('#customSwitch1').prop('checked', false);
statusText1(0);
}
}
});
}
function statusText1(status_val) {
if (status_val == 1) {
var status_str = "On";
} else {
var status_str = "Off";
}
document.getElementById("statusText1").innerText = status_str;
}
function onToggle() {
$('#toggleForm :checkbox').change(function () {
if (this.checked) {
//alert('checked');
updateStatus(1);
statusText1(1);
} else {
//alert('NOT checked');
updateStatus(0);
statusText1(0);
}
});
}
function updateStatus(status_val) {
$.ajax({
type: "POST",
url: "https://api.srv3r.com/toggle/",
data: {toggle_update: true, status: status_val},
success: function (result) {
console.log(result);
}
});
}
$(document).ready(function () {
putStatus();//Set button to current status
onToggle();//Update when toggled
statusText1();//Last updated text
}); |
Et le second Code JavaScript des ids customSwitch2 et statusText2:
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
| function putStatus() {
$.ajax({
type: "GET",
url: "https://api.srv3r.com/toggle/",
data: {toggle_select: true},
success: function (result) {
if (result == 1) {
$('#customSwitch2').prop('checked', true);
statusText2(1);
} else {
$('#customSwitch2').prop('checked', false);
statusText2(0);
}
}
});
}
function statusText2(status_val) {
if (status_val == 1) {
var status_str = "On";
} else {
var status_str = "Off";
}
document.getElementById("statusText2").innerText = status_str;
}
function onToggle() {
$('#toggleForm :checkbox').change(function () {
if (this.checked) {
//alert('checked');
updateStatus(1);
statusText2(1);
} else {
//alert('NOT checked');
updateStatus(0);
statusText2(0);
}
});
}
function updateStatus(status_val) {
$.ajax({
type: "POST",
url: "https://api.srv3r.com/toggle/",
data: {toggle_update: true, status: status_val},
success: function (result) {
console.log(result);
}
});
}
$(document).ready(function () {
putStatus();//Set button to current status
onToggle();//Update when toggled
statusText2();//Last updated text
}); |
Le problème c'est que quand je clique sur le bouton Checkbox, au niveau de la page HTML, je devais en principe avoir un effet toggle qui change de on à off à chaque clique.
Mais le souci est que les statusText1 et statusText2 réprésentant les textes on et off demeurent statiques au lieu de changer à chaque fois qu'on clique sur le bouton checkbox.
Aidez-moi donc à corriger mon Code JavaScript ci-dessus de sorte à réussir le changer de texte de on à off à chaque fois que je clique.
Aussi existe t-il un moyen pour synchroniser l'utilisation du Bouton Checkbox d'Activation et de Désactivation des différents Ids au lieu de les faire séparément dans deux différents code qui sont qu'en même presque qu'indentique ??? Si oui, comment procéder ???
Merci d'avance.
