index.html：507 Uncaught TypeError：無法設置未定義的屬性'onsubmit'（...）

Question

我試過搜索，但找不到任何有助於回答我的問題的東西。我試圖將表單數據發送到JSON格式。同時也做一個console.log看看如何輸出JSON並將其設置到服務器。

以下是我的代碼。謝謝你的幫助！

<form enctype='application/json' style="text-align: center" method="post" name="form"> 
           <input name="firstname" value="" type="text" class="form-control" placeholder="First Name"> &nbsp 
           <input name="lastname" value="" type="text" class="form-control" placeholder="Last Name"> &nbsp 
           <input name="email" value="" type="text" class="form-control" placeholder="Email"> &nbsp 
           <select name="category" value="" class="form-control"> 
            <option selected disabled value="choose">--Category--</option> 
            <option value="furniture">Furniture</option> 
            <option value="books">Books</option> 
            <option value="music">Music</option> 
           </select> &nbsp 
           <input name="itemName" value="" type="text" class="form-control" placeholder="Item Name"> &nbsp 
           <input name="itemDesc" value="" type="text" class="form-control" placeholder="Item Description"> &nbsp 
           <input name="priceInput" value="" type="text" class="form-control" placeholder="Price ($00.00)"> &nbsp 

          <div class="modal-footer"> 
           <button name="submit" value="" onclick ="onsubmit()" class="btn btn-default">Submit</button> 
          </div> 
          </form> 


      <script> 
          var form; 

          form.onsubmit = function (e) { 
           //stop regular form submission 
           e.preventDefault(); 

           //collect the form data 
           var data = {}; 
           for (var i = 0, ii = form.length; i <ii; ++i) { 
            var input = form[i]; 
            if (input.name) { 
             data[input.name] = input.value; 
            } 
           } 

           //construct an HTTP request 
           var xhr = new XMLHttpRequest(); 
           xhr.open(form.method, form.action, true); 
           xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); 

           //send the collected data as JSON 
           xhr.send(JSON.stringify(data)); 

           console.log(JSON.stringify(data)); 

           xhr.onloadend = function() { 
            //done 
           }; 
          }; 

      </script> 

Answer 1

在您的代碼：

var form; 
form <-- currently is undefined 
form.onsubmit === undefined.onsubmit 

您可以使用您的DOM元素onsubmit功能。爲此，您需要設置form變量以引用代碼中的<form>元素。

您可以使用

var form = document.forms['form'] 

'形式' 的用法在這裏是因爲你的<form>標籤有name="form"。