Bonjour à tous,

un de mes amis m'a fourni un script HTML/CSS/Javascript permettant aux utilisateurs d'écrire des SMS et Mails.

Ce qu'il me demande de réaliser est d'améliorer la fonctionnalité du click sur les différents span(Entreprise, Ville, Titre...). Par exemple, soit cliquer sur "Entreprise" , il s'insère dans la zone de saisie à gauche(ça c'est déjà fait), mais trouver un système plus simple et plus esthétique serait souhaitable, soit un système de drag & drop(objet). 

D'autre part, il aimerait un système de focus sur la souris, si par exemple "Entreprise" et "Titre" sont déjà présents dans la zone, et que lui souhaite rajouter "Ville" entre les deux, cela puisse se faire(là jusqu'à présent, les boutons s'ajoutent côte à côte).

Et enfin si l'utilisateur souhaite supprimer un bouton, soit il double-clique dessus, soit il utilise le raccourci clavier suppr.

J'espère avoir expliqué comme il se doit mon problème!

Pour ceux qui auraient des idées, ce serait génial! Merci d'avance

Code HTML:

     <div class="container mtb">
        <div class="row">
			<ul class="breadcrumb breadcrumb-light breadcrumb-divider-middot">
                <li>Créer ma campagne</li>
                <li>Importer des contacts</li>
				<li class="active">Rédiger mon message</li>
            </ul>
			<TMPL_IF NAME="PROFILE">
				<form role="form" action = "<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
				<TMPL_LOOP NAME="DATA">
				<input type="hidden" id='id'  name="id" value="<TMPL_VAR NAME=ID>"/>
				<TMPL_IF NAME="TEMPLATE">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">Message du SMS</div>
					<div class="panel-body">
            			<div class="col-lg-6">
			  				<div class="form-group">
