Afficher les textes ON ou OFF à chaque clic du checkbox

**cheboy** · 07/02/2022, 04h43

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Toufik83** · 07/02/2022, 12h35

Bonjour,

En tapant l'url "https://api.srv3r.com/toggle/?toggle_select=true" (soit avec true ou false), directement dans la barre d'adresse du navigateur, le résultat est toujours "0".

Tu peux voir ce retour dans la console si tu utilises un console.log dans le callback success :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
success: function (result) {
console.log("résultat est :",result);
....
}

Envoyé par cheboy

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 ???

Oui, tu peux les mettre tous les deux dans un seul sélecteur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(".toggleForm :checkbox").on("change",function(){
if($(this).attr('id')=="customSwitch1"){....}
else if($(this).attr('id')=="customSwitch2"){....}
});

Et attention, le sélecteur #toggleForm :checkbox n'est pas correcte, puisque tu n'a aucun élément ayant id="toggleForm", mais plutôt ayant la classe .toggleForm

**cheboy** · 07/02/2022, 19h28

Merci pour la réponse. J'ai pu gérer avec ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function putStatus(target) {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $(target).prop('checked', true);
            } else {
                $(target).prop('checked', false);
            }
        }
    });
}
 
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('#customSwitch1');
    // putStatus('#customSwitch2');
 
    $('.statuses').change(function () {
        if($(this).is(':checked')){
            updateStatus(1);
            $(this).next().text('On');
        }else{
            updateStatus(0);
            $(this).next().text('Off');
        }
    });
});

Merci encore.

Afficher les textes ON ou OFF à chaque clic du checkbox

jQuery

Vue hybride

Discussions similaires

Partager

Partager