Bonjour a tous,
Merci PapyJP de m'avoir orienté par ici.
J'ai essayé de lire toute la discussion mais je ne comprend pas tout, oui je suis un développeur en herbe qui débute
.
J'ai essayé le code de PapyJP, J'ai une erreur sur "var nomstage..." (TypeError: Cannot read property 'querySelector' of null), lorsque que j'exécute le code que j'ai essayé d'adapter:
Voici le code de PapyJP que j'ai essayé d'adapter a mes besoins encore merci et plus bas mon code de base.
Pour les autres je vous explique mes besoins et mes problèmes.
Je recherche une solution a mon problème qui est le suivant:
Je doit envoyer un fichier pdf (binaire)(pour info html2canvas fait une image d'une div et jsPDF met l'image dans un fichier pdf) et des données qui ne sont pas en formulaire vers un fichier de traitement en php pour ensuite les envoyer dans la base de donnée mysql:
J'essaye de faire cet envoie avec ajax jquery via un seul bouton, mais je ne parviens pas a récupérer les données envoyées, par contre je récupère bien le fichier pdf via la methode:
move_uploaded_file($_FILES....
Pour info, je n'est pas de formulaire dans mon code html, les données viennent de (select option value), (td) et (textarea) via un autre script js.
exemple:
<select name="numstage" id="numstage" style="font-size: 1.5em;border: none; border-color: transparent;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
ou
<textarea style="border: none; border-color: transparent;" name="Descriptn" id="Descriptn" cols="60" rows="4">Exemple: Engage targets as they become visible.</textarea>
ou
<input style="text-align: center; border-color: transparent;" form-control id="nomstage" name="nomstage" type="text" placeholder="Enter stage name">
ou encore
<td name="MaxPoints" class="bord MaxPoints" id="point"></td>
JS :de PapyJP adapté:
function uploadFile(formID) {
window.scrollTo(0, 0); //scroll page entiere du haut en bas
html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
var doc = new jsPDF();
// doc.setFontSize(40); //taille titre
// doc.text(40, 25, "TSV STAGE MAKER") // titre
doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)
var blob = doc.output('blob');
var form = document.getElementById(formID);
var nomstage = form.querySelector('[name="nomstage"]');
var numstage = form.querySelector('[name="numstage"]');
var FirearmId = form.querySelector('[name="FirearmId"]');
var TrgtTypeId = form.querySelector('[name="TrgtTypeId"]');
var ScoringId = form.querySelector('[name="ScoringId"]');
var StartOn = form.querySelector('[name="StartOn"]');
var StartPos = form.querySelector('[name="StartPos"]');
var Descriptn = form.querySelector('[name="Descriptn"]');
var CourseId = form.querySelector('[name="CourseId"]');
var matchsid = form.querySelector('[name="matchsid"]');
var formData = new FormData();
formData.append('pdf', blob);
formData.append('file', fileObject);
formData.append('nomstage', nomstage.value);
formData.append('numstage', numstage.value);
formData.append('FirearmId', FirearmId.value);
formData.append('TrgtTypeId', TrgtTypeId.value);
formData.append('ScoringId', ScoringId.value);
formData.append('StartOn', StartOn.value);
formData.append('StartPos', StartPos.value);
formData.append('Descriptn', Descriptn.value);
formData.append('CourseId', CourseId.value);
formData.append('matchsid', matchsid.value);
console.log(formData);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
alert(this.responseText);
return;
}
}
xhr.open('post', 'save-capture.php');
xhr.send(formData);
});
}
Voici mon code js de base :
function GenPDF(){
window.scrollTo(0, 0); //scroll page entiere du haut en bas
html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
var doc = new jsPDF();
// doc.setFontSize(40); //taille titre
// doc.text(40, 25, "test") // titre
doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)
var blob = doc.output('blob');
var nomstage = $('#nomstage') . val();
var numstage = $('#numstage') . val();
var FirearmId = $('#FirearmId') . val();
var TrgtTypeId = $('#TrgtTypeId') . val();
var ScoringId = $('#ScoringId') . val();
var StartOn = $('#StartOn') . val();
var StartPos = $('#StartPos') . val();
var Descriptn = $('#Descriptn') . val();
var CourseId = $('#CourseId') . val();
var matchsid = $('#matchsid') . val();
var formData = new FormData();
formData.append('pdf', blob);
var objArr = [];
objArr.push({
formData,
"nomstage": nomstage,
"numstage": numstage,
"FirearmId": FirearmId,
"TrgtTypeId": TrgtTypeId,
"ScoringId": ScoringId,
"StartOn": StartOn,
"StartPos": StartPos,
"Descriptn": Descriptn,
"CourseId": CourseId,
"matchsid": matchsid
});
//JSON obj
formData.append('objArr', JSON.stringify( objArr ));
$.ajax({
url: '/save-capture.php',
type:"POST",
processData:false,
contentType: false,
data: formData,
// complete: function(data){alert("success");}
success: function(response){console.log(response)},
error: function(err){console.log(err)}
});
});
}
Et voici les tentative coté php:
<?php
$var = json_decode(file_get_contents("php://input"),true);
echo "Data recieved by PHP file.\n";
if ($var["nomstage"]=="John"){
echo "ok";
}
else{
echo "nok";
}
echo "\nSent";
die();
j'obtiens nok comme repose Smiley decu
mais je voit bien mes données dans le navigateur lorsque je fait un print_r($_POST) ou ($_REQUEST)
echo '<pre>';
print_r($_REQUEST);
echo '</pre>';
die();
ou
echo '<pre>';
print_r($_POST);
echo '</pre>';
die();
Meme Résultat du print_r de post ou REQUEST
<pre>Array
(
[objArr] => [{"formData":{},"nomstage":"John","numstage":"1","FirearmId":"1","TrgtTypeId":"2","ScoringId":"1","StartOn":"00","StartPos":"Exemple: Standing erect, facing downrange with hanging naturally by the sides.","Descriptn":"Exemple: Engage as they become visible.","CourseId":"1","matchsid":"24"}]
)
</pre>
Merci d'avance pour votre aide
=> 2020-03-20
).