<!--								<h4 for="template">Contenu</h4>
                		    	<textarea class="form-control" id="template" name="lg_template" rows="6" onkeyup="checkLength()"><TMPL_VAR NAME=TEMPLATE></textarea>
								<p id='message'>Longueur du SMS: 0/160</p>-->
                		  	</div>
						  	<input type="hidden" name="rm" value="saveTemplate"/>
							<div id="smsArea" class="form-control" contenteditable="true">
								<TMPL_VAR NAME=TEMPLATE>
							</div><br />
							<a href="#" class="btn btn-primary" onClick="saveMessage('sms');">Enregistrer</a>
							<a href="#" class="btn btn-primary" onClick="previewMessage('sms');" data-toggle="modal" data-target="#myModal2">Aperçu</a>
							<a href="#" class="btn btn-primary" onClick="testMessage('sms');" data-toggle="modal" data-target="#myModal">Calcul du coût des SMS</a>
							<br>
						</div>
						<div class="col-lg-6">
							<h4 for="template">Personnalisation</h4>
                            <span class="btn btn-default" onClick="editTag('sms','company')" id="smsCompany" title="Nom de votre entreprise">Entreprise</span>
            			    <span class="btn btn-default" onClick="editTag('sms','city')" id="smsCity" title="Ville de votre entreprise">Ville</span>
            			    <span class="btn btn-default" onClick="editTag('sms','title')" id="smsTitle" title="Titre du client (Mr, Mme...)">Titre</span>
            			    <span class="btn btn-default" onClick="editTag('sms','firstname')" id="smsFirstname" title="Prénom du client">Pr&eacutenom</span>
            			    <span class="btn btn-default" onClick="editTag('sms','lastname')" id="smsLastname" title="Nom du client">Nom</span>
							<span class="btn btn-default" onClick="editTag('sms','link')" id="smsLink" title="lien de votre page web, modèle ou questionnaire">Lien</span>
						</div>
					</div>
				</div>
				<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">

                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Aperçu</h4>
                      </div>
                      <div class="modal-body" id="preview">
                      	Génération en cours...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                      </div>

                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
				<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            	  <div class="modal-dialog">
            	    <div class="modal-content">

            	      <div class="modal-header">
            	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            	        <h4 class="modal-title" id="myModalLabel">Coût de la campagne</h4>
            	      </div>
            	      <div class="modal-body">
            	        <p id='costTest'>Calcul en cours ...</p>
            	      </div>
            	      <div class="modal-footer">
            	        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            	      </div>

            	    </div><!-- /.modal-content -->
            	  </div><!-- /.modal-dialog -->
            	</div><!-- /.modal -->

				</TMPL_IF>
				<TMPL_IF NAME="MAILSUBJECT">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">Message Email</div>
					<div class="panel-body">
						<div class="col-lg-6">
            		        <div class="form-group">
								<label>Type</label><br />
								<input type= "radio" name="mail_type" value="text" checked> Texte
            		    		<br />
								<label>Objet</label><br />
								<input type="text" class="form-control" id="mail_subject" name="mail_subject" value="<TMPL_VAR NAME=MAILSUBJECT>" style="width:50%">
								<label>Corps</label><br />
								<div id="mailArea" class="form-control" contenteditable="true">
									<TMPL_VAR NAME=MAILBODY>
								</div><br />
                            	<a href="#" class="btn btn-primary" onClick="previewMessage('mail');" data-toggle="modal" data-target="#myModalMail">Aperçu</a>
								<a href="#" class="btn btn-primary" onClick="saveMessage('mail');">Enregistrer</a>
            		    	</div>
						</div>	
						<div class="col-lg-6">
							<h4 for="template">Personnalisation</h4>
                            <span class="btn btn-default" onClick="editTag('mail','company')" id="mailCompany" title="Nom de votre entreprise">Entreprise</span>
            			    <span class="btn btn-default" onClick="editTag('mail','city')" id="mailCity" title="Ville de votre entreprise">Ville</span>
            			    <span class="btn btn-default" onClick="editTag('mail','title')" id="mailTitle" title="Titre du client (Mr, Mme...)">Titre</span>
            			    <span class="btn btn-default" onClick="editTag('mail','firstname')" id="mailFirstname" title="Prénom du client">Pr&eacutenom</span>
            			    <span class="btn btn-default" onClick="editTag('mail','lastname')" id="mailLastname" title="Nom du client">Nom</span>
							<span class="btn btn-default" onClick="editTag('mail','link')" id="mailLink" title="lien de votre page web, modèle ou questionnaire">Lien</span>
						</div>
					</div>
				</div>
				 </div>
				</TMPL_IF>
				</TMPL_LOOP>
				<div id="myModalMail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            	  <div class="modal-dialog">
            	    <div class="modal-content">

            	      <div class="modal-header">
            	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            	        <h4 class="modal-title" id="myModalLabel">Aperçu de l'email</h4>
            	      </div>
            	      <div class="modal-body">
            	        <p id='mailPreview'>Génération en cours...</p>
            	      </div>
            	      <div class="modal-footer">
            	        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            	      </div>

            	    </div><!-- /.modal-content -->
            	  </div><!-- /.modal-dialog -->
            	</div><!-- /.modal -->
				<br />
				<br />
				<a class="btn btn-primary" href="<TMPL_VAR NAME=MYURL>?rm=design&id=<TMPL_VAR NAME=PID>">Suivant</a>
				<br />
			<TMPL_ELSE>
			<div class="col-lg-4">
				<TMPL_IF NAME="BADLOGINS">
					Mauvais utilisateur ou mot de passe. <TMPL_VAR NAME=BADLOGINS> tentatives.<br/>
				</TMPL_IF>
                <form role="form" action = "<TMPL_VAR NAME=MYURL>" method="POST" enctype="application/x-www-form-urlencoded">
                  <div class="form-group">
                    <label for="username">Nom d'utilisateur</label>
                    <input type="text" class="form-control" id="username" name="lg_nick">
                  </div>
                  <div class="form-group">
                    <label for="password">Mot de passe</label>
                    <input type="password" class="form-control" id="password" name="lg_pass">
                  </div>
                  <input type="submit" class="btn btn-theme" value="Se connecter" />
                </form>
            </div><! --/col-lg-8 -->
			</TMPL_IF>
        </div><! --/row -->
     </div><! --/container -->
	</div>
