Bonjour à tous, j'ai une question qui va certainement vous sembler très bête mais je début alors ne m'en voulez pas svp :aie:
Alors voilà, j'ai un template.html.twig, dans ce template j'ai une balise
qui créer une fiche de non conformité lorsqu'on le submit. Cela fonctionnait très bien. Jusqu'à ce que je rajoute deux balises sur des endroits différents de ma page pour inserer un drag and drop comme voici:
Cependant depuis que je les ai ajoutés, impossible de subit mon formulaire depuis cet ajout. Cela reste sur la même page comme si je ne cliquais pas sur le bouton. Comment faire pour y remédier ? merci.
Le drag and drop fonctionne correctement ? Tu peux y glisser des fichiers sans problème ?
Bizzare que ton bouton ne fonctionne pas, peux-tu nous le montrer ?
Sinon, as-tu vérifier qu'il n'y ai pas truc dans le script que tu as prit qui bloquerait la soumission de ce dernier ? Un preventDefault truc comme ça ?
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Je peux y glisser une photo sans problème, mais lorsque je passe la souri sur la photo ça me met un message d'erreur enorme que je ne comprends pas comment enlever, il me dit que la route n'est pas trouvée pour mon controller... (voici le début) :
comment ça montrer le bouton ? c'est un bouton type="submit"
- Edité par débutanteEnCodageSiteWeb 22 janvier 2020 à 12:52:30
On sait jamais car si tu met pas submit au niveau tu type ça ne soumet pas comme tu dis. Pourtant là ce n'est pas la soumission le problème mais au niveau du route je présume. Ce n'est pas un message d'erreur comme tu peux le remarquer, c'est du code HTML, sauf au niveau de :
No route found for POST controller.php ...
Donc j'en conclus que ton sujet doit être dans le forum PHP
A part ça il faut vérifier ton routes.yaml, qu'il contienne bien les chemins nécessaires.
Et puisque tu ne spécifie pas de méthode http dans ton formulaire, je présume que le problème vient de ton controller.php
- Edité par Mehddii 22 janvier 2020 à 13:25:06
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Merci pour ta réponse ! en effet j'ai changé et mis la route qui renvoyait à mon controller et je n'ai plus le message HTML. Cependant cela ne marche toujours pas lorque je clique sur le bouton submit pour envoyer le formulaire POST qui permet de créer la fiche et dans lequel se trouve les formulaires de drag and drop...
J'ai essayé de regarder le code de inspecter l'element pour le bouton submit mais je ne vois pas quoi chercher qui montrerait pourquoi cela ne s'envoie pas la dedans
- Edité par débutanteEnCodageSiteWeb 22 janvier 2020 à 15:02:09
Personnellement j'opterais pour le script javascript qui empêche la soumission du formulaire, si tu l’enlèves, ça marche ? Car tu dis que tout fonctionnait bien avant de les mettre
Par ailleurs, ton action est correct ? Ne devrais-tu pas plutôt utiliser un {{path()}} ?
- Edité par Mehddii 22 janvier 2020 à 15:38:07
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
en effet, j'ai changé le action avec le path et il n'y a plus le message. Cependant le bouton ne marche toujours pas... Je ne peux pas désactiver le form, celui-ci permet de faire l'action dès qu'un photo est ajoutée à la dropzone. Sans le form je ne peux pas réucperer les photos mises...
Je te demande seulement de faire des tests, il va bien falloir tester pour trouver ou est l'erreur !
Le même formulaire, tu le modifies à ce que tu n'utilises plus le script que tu utilises pour le drag and drop, et pourquoi pas faire un test avec un echo sur la même page, histoire de voir si le problème vient du script
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
et là la dropzone permet de mettre des photos dedans mais celle ci fait la taille du form ce qui n'est pas ce que je veux.... Voila voila si quelqu'un peut m'aider.... Merci beacoup !
Mehddii , e suis désolée si vous avez eu l'impression que j'abandonnais ce sujet ce n'était pas mon intention, j'essayais juste de voir si je pouvais trouver une approche différente, j'ai essayé quelque tests mais rien de concluant... je ne vois pas bien quoi test, ni comment desacticer un form comme vous l'avez proposé, je ne connais pas grand chose à js.
J'avais simplement demander d'enlever le script que tu utilises pour voir si le bouton n'est pas bloqué par un code se trouvant dans ce script. Enlever la balise <script> quoi .. et voir si le bouton fonctionne à nouveau.
Car tu avais dit que le problème était survenu lors de l'ajout du script sur ta page.
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Cependant lorsque j'utilise, j'ai le problème évoqué au dessus: la dropzone fait la taille du form... Hors j'aimerai que celle-ci ne prenne qu'une partie du form, je ne sais pas si je suis très claire...
Encore merci pour votre aide !
Le problème du bouton vient, je pense, du fait que j'avais mis les balises form de ma dropzone dans ma balise form methode="POST" qui permettait de soumettre le formulaire. C'est pourquoi maintenant j'essaye de n'utiliser qu'une balise form pour mon formulaire et ma dropzone mais c'est plus compliqué que ce que je pensais...
Je ne sais pas comment représenter mon problème avec un codePen... Je vais essayer de l'expliquer plus clairement:
Ce code la marche très bien, la dropzone permet d'ajouter des photos donc c'est bien
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="{{asset('dropZone.css')}}">
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST" class="dropzone dz-clickable" >
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
<button type="submit" id="submit-all"> upload </button>
</form>
<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path('ficheNC')}},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 1,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
// formData.append("firstname", jQuery("#firstname").val());
// formData.append("lastname", jQuery("#lastname").val());
});
}
}
var dropzone = new Dropzone('#demo-upload', {
previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 2,
thumbnailHeight: 120,
thumbnailWidth: 120,
maxFilesize: 3,
filesizeBase: 1000,
thumbnail: function(file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
}
}
});
// Now fake the file upload, since GitHub does not handle file uploads
// and returns a 404
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
dropzone.uploadFiles = function(files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
//document.getElementsByClassName("dz-success-mark").style.opacity = "1";
}
};
}(file, totalSteps, step), duration);
}
}
}
</script>
MAis lorsque je met la
class="dropzone dz-clickable"
sur le form, la zone de la dropzone est celle du formulaire comme la photo ci-dessous:
Et meme si je change le CSS de la dropzone cela diminue la taille du form mais la dropzone correspond toujours au form.
Si je mets la
class="dropzone dz-clickable"
sur une div afin de pouvoir jour su sa taille comme le code-ci dessous:
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST" >
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone dz-clickable" >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
<button type="submit" id="submit-all"> upload </button>
</form>
Cela me fais une jolie dropzone dans le formulaire sans prendre tout sa taille comme sur la photo ci-dessous:
Cependant la dropzone ne fonctionne plus, lorsque je clique dessus je ne peux pas ajouter de photo, ni lorsque je drop les photos dedans, ce n'est plus une dropzone.
Comment faire pour qu'elle soit de la forme ci-dessus mais avec la possiblité d'y déposer des photos ?
J'espère avoir été plsu claire, encore merci !
- Edité par débutanteEnCodageSiteWeb 24 janvier 2020 à 14:04:50
Donc pour commencer, ce que tu veux faire, c'est imbriquer un formulaire dans un autre -> Impossible
Ce que j'ai fait :
- J'ai fait deux formulaire séparés, leur est donner deux id différent, le premier sera id="form1" et le deuxième id="form2"
- J'ai placer le formulaire contenant tes deux input au dessus, j'ai placer ensuite le formulaire du drag and drop
- J'ai sorti le bouton Upload (le submit quoi ...) en dehors du premier formulaire (id="form2"), et lui est passer l'attribut form="form2" pour l'associé au formulaire d'où il vient :
Bonsoir, je reviens ici car je n'arrive pas à faire la suite de ce que je voudrai faire...
Donc grâce au code de Mehddii j'ai pu faire mon form et qu'il soit bien submit. Puisque j'ai besoin d'un formulaire "en pulisuers fois" qui me permet de créer une fiche et dans la fonction php de l'enregistrer sur une API et deux formulaires qui sont des dropzone qui me permettent de mettre des photos, ces photos devant etre également enregitrées sur l'API, j'ai quelque chose dans ce genre là pour le HTML
<DIV id="dropzone">
<form id="form2" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
</form>
<form id="form1" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
<div >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
</form>
<form id="form2" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
</form>
<form id="form1" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
<div >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
</form>
</DIV>
Pour envoyer les infos et créer la fnc j'ai un peu de js qui me permet d'envoyer toutes les parties de form2 vers la fonction et ainsi créer ma fiche.
Voilà mes questions : Comment faire pour récupérer les photos de mes dropzones dans ma fonction php et ainsi pouvoir les enregistrer sur mon API (une fois que j'ai les photos je sais les enregistrer sur mon API dans ma fonction php) ? Et comment je peux faire pour différencier les photos de je récupererais de la première dropzone et de la deuxième ?
Pour ta première question tout est expliqué sur le site de l'API en question, si tu as les bases de PHP, je ne vois pas ce qu'il y'a de si difficile. Essayes de faire et montre nous ou tu bloques.
Deuxième question, je ne comprend toujours pas pourquoi tu utilises deux dropzone ? Une seule suffit non ?
En fait j'ai 4 form en tout (dont 2 dropzone) car j'ai besoin de 2 dropzone à 2 endroits différents.
En gros sur mon formulaire j'ai 3 "pages" qui sont des div que je montre ou que je cache en fonction de quand l'utilisateur appuie sur suivant ou précédent. Ma première "page" concerne les infos de la fiche de non conformité, la deuxieme les infos de cette non conformité où l'utilisateur peut ajouter une photo, et la dernière la mise en conformité ou l'utilisateur peut ajouter une photo également. Lors de l'ajout de la photos à l'api il y a une paramètre que je mets à true si la photo concerne à mise en en conformité et false si elle concerne la non conformité. C'est pourquoi j'ai besoin de deux dropzeons différentes où je réussi à différencier les photos que je récupère de l'un ou de l'autre.
Pour le bouton qui différencie 2 formulaire je te recmercie ! c'est grâce à ça que je peux submit au même endroit mes deux form2. Cependant le problème n'est pas pour submit les formulaire mais pour récuperer les photos dans ma fonction en php... j'ai regardé le lien https://www.startutorial.com/articles/view/move_uploaded_file-faq mais je ne comprends vraiment pas bien ce qu'ils font
Pour ce qui est de regarder le site de l'api, ce n'est pas une api que j'ai trouvé sur internet, c'est une api faite spécialement pour mon projet mais une fois les photos récupérées et différenciées je pense pouvoir me débrouiller pour les enregistrer sur l'api en code php
Pour ce qui est des id semblables, je ne sais pas si vous parlez de l'id des divs ou des id des form, mais pour les id des form, grâce à mon bouton qui valide tous les form d'un certain id ça a l'air de marcher sans me faire d'erreur...
Encore merci pour votre réponse !
- Edité par débutanteEnCodageSiteWeb 27 janvier 2020 à 9:56:09
On n'utilise jamais deux id identiques, pour cela il existe les class
Sinon, je ne saurais comment t'aider si tu ne commences pas à faire toi même, puis revenir ici avec un problème plus précis.
"Je ne comprend pas bien ce qu'ils font" n'est pas une question, pour cela je devrais relire toute l'api savoir ce qu'elle fait, voir même la tester par moi même pour te comprendre.
Donc je te conseillerais de commencer, trouver un problème précis sur lequel tu bloques, et revenir ici.
Sinon, si ton problème est plus générale, c'est à dire que tu veux récupérer des valeurs depuis des formulaires différents :
Alors en quoi ? Javascript ? PHP ?
Et quel est le soucis, tu as essayer de récupérer ces dernière mais ça ne marche pas ? Montre nous le code etc ...
En espérant pouvoir t'aider !
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
J'ai vérifié que l'envoie du formulaire se faisait bien mais finalement avec 2 id pareils vous aviez raison cela ne marche pas, donc j'ai fait quelque chose comme ça :
<DIV id="dropzone">
<form id="form2" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
</form>
<form id="form1" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
<div >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
</form>
<form id="form3" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
</form>
<form id="form4" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
<div >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
</form>
</DIV>
<button name="creationFiche" id="valider1" form="form2" class="btn btn-success" onclick="submitForms();">Valider</button
Avec une fonction js comme ceci :
function submitForms(){
document.getElementById("form2").submit();
document.getElementById("form3").submit();
}
Mais cela ne récupère pas les valeurs du form3 je ne comprends pas pourquoi
Ok qu'est ce qui ne fonctionne pas ? Tu as des erreurs ?
Sinon, si tu veux de l'aide, je te conseille déjà de mettre ce sujet en résolu, puisque le problème du bouton qui ne clic pas est résolu et surtout que ton code est vraiment bordélique sans vouloir t'enfoncer bien-sûr !
Puis recréer un nouveau sujet, avec une description clair et précise du problème en question, avec le code cible du problème et surtout des exemples ou message d'erreurs. Essayes de bien structurer ton problème pour recevoir de l'aide de la part des autres également.
Sinon je vois encore des soucis d'id qui se répètent, je te conseille d'utiliser le lien de validation de code que je t'ai envoyer
- Edité par Mehddii 27 janvier 2020 à 11:24:11
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
non je n'ai pas d'erreur, mais je ne récupère pas les input cout, durée et descriptionMEC qui sont dans le form3, je ne récupère que les infos qui sont dans le form2...
Oui je vais faire un nouveau sujet !
Formulaire ne s'envoie plus après l'ajout d'un dra
× 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.
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...