index.html：507 Uncaught TypeError：无法设置未定义的属性'onsubmit'（...）

问题描述：

我试过搜索，但找不到任何有助于回答我的问题的东西。我试图将表单数据发送到JSON格式。同时也做一个console.log看看如何输出JSON并将其设置到服务器。index.html：507 Uncaught TypeError：无法设置未定义的属性'onsubmit'（...）

以下是我的代码。谢谢你的帮助！

<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>

你声明了变量'form'，但是你没有初始化它。 – Pointy

Im接收“Uncaught TypeError：无法在谷歌浏览器和火狐浏览器中设置undefined属性'onsubmit' –

没错，因为在form.onsubmit = ...语句中，变量form的值是undefined。这正是错误告诉你的。 – Pointy

答

在您的代码：

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

您可以使用您的DOM元素onsubmit功能。为此，您需要设置form变量以引用代码中的<form>元素。

您可以使用

var form = document.forms['form']

'形式' 的用法在这里是因为你的<form>标签有name="form"。

index.html：507 Uncaught TypeError：无法设置未定义的属性'onsubmit'（...）

相关推荐