<link href='assets/css/dragula.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 Code JS:

var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");

var myTags = new Object();

myTags['company']	= '#ENTREPRISE#';
myTags['city']		= '#VILLE#';
myTags['link']		= '#LIEN#';
myTags['firstname']	= '#PRENOM#';
myTags['lastname']	= '#NOM#';
myTags['title']		= '#TITRE#';

//$(document).ready(function() {
//	checkLength();
//});

$(document).ready(function() {
	var smsDiv = document.getElementById('smsArea');
	document.getElementById('smsArea').focus();
	if(smsDiv && smsDiv.innerHTML.match(/smsMessage/))
	{
		smsDiv.innerHTML = '';
	}

	var mailDiv = document.getElementById('mailArea');
	document.getElementById('mailArea').focus();
	if(mailDiv && mailDiv.innerHTML.match(/mailMessage/))
	{
		mailDiv.innerHTML = ''
	}

	var mailSub = document.getElementById('mail_subject');
	if(mailSub && mailSub.innerHTML.match(/changeSubject/))
	{
		mailSub.value = '';
	}
	
});

var checkLength = function()
{
	if(re.test(area.value))
	{
		maxLength = 70;
	}
	else
	{
		maxLength = 160;
	}

    if(area.value.length <= maxLength) {
        message.innerHTML = "Longueur du SMS: " + (area.value.length) + "/" + maxLength;
    }
	else
	{
		message.innerHTML = "Longueur du SMS: " + (area.value.length) + "/" + maxLength + "(Coûte "+ Math.ceil(area.value.length / maxLength)+" SMS)";
	}

}

function editTag(zoneId,tag)
{
	var zoneDiv 	= document.getElementById(zoneId + 'Area');
	var myButton 	= document.getElementById(zoneId + tag.ucfirst());
	var myLabel 	= document.createElement('span');

	var labels 		= zoneDiv.getElementsByTagName('span');
	var spanSize	= labels.length;

	var delflag  = 0;
	var delIndex = 0;

	if(spanSize != 0)
	{

		for (myLabId = 0; myLabId < spanSize; myLabId++)
		{
			var currentLabel = labels[myLabId];
			if(currentLabel.innerHTML === myButton.innerHTML)
			{
				delflag = 1;
				delIndex = myLabId;
			}
		}
	}

	if(delflag == 1)
    {
        zoneDiv.removeChild(labels[delIndex]);
    }
	else
	{
		myLabel.setAttribute('class', 'label label-info');
		myLabel.setAttribute('data-effect', 'pop');
		myLabel.setAttribute('contentEditable', 'false');
		myLabel.setAttribute('style','cursor:move;font-size:100%;');
		myLabel.setAttribute('name', tag);
		myLabel.innerHTML = myButton.innerHTML;

		zoneDiv.appendChild(myLabel);
	}

	//Clean breaklines;
	var bks 	= zoneDiv.getElementsByTagName('br');
	var brSize 	= bks.length;
	
	if(brSize != 0)
	{
		zoneDiv.removeChild(bks[0]);
	}

	//Event keyboard on deleted elements
	$("span").dblclick(function()
	{
		myLabel.remove(labels[delIndex]);
	});
}

function saveMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'saveMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('mail_subject');
		
		myData = {
    	    'rm':'saveMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : messageContent,
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		window.alert(data);
    });
}

String.prototype.ucfirst = function()
{
    return this.charAt(0).toUpperCase() + this.substr(1);
}

function previewMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	var previewDiv = document.getElementById("preview"); 
	var mailPreview = document.getElementById('mailPreview');

	if(zoneId === 'sms')
	{
		previewDiv.setAttribute('style','');
		previewDiv.innerHTML = '<p>Génération en cours ...</p>';
	}
	else if(zoneId === 'mail')
	{
    	mailPreview.innerHTML = 'Génération en cours...';
	}

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'previewMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('mail_subject');
		
		myData = {
    	    'rm':'previewMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : messageContent,
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		if(zoneId === 'sms')
    	{
			previewDiv.innerHTML = '';
			previewDiv.setAttribute('class',"preview");
			previewDiv.setAttribute('style', 'background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;');

			var myText = document.createElement('p');
			myText.setAttribute('class', 'smstext');
			myText.innerHTML = data;
			previewDiv.appendChild(myText);
		}
		else
		{
			mailPreview.innerHTML = data;
		}
    });
}

function testMessage(zoneId)
{
	var costTestP = document.getElementById('costTest');
    costTestP.innerHTML = 'Calcul en cours ...';

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	myRegexp = /\n/;
    messageContent.replace(myRegexp, '');

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'testsms',
        'message' : messageContent,
		'id' : idInput.getAttribute('value')
    };

    $.post("index.pl",myData).done(function(data){
		var costTestP = document.getElementById('costTest');
		costTestP.innerHTML = data;
    });
}

function commande(nom, argument) {
	if (typeof argument == 'undefined') {
		argument = '';
	}
	switch(nom) {
		case "createLink":
			argument = prompt("Quelle est l'adresse du lien ? ");
			break;
		case "insertImage":
			argument = prompt("Quel est l'adresse de l'image ? ");
			break;
	}
	//Exécuter la commande
	document.execCommand(nom, false, argument);
}

function taille(sens,el,pas,unite) { // sens == "+" || "-";
	if(typeof el == "string") 
	{
		el = document.getElementById('mailArea');
	}
	pas = pas || 1;
  	unite = unite || "pt";
	if(sens == "+") {
		el.style.fontSize = (parseInt(el.style.fontSize,10)+pas)+unite;
	} 
	else if(sens == "-") 
	{
	    el.style.fontSize = (parseInt(el.style.fontSize,10)-pas)+unite;
	}
}

Code CSS:

#smsArea{
	    -moz-appearance: textfield-multiline;
	    -webkit-appearance: textarea;
	    height: 150px;
	    overflow: auto;
	    padding: 5px;
	    resize: both;
	    width: 100%;
	}

	.smstext{
/*		margin-top: 100px;*/
		margin-left: 60px;
		margin-right: 20px;
		padding-top: 30px;
		font-family: verdana, sans-serif;
	}

	#mailArea{
	    -moz-appearance: textfield-multiline;
	    -webkit-appearance: textarea;
	    height: 200px;
	    overflow: auto;
	    padding: 5px;
	    resize: both;
	    width: 100%;
	}

	.mailtext{
/*      margin-top: 100px;*/
        margin-left: 60px;
        margin-right: 20px;
        padding-top: 30px;
        font-family: verdana, sans-serif;
    }
/*	.preview{
/        -moz-appearance: textfield-multiline;
/        -webkit-appearance: textarea;
/        height: 150px;
/        overflow: auto;
/        padding: 5px;
/        resize: both;
/        width: 100%;
/		margin-top:20px;
/    }*/
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

-
Edité par Maestro974 19 décembre 2017 à 11:51:56

Up??

Up?

Bonjour, je pense que si personne ne répond à ton sujet c'est car ta demande n'est pas assez spécifique en fait, peut être à tu déjà tester une amélioration de ton côté, peu-être voudrait tu un avis dessus, mais la à part te dire de rechercher sur google 'comment faire un drag and drop' je voit pas trop quoi dire de plus.

En fait pour une fois il y à trop d'informations

Bonjour à toi CodecadeMe !

merci déjà pour ta réponse

