I'm having trouble using PHP and JavaScript.

Goal: When the event listener for an HTML button in a .js file is called, the .php script should be executed, without reloading the page.

Expected results: When the button is clicked, the PHP script will be executed. In my case, the file from the URL will be downloaded to the server.

Actual Result: I don't know how to call a PHP script from a JavaScript file.

I tried using AJAX but nothing worked. And I don't know where to put the JQuery library reference.

I also tried using a form and putting an input in it (type="submit"), but when the PHP function is called, it refreshes the page and everything on the page that says client side disappears.

HTML button:

<button type="button" class="button" id="btnsubmit">Submit</button>
<img class="image" id="someimage">

JavaScript event listener (I have assigned the button and image to variables):

btnsubmit.addEventListener("click", () => {
    someimage.src = "directory/downloadedimg.png";
});

PHP script:

<?php
    $path = 'https://somewebsite.com/imagetodownload.png';
    $dir = 'directory/downloadedimg.png';
    
    $content = file_get_contents($path);
    $fp = fopen($dir, "w");
    fwrite($fp, $content);
    fclose($fp);
?>

So generally when a button is clicked I want to do the following:

1. Download image from URL to my server using PHP
2. Display in HTML image using JavaScript Image from server (not from URL, I know that is possible, but for my usage I need it to come from server)

I tried @Abhishek's answer and found that the problem is now in my php file. It always gives me an internal server error. Do you find any errors in this code, uploading image from $path (which is a URL) to my server (serverdirectorypath is $image_url):

<?php
$params = $_POST['data'];
$path = $params['path'];
$image_url = $params['image-url'];
    
$content = file_get_contents($path);
$fp = fopen($image_url, "w");
fwrite($fp, $content);
fclose($fp);
?>