なぜ私のJavaScriptフォームは送信されませんか？

Question

私は、テキストフィールドに含まれるデータをPOSTメソッドを介してfirebaseに直接注入するフォームを作成しています。

これは、HTMLフォームのコードです：

<form> 
    <h5>From:</h5> 
     <div class="row"> 
     <div class="six columns"> 
      <label for="fromName">Name</label> 
      <input class="u-full-width" placeholder="Full Name" id="fromName"> 
     </div> 
     <div class="six columns"> 
      <label for="fromContactNo">Contact No.</label> 
      <input class="u-full-width" placeholder="08xxx" id="fromContactNo"> 
     </div> 
     </div> 
     <label for="fromAddress">Address</label> 
     <textarea class="u-full-width" placeholder="Full Address" id="fromAddress"></textarea> 

     <!-- break --> 

     <h5>To:</h5> 
     <div class="row"> 
     <div class="six columns"> 
      <label for="toName">Name</label> 
      <input class="u-full-width" placeholder="Full Name" id="toName"> 
     </div> 
     <div class="six columns"> 
      <label for="toContactNo">Contact No.</label> 
      <input class="u-full-width" placeholder="08xxx" id="toContactNo"> 
     </div> 
     </div> 
     <label for="toAddress">Address</label> 
     <textarea class="u-full-width" placeholder="Full Address" id="toAddress"></textarea> 

     <!-- break --> 
     <h5>Delivery Details:</h5> 
     <div class="row"> 
      <div class="u-full-width"> 
       <label for="itemDesc">Item description</label> 
       <textarea class="u-full-width" placeholder="Item Description here" id="itemDesc"></textarea> 
      </div> 
     </div> 

     <!-- break --> 
     </br> 
     <button class="button-primary" id="add-order">Send</button> 
    </form> 

そして、次のようにJavaScriptの関数は次のとおりです。

$(document).ready(function(){ 
var $fromName = $('#fromName'); 
var $fromContactNo = $('#fromContactNo'); 
var $fromAddress = $('#fromAddress'); 
var $toName = $('#toName'); 
var $toContactNo = $('#toContactNo'); 
var $toAddress = $('#toAddress'); 
var $itemDesc = $('#itemDesc'); 
var $addOrder = $('#add-order'); 

$addOrder.on('click', function(){ 

    var newOrder = { 
     "from": { 
      "name": $fromName.val(), 
      "phone_no": $fromContactNo.val(), 
      "address": $fromAddress.val(), 
     }, 
     "to": { 
      "name": $toName.val(), 
      "phone_no": $toContactNo.val(), 
      "address": $toAddress.val(), 
     }, 
     "item": $itemDesc.val(), 
    }; 

    $.ajax({ 
     type: 'POST', 
     url: 'https://myUrl.firebaseio.com/order.json', 
     contentType: "application/json; charset=utf-8", 
     data: JSON.stringify(newOrder), 
     success: function(data) { 
     console.log("Order added!", data); 
     } 
    }); 
}); 
}); 

私はフォームを台無しに周りにしようと、それを壊す何かを見つけることができません。コンソールにもエラーは表示されませんでした。

Answer 1

ここには2つの問題があります。 1つは、buttonのクリックイベントにフックすることです。これは、依然としてformの提出が行われていることを意味します。その場合、formにはactionという属性が指定されていないため、ページが効果的にリロードされ、AJAX呼び出しが完了しなくなります。この問題を解決するには、formのsubmitイベントに常にフックし、デフォルトの送信が行われないようにを使用してください。

第2に、ページの読み込み時に入力要素のval()プロパティのみを取得します。その時点で、ユーザはそれらと対話していない。代わりに、AJAXリクエストで送信する直前に値を取得する必要があります。

これを試してみてください：このショー `

$('form').on('submit', function(e) { 
    e.preventDefault(); 

    var $fromName = $('#fromName'); 
    var $fromContactNo = $('#fromContactNo'); 
    var $fromAddress = $('#fromAddress'); 
    var $toName = $('#toName'); 
    var $toContactNo = $('#toContactNo'); 
    var $toAddress = $('#toAddress'); 
    var $itemDesc = $('#itemDesc'); 

    var newOrder = { 
     "from": { 
      "name": $fromName.val(), 
      "phone_no": $fromContactNo.val(), 
      "address": $fromAddress.val(), 
     }, 
     "to": { 
      "name": $toName.val(), 
      "phone_no": $toContactNo.val(), 
      "address": $toAddress.val(), 
     }, 
     "item": $itemDesc.val(), 
    }; 

    $.ajax({ 
     type: 'POST', 
     url: 'https://myUrl.firebaseio.com/order.json', 
     contentType: "application/json; charset=utf-8", 
     data: newOrder, // no need for JSON.stringify here 
     success: function(data) { 
      console.log("Order added!", data); 
     } 
    }); 
});