De mon côté, je n'ai pas vraiment testé d'amélioration car je suis un peu perdu, je ne vois pas vraiment comment améliorer les différentes fonctionnalités :/

Au niveau du drag & drop, j'ai déjà  réalisé cette fonctionnalité, mais que je n'ai pas adapté à celui-ci. Pk? C'était pour voir les différents avis que des personnes auraient pu me conseiller de tester.

A vrai dire, c'est possible qu'il y ait trop d'informations comme tu le dis x) Mais j'ai surtout poster tout le code pour que vous puissiez comprendre le principe du template!

Edit: j'ai pu avancer un peu sur la modification, seulement ce que je n'arrive pas à réaliser, c le focus de la souris au moment de rajouter les différents tags("Entreprise", "Titre"...), en gros faire en sorte que la div soit personnalisable pour l'utilisateur. S'il souhaite ajouter le nom d'une entreprise en haut à gauche, et un titre en bas à droite, que ce soit possible.Quelqu'un aurait des idées la dessus svp?

Merci d'avance!

-
Edité par Maestro974 18 décembre 2017 à 13:11:04

Tu cherche simplement à appliquer un focus en Javascript si je comprend bien ? C'est tous ?

Si j'ai bien compris, ça devrais t'aider pour supprimer les bouton 

https://www.w3schools.com/css/css_display_visibility.asp

Bonjour,

Oui, en effet j'aimerais effectuer un focus dans la div pour que l'utilisateur puisse ajouter les tags où il le souhaite!

CodecadeMe a écrit:

Tu cherche simplement à appliquer un focus en Javascript si je comprend bien ? C'est tous ?

Merci RomainFds, je vais regarder ton lien !

RomainFds. a écrit:

Si j'ai bien compris, ça devrais t'aider pour supprimer les bouton 

https://www.w3schools.com/css/css_display_visibility.asp

https://openclassrooms.com/forum/sujet/donner-le-focus-a-un-champ-input-38848

CodecadeMe a écrit:

https://openclassrooms.com/forum/sujet/donner-le-focus-a-un-champ-input-38848

Merci à toi! J'ai modifié mon JS et ajouter 2 lignes de code à la ligne 21 et 28. Seulement est-ce que cette méthode suffit pour que l'utilisateur puisse ajouter où il veut les différents tags?  J'ai testé et ça m'a pas l'air de fonctionner comme il faut :/

Tu aurais un petit exemple de ta page (visuel je veux dire) qu'on comprenne un peu mieux ;p

Ahah oui bien sur x)

 https://jsfiddle.net/58seewf4/1/

Par contre c bizarre, en postant le code sur jsfiddle, mon JS ne fonctionne pas :/

-
Edité par Maestro974 19 décembre 2017 à 13:30:29

Bonjour,

j'ai rajouté dans mon html un <input type="radio" à la ligne 88, et j'aimerais savoir comment je pourrais faire pour que si je clique sur le bouton Web, une zone de <textarea> apparaisse svp? c un genre de switch entre les 2 boutons pour afficher soit la div soit la textarea non?  Il faut certainement utiliser un onchange pour réaliser ça, mais je vois pas comment :/

https://jsfiddle.net/58seewf4/2/

D'autre part, le focus je n'y arrive pas à avoir ce que je veux non plus

Merci d'avance!

-
Edité par Maestro974 21 décembre 2017 à 6:46:10

Ouh lala ! 

Tu est sur de comprendre ce que tu fait ?

<input type= "radio" name="mail_type" value="text" checked> Texte
<input type="radio" name="web_mail" value="web"> Web 

Ici tu voudrait que l'on puisse choisir entre le type text et le type web

Seulement tu ne donne pas le même nom aux deux, ce que fait qu'on peux sélectionner l'un et l'autre...

Comme ca ce serait peut être plus proche de ce que tu recherche ?

<input type= "radio" name="mail_type" value="text" checked> Texte
<input type="radio" name="mail_type" value="web"> Web 

