Why I lost the filename value when I click the submit button
<p>I have made a form to pass xml files on a server. Although when it correctly sends the file to the server, it seems that the pages reloads and the value of the file name is lost and my javascript code returns nothing.
However if I remove the line</p>

<pre><code>    &lt;input type="submit"  /&gt;  
</code></pre>

<p>from the code below it keeps the filename in the variable x but it doesn't send the file to the server.
I want to send the file on the server and keep its name into a variable in order to use in any other javascript functions.</p>

<pre><code>&lt;?php
$uploads_dir='/web/stud/external/scomvs2/epicurus';

if(isset($_FILES['xml_file1'])){
    $errors= array();
    $file_name = $_FILES['xml_file1']['name'];
    $file_size =$_FILES['xml_file1']['size'];
    $file_tmp =$_FILES['xml_file1']['tmp_name'];
    $file_type=$_FILES['xml_file1']['type'];
    $file_ext=strtolower(end(explode('.',$_FILES['xml_file1']['name'])));
    $expensions= array("xml","XML");

    if(in_array($file_ext,$expensions)== false){
        $errors[]="extension not allowed, please choose an xml file.";
    }

    if($file_size &gt; 2097152){
        $errors[]='File size must be excately 2 MB';
    }

    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"$uploads_dir/$file_name");
        echo "Success";
    }else{
        print_r($errors);
    }
}
?&gt;

&lt;html&gt;
&lt;body&gt;
    &lt;form  action="" method="POST" enctype="multipart/form-data"&gt;
        &lt;input type="file" id="uploading"  name="xml_file1"/&gt;
        &lt;input type="submit"  /&gt;  
    &lt;/form&gt;
    &lt;button type="button" onclick="myFunction()"&gt;Try it&lt;/button&gt;    
    &lt;p id="demo"&gt;&lt;/p&gt;
    &lt;script&gt;
        function myFunction() {
            var x = document.getElementById("uploading").value;
            document.getElementById("demo").innerHTML = x;

        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>