Interpréter du HTML dans du JS

Fermé

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 - 20 janv. 2019 à 10:40
chopa - 21 janv. 2019 à 01:29

Bonjour,

Je souhaiterais avoir un bouton input de type submit qui change quand on appuie dessus.
Lorsque qu'on appuie, j'aimerai afficher "Chargement en cours" avec une balise

<i class=\"fa fa-refresh fa-spin\"></i>

Voici mon code JS pour faire le changement au clique :


<input class="btn_connect" type="submit" value="Scanner" />
<script>
	$(".btn_connect").click(function () {
	var text = '<i class="fa fa-refresh fa-spin"></i> Chargement en cours';
	$(this).val(text);
	});
</script>

Quand je clique sur le bouton, le changement s'effectue mais l’icône apparaît "codée en HTML" et non en tant qu'image... le JS n'interprète pas le code..

Comment faire ?

Je vous remercie.

A voir également:

Interpréter du HTML dans du JS
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Br html ✓ - Forum Webmastering
Image cliquable html ✓ - Forum Réseaux sociaux
&Lt;br> ou ou ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

chopa
Modifié le 20 janv. 2019 à 11:18

Bonjour, je ne voit pas d'image mais un changement de classe CSS.
Un input, à fortiori type=submit est lié à un formulaire et provoque l'envoi des valeurs qui y sont comprises(en GET ou POST) donc le rechargement de la page. Pour éviter ça un simple bouton suffit surtout si vous n'avez aucune valeur à envoyer par le formulaire(saisie, choix multiple, case à cocher...).
Sans oublier d'indiquer si c'est au sein d'un formulaire que celui ci est de type button(il sera de type submit par défaut sinon).

Ceci étant dit vous pouvez changer directement avec la notation pointée(objet) les attributs d'un élément, pour l'attribut class avec className comme ceci:

monElementHTML.className='nouvelle valeur';
//-- ou même en rajouter comme ceci por des classes multiples qui sont des chaînes de caractères:
monElementHTML.className+=' ajoute une classe';//-- sans oublie l'espace devant si c'est nécessaire

Attention aussi car le mot 'text' est réservé et peut provoquer des erreurs!
Vous pouvez écrire texte (en français c'est pas un mot clé ;) ) ou encore mieux donner un nom explicite à vos variables. D'ailleurs vous changez la valeur d'un input et non son texte, donc normal que ça ne vous affiche pas ce que vous mettez vous ne faites qu'attribuer une valeur(attribut value surtout utile pour les autres input). Il vous faut l'équivalent JQuery de .innerHTML qui est .html ou alors .text selon.

chopa
Modifié le 20 janv. 2019 à 11:24

return $(this).html(' Chargement en cours');
//-- encore mieux car sans variable inutile et on peut contrôler ou chaîner avec la valeur retournée.
/** ou alors car vous essayez d'insérer une balise dans la valeur d'un texte qui est du texte et nom du HTML(le contenu texte d'un bouton ou sa valeur et aucun ne peut le faire)*/
$(this).parent.append($('span').html('<i>Vous avez cliqué</i>')).text('Chargement en cours');
//-- à tester quand même si je me trompe pas dans le chaînage

à noter que pour simplement mettre le texte en italique le mieux est de passer par CSS, chaîner par exemple avec .css('font-style:italic;');
'' n'est pas l'équivalent d'une mise en page italique mais de quelque chose mis en évidence ou alternatif comme indiqué ici:
https://www.w3schools.com/tags/tag_i.asp

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 3
20 janv. 2019 à 13:53

Merci pour votre réponse très complète.

Mon input est bien issu d'un formulaire qui est a remplir et envoyer en POST.
La page est longue à charger une boucle est utilisé pour renseigner une base de données et générer des adresses IP.
Je souhaiterais juste que lorsque l'on clique sur le bouton submit, la "value" change un mettant un favicon puis "Chargement en cours".
Ici la balise avec la class "fa fa-refresh fa-spin" me permet d'ajouter un favicon qui tourne pour imiter un chargement.

J'ai essayé vos solutions mais elles ne conviennent pas..

chopa
Modifié le 21 janv. 2019 à 01:34

"me permet d'ajouter un favicon qui tourne pour imiter un chargement. "
Plutôt une barre de progression(ou pas en barre ni en rapport avec la progression mais un truc qui affiche de patienter), cela s'appelle une ou plusieurs images(dans le cas d'une animation ex. gif/png animé) et non un favicon qui est le petit icône dans l'onglet. Un truc esthétique et pas fonctionnel car l'utilisateur regarde dans la page et va pas se casser la tête à chercher le coin gauche de l'écran pour voir un truc minuscule qui lui indique quelque chose qui doit être en évidence.

Bref si votre message est patientez pendant l'envoi des résultats du formulaire le formulaire et le bouton submit n'ont rien à faire dans la page à part gêner. Affichez le en gros dans quelque chose dédié à cet affichage et non un bouton d'envoi qui est destiné à valider un formulaire(qui est déjà validé).

Je me répète je sait mais c'est pour essayer d'être clair sur le fait que vous n'avez pas la bonne logique dans votre travail. Utiliser les outils/balises pour le but qui leur est destiné c'est le b+a = ba pour faire une page web...C'est souple comme outil et on peut faire pas mal de trucs, ça veut pas dire que c'est utile ou efficace pour autant, bien au contraire... Vous voulez afficher un texte utiliser une balise qui sert à ça. Vous voulez un bouton de validation il sert à valider. Le reste c'est couper les cheveux en 4.

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

&nbsp ; Quelle Fonction ?

Espace en HTML

Afficher la date du jour en html

Discussions similaires

Newsletters