How do I create this Facebook photovoltaic from harddrive in Javascript instead of PHP?


so I've got the following code in php, where you can choose a file from your harddrive, and it then uploads it to facebook:

     // calculations for the variables used here are above, but not necessary
$graph_url= ""
     . "access_token=" .$access_token;
     echo '<html><body>';
     echo '<form enctype="multipart/form-data" action="'
     .$graph_url .' "method="POST">';
     echo 'Please choose a photo: ';
     echo '<input name="source" type="file"><br/><br/>';
     echo 'Say something about this photo: ';
     echo '<input name="message"
         type="text" value=""><br/><br/>';
     echo '<input type="submit" value="Upload"/><br/>';
     echo '</form>';
     echo '</body></html>';

And then I've written a javascript function doing the same:

function PHPPhotoUpload()
GraphURL= "" +"access_token=" + USERTOKEN;

     document.getElementById("photoupload").innerHTML += '<p> ' + GraphURL + '</p>';
     document.getElementById("photoupload").innerHTML += '<html><body>';
     document.getElementById("photoupload").innerHTML += '<form enctype="multipart/form-data" action="' + GraphURL +'" method="POST">';
     alert('<form enctype="multipart/form-data" action="' + GraphURL +' "method="POST">');
     document.getElementById("photoupload").innerHTML += 'Please choose a photo: ';
     document.getElementById("photoupload").innerHTML += '<input name="source" type="file"><br/><br/>';
     document.getElementById("photoupload").innerHTML += 'Say something about this photo: ';
     document.getElementById("photoupload").innerHTML += '<input name="message" type="text" value=""><br/><br/>';
     document.getElementById("photoupload").innerHTML += '<input type="submit" value="Upload"/><br/>';
     document.getElementById("photoupload").innerHTML += '</form>';
     document.getElementById("photoupload").innerHTML += '</body></html>';

Yet when I click on the upload button of the php file without uploading anything, it gives me an error. When I do it in javascript, the button simply does nothing. Same when I have selected a picture. Both seem to print exactly the same HTML code to my document, so why is this not working?

You can not build innerHTML like that. It is not a big string where you adding to it. When you set the innerHTML with a broken tag, it will close it.

You need to build the entire string first, than set the innerHTML one time!

The other issue is YOU CAN NOT have another html and body tag on the page! Get rid of those lines.