表单中的文本框数据 - 未通过AJAX提交

Question

在提交AJAX时，文本框（id：handle）没有通过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); 
     }; 

我的图片（画布）被传递回upload_data .php并进行处理。

该文本框句柄没有任何东西作为POST传递。

我不知道错误在哪里。

Answer 1

您的文字输入没有name属性，添加它，它应该工作：

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