Jéjé974 a écrit:

j'ai rajouté dans mon html un <input type="radio" à la ligne 88, et j'aimerais savoir comment je pourrais faire pour que si je clique sur le bouton Web, une zone de <textarea> apparaisse svp? c un genre de switch entre les 2 boutons pour afficher soit la div soit la textarea non?  Il faut certainement utiliser un onchange pour réaliser ça, mais je vois pas comment :/

Est-ce que tu à essayer de faire quelque chose ? Un petit bout de code même s'il ne fonctionne pas ? Tu t'es un peu documenté ?

Voici un sujet qui obtient un résultat proche de celui que tu recherche comme ca tu n'à pas la solution toute faite mais en gros c'est quelque chose comme ca :

https://openclassrooms.com/forum/sujet/description-image?page=1#message-92138274

-
Edité par CodecadeMe 21 décembre 2017 à 10:10:26

Slt, merci de ta réponse !

alors, oui j'ai essayé quelque chose qui fonctionne, mais pas de la plus belle des façons XD

Après j'ai essayé de faire des recherches sur le net, mais je voyais pas comment formuler mon problème :/

 https://jsfiddle.net/t44aqpw0/

-
Edité par Maestro974 21 décembre 2017 à 12:22:42

Jéjé974 a écrit:

Slt, merci de ta réponse !

alors, oui j'ai essayé quelque chose qui fonctionne, mais pas de la plus belle des façons XD

Après j'ai essayé de faire des recherches sur le net, mais je voyais pas comment formuler mon problème :/

 https://jsfiddle.net/t44aqpw0/

-
Edité par Jéjé974 il y a 43 minutes

Mon dieux ! 

Non je voit ce que tu veux faire mais ce n'est pas maintenable ce genre de code

Je te conseille plutôt de faire quelque chose comme cela (j'ai fait avec les boutons radio mais rien ne t'empêche de le faire avec une liste )

https://jsfiddle.net/t44aqpw0/3/

Fait bien attention j'ai inclu les cdn dans les external ressources

-
Edité par CodecadeMe 21 décembre 2017 à 13:27:32

Ahah oui je sais, ça fait mal aux yeux mon code, je le reconnais

Comment à partir de ton code fourni, afficher dès le chargement de la page(en gros par défaut) un <textarea> sur le <input> Texte stp? Et ensuite jongler entre les 2 input afin d'afficher ce qui est souhaité?

Merci en tout cas pour ton aide!

-
Edité par Maestro974 21 décembre 2017 à 13:44:07

<div id="choiceMail">
		<input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('input_type_text','input_type_')" checked > Texte
    <input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('input_type_web','input_type_')"> Web
		<div id="input_type_text" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
     Ceci est mon text area pour le format texte
    </div>
    	<div id="input_type_web" style="display:none">
     Ceci est mon text area pour le format Web
    </div>
</div>


<script>
function refresh(displayedId,refreshedId){
    $("div[id^='"+refreshedId+"']").hide();
    $("#"+displayedId).show();
}
</script>

