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>タグがname="form"を持っているので、ここでは 'フォーム' の利用がある

var form = document.forms['form'] 

を使用することができます。