表單中的文本框數據 - 未通過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>