Tu peux faire quelque chose comme ca (si c'est bien ce que tu essaie de faire)

-
Edité par CodecadeMe 21 décembre 2017 à 13:47:55

https://jsfiddle.net/t44aqpw0/7/

J'ai apporté les modifications en fonction de ton code, ce que moi je souhaitais avoir comme résultat, mais je sais pas pourquoi, ça ne fonctionne pas :/

J'ai fait exprès de mettre une div plus grande que l'autre pour voir si onchange fonctionnait bien mais apparemment non

-
Edité par Maestro974 21 décembre 2017 à 14:14:16

Forcément, tu n'inclus pas la bibliothéque jquery (il suffit d'inspecter l'élément et de regarder les erreurs dans la console)

Essaie de plutôt poster ton code ici s'il te plaît, ca pourra aider d'autre personne qui aurait le même problème que toi.

Je remarque que tu ne fait pas beaucoup d'effort pour chercher par toi même, tu devrait d'abord essayer de comprendre ce que je t'envoie avant de vouloir t'empresser de le tester et de le modifier 

De plus tu à modifier ca

 <div id="input_type_text" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
     Ceci est mon text area pour le format texte
    </div>
        <div id="input_type_web" style="display:none">
     Ceci est mon text area pour le format Web
    </div>

En le remplacant par ca

<div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
        
</div>
<div id="mailwebArea" style="display: none">
        
</div>

Mais tu n'à pas changer les arguments de la fonction onchange

   <input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('mailArea','input_type_')" checked style="margin-left: 25px"> Texte
    <input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('mailwebArea','input_type_')"> Web

Forcément ca ne peux plus fonctionner

-
Edité par CodecadeMe 21 décembre 2017 à 14:31:58

Ah oui autant pour moi pour le jquery x)

Ah bizarre, j'avais bien effectué les changements dans la fonction refresh au niveau des paramètres pourtant

-
Edité par Maestro974 21 décembre 2017 à 14:42:18

...

$("div[id^='"+refreshedId+"']").hide();

Tu veux aller beaucoup trop vite et tu ne lis pas

    <input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('mailArea','input_type_')" checked style="margin-left: 25px"> Texte
    <input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('mailwebArea','input_type_')"> Web
        <div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
        a
    </div>
        <div id="mailwebArea" style="display: none">
        b
    </div>

Tu à choisit de renommer tes id mailArea et mailWebArea, d'accord dans ce cas soit tu doit changer ma fonction, soit tu doit changer les paramètres de celle-ci, dans ce cas les paramètres seront :

  <input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('mailArea','mail')" checked style="margin-left: 25px"> Texte
    <input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('mailwebArea','mail')"> Web
     <div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
        a
    </div>
    <div id="mailwebArea" style="display: none">
        b
    </div>

Sait tu seulement ce que veux dire ce code ?

$("div[id^='"+refreshedId+"']").hide();

Sinon pourquoi ne pas faire de recherches ? Je peux tout à fait comprendre que tu n'ai pas encore appris à utiliser la librairie jQuery mais rien ne t'empêche de te renseigner

Bonjour, oui possible que je cherche à aller trop vite 

CodecadeMe a écrit:

Sait tu seulement ce que veux dire ce code ?

$("div[id^='"+refreshedId+"']").hide();

Non pas exactement, hide() permet de cacher l'élément matché, certainement les div non?

Bonjour,

Ce n'est pas grave de ne pas savoir 

La libraire Jquery n'est pas trop complexe à comprendre, j'imagine que lorsque tu auras bien consolidé tes bases en js tu t'y attaquera alors .

Jéjé974 a écrit:

$("div[id^='"+refreshedId+"']").hide();

Non pas exactement, hide() permet de cacher l'élément matché, certainement les div non?

Pour le moment tu doit simplement savoir que ce qui se trouve dans la fonction $() c'est un sélecteur jquery

(la fonction $() est un raccourcis pour dire jQuery(), c'est la même chose)

Donc la je vais lui dire : "sélectionne tous les éléments de type 'div' dont l'id commence par refreshId (la valeur du param refreshId) et une fois ceux-ci sélectionner, applique leurs l'attribut de style display:none (ce que fait la fonction hide())

-
Edité par CodecadeMe 22 décembre 2017 à 11:28:20

Ahah c sur bien dit, j'ai que 2 ans de programmation, je peux pas tout savoir d'un coup

Ah très bien, je comprends un peu mieux maintenant x) je vais dès ce week-end consolider mes bases en JS

Merci beaucoup pour ton temps CodecadeMe! 

Bonne journée à toi!

Au plaisir 

Et joyeux noël 

(pense à mettre le sujet en résolu stp )

-
Edité par CodecadeMe 22 décembre 2017 à 16:27:22