Bonjour à tous, on me demande au travail de travailler sur Perl, Javascript afin de traiter des templates. J'ai crée une interface de drag & drop afin de permettre aux utilisateurs de glisser/déposer des éléments sous forme d'input. Cepednant, je n'arrive pas à récupérer ces valeurs insérées par les utilisateurs. :/
Pourriez-vous m'aider svp?
PS: Je suis débutant en Perl, je commence tout juste.
var counter = 0;
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the label element
document.getElementById("action").innerHTML = "Vous avez glissé votre élément !";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
save = event;
setTimeout(function() {
document.getElementById('action').innerHTML = ""; }, 2500);
});
// While dragging the label element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("action").style.color = "#CD5C5C";
});
// Output some text when finished dragging the label element and reset the opacity
document.addEventListener("dragend", function(event) {
if(event.target.className == "drop-target") {
document.getElementById("action").innerHTML = "Vous avez bien déposé votre élément !";
}
/* else if(event.target.className == "drop-target-Titre") {
document.getElementById("action").innerHTML = "Vous avez bien déposé votre titre !";
}
else if(event.target.className == "drop-target-Message") {
document.getElementById("action").innerHTML = "Vous avez bien déposé votre message !";
}
else if(event.target.className == "drop-target-Image") {
document.getElementById("action").innerHTML = "Vous avez bien déposé votre image !";
}
else if(event.target.className == "drop-target-Lien") {
document.getElementById("action").innerHTML = "Vous avez bien déposé votre lien !";
}*/
event.target.style.opacity = "1";
document.getElementById("action").style.color = "#CD5C5C";
setTimeout(function() {
document.getElementById('action').innerHTML = ""; }, 2500);
});
/* Events fired on the drop target */
// When the draggable label element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "drop-target") {
event.target.style.border = "3px dotted #483D8B";
}
else if(event.target.className == "drop-target-1") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
}
else if(event.target.className == "drop-target-2") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
}
else if(event.target.className == "drop-target-3") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
}
else if(event.target.className == "drop-target-4") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
}
else if(event.target.className == "drop-target-phone" && save.target.id == "numtel") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre n° de téléphone !";
}
else if (event.target.className == "drop-target-mail" && save.target.id == "mail") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre mail !";
}
else if(event.target.className == "drop-target-contact" && save.target.id == "contact") {
event.target.style.border = "3px dotted #483D8B";
document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre nom et prénom !";
}
setTimeout(function() {
document.getElementById('action').innerHTML = ""; }, 2500);
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable label element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if(event.target.className == "drop-target") {
event.target.style.border = "";
}
else if(event.target.className == "drop-target-1") {
event.target.style.border = "";
}
else if(event.target.className == "drop-target-2") {
event.target.style.border = "";
}
else if(event.target.className == "drop-target-3") {
event.target.style.border = "";
}
else if(event.target.className == "drop-target-4") {
event.target.style.border = "";
}
else if (event.target.className == "drop-target-phone") {
event.target.style.border = "";
}
else if (event.target.className == "drop-target-mail") {
event.target.style.border = "";
}
else if (event.target.className == "drop-target-contact") {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
/*document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "drop-target-Titre" ) {
document.getElementById("action").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
switch (data) {
case 'Titre':
$('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetitle"+ counter+"' ondblclick='supprimer(this,\"titre\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre titre :</span> <input type='text' name='TitreCli' style='margin-right: 25%; width: 250px; height: 30px; background-color: #F5F5DC'></input></div>");
break;
case 'Texte':
$('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetext"+ counter+"' ondblclick='supprimer(this,\"texte\")'> <span style='font-style: italic; margin-right: 15%; font-size: 16px;'>Votre message : </span> <textarea name='MessageCli' style='margin-right: 25%; max-height: 50px; max-width: 500px; background-color: #F5F5DC'></textarea></div>");
break;
case 'Image':
$('.drop-target').append("<div class='col-sm-12' droppable='false' id='deleteimage"+ counter+"' ondblclick='supprimer(this,\"image\")'> <span style='font-style: italic; margin-right: 24.5%; font-size: 16px'>Votre image : </span> <input type='text' name='ImageCli' style='margin-right: 25%; background-color: #F5F5DC'></input><div>");
break;
case 'Lien':
$('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletelink"+ counter+"' ondblclick='supprimer(this,\"lien\")'> <span style='font-style: italic; margin-right: 40%; font-size: 16px'> Votre lien : </span> <input type='text' name='LienCli' style='margin-left: -12%; margin-right: 20%; background-color: #F5F5DC'></input><div>");
break;
}
counter ++;
}
});*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if(event.target.className == "drop-target-1") {
$('.drop-target-1').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre " + save.target.id +" :</span> <input type='text' id='"+ save.target.id +"-1' style='margin-right: 25%; width: 250px; height: 40px; background-color: #F5F5DC'></input></div>");
}
else if(event.target.className == "drop-target-2") {
$('.drop-target-2').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre " + save.target.id +" :</span> <textarea id='"+ save.target.id+"-2' style='margin-top: -1%; margin-right: 25%; width: 250px; height: 40px; background-color: #F5F5DC'></textarea></div>");
}
else if(event.target.className == "drop-target-3") {
$('.drop-target-3').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre " + save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-3' style='margin-right: 25%; width: 250px; height: 40px; background-color: #F5F5DC'></input></div>");
}
else if(event.target.className == "drop-target-4") {
$('.drop-target-4').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"' ondblclick='deleteContents(this,\""+ save.target.id+"\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre "+ save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-4' style='margin-right: 25%; width: 250px; height: 40px; background-color: #F5F5DC'></input></div>");
}
else if (event.target.className == "drop-target-phone" && save.target.id == "numtel") {
$('.drop-target-phone').append("<div class='col-sm-4' droppable='false' id='telcli' ondblclick='deleteContents(this,\"téléphone\")' style='width: 175px; height: 80px;'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Téléphone :</span> <input type='text' id='telcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
}
else if (event.target.className == "drop-target-mail" && save.target.id == "mail") {
$('.drop-target-mail').append("<div class='col-sm-4' droppable='false' id='mailcli' ondblclick='deleteContents(this,\"mail\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Mail :</span> <input type='text' id='mailcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
}
else if (event.target.className == "drop-target-contact" && save.target.id == "contact") {
$('.drop-target-contact').append("<div class='col-sm-4' droppable='false' id='contactcli' ondblclick='deleteContents(this,\"contact\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Contact :</span> <input type='text' id='contactcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
};
event.target.style.border = "";
});
function deleteContents(nom, argument) {
$(nom).remove();
document.getElementById("action").innerHTML = "Vous avez bien supprimé votre " +argument+" !";
setTimeout(function() {
document.getElementById("action").innerHTML = ""; }, 2500);
};
/*function preview() {
var toPrint = document.getElementById('previewarea');
var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">');
popupWin.document.write('</html>');
popupWin.document.close();
}*/
function preview(url) {
/*
regex pour le téléphone /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/; */
var myData = {
'rm':'previewZone',
/*'Title': document.getElementById('titlecli').value,
'Message': document.getElementById('messagecli').value,
'Image': document.getElementById('imagecli').value,
'Link': document.getElementById('linkcli').value,*/
'Tel': document.getElementById('numtel').value,
'Mail': document.getElementById('mailcli').value,
'Contact': document.getElementById('contactcli').value
};
$.post(url,myData).done(function(data)
{
var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">');
popupWin.document.write('</html>');
popupWin.document.close();
});
}
Mon responsable me conseille d'abord de récupérer les valeurs en JS dans la fonction preview(), en utilisant le DOM getElementsByTagName() pour récupérer les valeurs insérées dans les <input>
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
