0

I have a simple form in html that looks like this:

<form method="post" id="postImageForm" action="storeImage.php">
    <input type="hidden" name="image" id="image-tag">
    <button class="capture-button" type="submit" value="submit"></button>
</form>

and a Javascript eventListner :

PostForm.addEventListener('submit', function(e){
    
    e.preventDefault();
    let imageTag = document.getElementById('image-tag');
    html2canvas(displayScreen).then(canvas=>{
        imageTag.value = canvas.toDataURL();
        appendThumbnail(canvas.toDataURL());
        console.log("inside the promise: "+imageTag.value) //valid results.
    });
    console.log("outside the promise: "+imageTag.value); //empty results.
})

my php file receives empty value and so is my console.log() outside the promise scope.

How can it be fixed to send the value into POST?

Omar Alsakka
  • 1
  • 2
  • `my php file receives empty value`...where are you actually sending anything to PHP here? Your code disables the default postback behaviour, but I don't see anything which would replace it (e.g. JS to submit the form, or an AJAX request) – ADyson May 19 '22 at 13:21
  • at the form part ```action=storeImage.php``` – Omar Alsakka May 19 '22 at 13:22
  • 1
    Again, your JS code (`e.preventDefault()`) disables the default postback behaviour, so unless the JS code is erroring, or the event listener is never actually bound, this should not be sending anything to the server at all. Have you checked the console for errors or used the JS debugger to check anything like that? – ADyson May 19 '22 at 13:32
  • I removed the ***preventDefault*** command and still my php file when it executed, it’s $_POST have an empty value for the key – Omar Alsakka May 19 '22 at 14:09
  • To add to this @ADyson the php file only have ```print_r ($_POST)``` and this results with empty value for the key **image** – Omar Alsakka May 19 '22 at 14:12
  • Well obviously it will, because you're posting back the form, so the JavaScript never runs. I suggest keeping `e.preventDefault()`, and inside the `.then =>....` callback, after you've written the data to the image field, you can use JS to submit the form (should just be `document.getElementById("postImageForm").submit()`). Or if you prefer not to post back the entire page, you can implement an AJAX call. – ADyson May 19 '22 at 15:17

0 Answers0