表单中的文本框数据-AJAX提交时未传递

文本框（id:handle）的数据没有通过AJAX提交后的post传递。

形式：

  <form method="post" accept-charset="utf-8" name="form1">
 <LABEL for:="handle">Twitter Handle </LABEL>
 <INPUT type="text" id="handle" value="@">
 <input name="hidden_data" id='hidden_data' type="hidden"/>
 </form>

我有一个按钮：

     <input type="button" id="sharebutton" onclick="uploadEx()" value="Share" />

这是我的功能（uploadEx）：

      function uploadEx() {
                    var handle = document.getElementById('handle');
            var canvas = document.getElementById("canvas");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form1"]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload_data.php', true);
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                    alert('Selfie Succesfully uploaded');
                }
            };
            xhr.onload = function() {
            };
            xhr.send(fd);
        };

我的图片（Canvas）会传回upload_data.php并进行处理。

文本框handle没有任何作为POST传递的内容。

我不知道错误在哪里。