내 자바 스크립트 양식이 제출되지 않는 이유는 무엇입니까?

Question

POST 필드를 통해 텍스트 필드에 포함 된 데이터를 firebase에 직접 주입하는 양식을 작성 중입니다.

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

그리고 자바 스크립트 함수는 다음과 같다 :

$(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); 
     } 
    }); 
}); 
}); 

내가 양식 주위 엉망 시도하고 나누기 아무것도 찾을 수 없습니다

이

는 HTML 폼에 대한 코드입니다 . 콘솔에도 오류가 표시되지 않았습니다.

Answer 1

여기에는 두 가지 문제가 있습니다. 첫 번째는 button의 클릭 이벤트에 연결하는 것입니다. 즉, form 제출이 아직 진행 중입니다. 이 상황이 발생하면 form에 action 속성을 지정하지 않아 페이지가 효과적으로 다시로드되므로 AJAX 호출이 완료되지 않습니다. 이 문제를 해결하려면 항상 submit 이벤트 (form)에 연결하고 을 사용하여 기본 제출을 중지해야합니다.

두 번째로 페이지로드시 입력 요소의 특성 인 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); 
     } 
    }); 
});