단추가 아약스를 트리거하지 않음

Question

AJAX를 통해 데이터베이스에 요소를 제출하는 양식이 있습니다. 문제는 제출 단추를 클릭해도 아무 것도하지 않고 ajax 요청이나 아무것도 호출하지 않는다는 것입니다. URL 사용 "https://www.domain.com/test6/services/insert.php" 에서

HTML

<div class="list"> 
    <input type="hidden" id="id" value="" /> 
    <div class="item"> 
     <label>Name</label> 
     <input type="text" id="name" value="" /> 
    </div> 
    <div class="item"> 
     <label>Number</label> 
     <input type="text" id="number" value="" /> 
    </div> 
    <div class="item"> 
     <label>Address</label> 
     <input type="text" id="address" value="" /> 
    </div> 
    <div class="item"> 
     <label>Price</label> 
     <input type="text" id="price" value="" /> 
    </div> 
    <div class="item"> 
     <label>Deposit</label> 
     <input type="text" id="deposit" value="" /> 
    </div> 
    <div class="item"> 
     <label>Product</label> 
     <input type="text" id="product" value="" /> 
    </div> 
    <div class="item"> 
     <label>Payment Type</label> 
     <input type="text" id="payment_type" value="" /> 
    </div> 
    <div class="item"> 
     <label>Deal Date</label> 
     <input type="text" id="deal_date" value="" /> 
    </div> 
    <div class="item"> 
     <label>Install Date</label> 
     <input type="text" id="install_date" value="" /> 
    </div> 
    <div class="item"> 
     <label>Installed</label> 
     <input type="text" id="installed" value="" /> 
    </div> 
    <div class="item"> 
     <label>Notes</label> 
     <textarea name="notes" cols="" id="price" rows=""></textarea> 
    </div> 
    <div class="item"> 
     <label>Contract Received</label> 
     <input type="text" id="contract_recieved" value="" /> 
    </div> 
    <div class="item"> 
     <input type="button" id="insert" class="button button-block" value="Insert" /> 
    </div> 

자바 스크립트

$(document).ready(function() { 
    $("#insert").click(function() { 
     var name = $("#name").val(); 
     var number = $("#number").val(); 
     var address = $("#address").val(); 
     var price = $("#price").val(); 
     var deposit = $("#deposit").val(); 
     var product = $("#product").val(); 
     var payment_type = $("#payment_type").val(); 
     var deal_date = $("#deal_date").val(); 
     var install_date = $("#install_date").val(); 
     var installed = $("#installed").val(); 
     var notes = $("#notes").val(); 
     var contract_recieved = $("#contract_recieved").val(); 
     var dataString = "name=" + name + "&number=" + number + "&address=" + address + "&price=" + price + "&deposit=" + deposit + "&product=" + product + "&payment_types=" + payment_types + "&deal_date=" + deal_date + "&install_date=" + install_date + "&installed=" + installed + "&notes=" + notes + "&contract_recieved=" + contract_recieved + "&insert="; 
     if ($.trim(title).length > 0 & $.trim(duration).length > 0 & $.trim(price).length > 0) { 
      $.ajax({ 
       type: "POST", 
       url: "http://http://www.domain.com/test6/services/insert.php", 
       data: dataString, 
       crossDomain: true, 
       cache: false, 
       beforeSend: function() { 
        $("#insert").val('Connecting...'); 
       }, 
       success: function(data) { 
        if (data == "success") { 
         alert("inserted"); 
         $("#insert").val('submit'); 
        } else if (data == "error") { 
         alert("error"); 
        } 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

Answer 1

또한 사용하고있는 변수 중 일부는 예를 들어 payment_types 및 기간에 대한 오류를 수정 정의되지 않습니다.

Answer 2

아마도 속임수를 썼습니다. 가격을 입력해야합니다. 무관이 바이올린은

당신은 더 이상 사용하지 않는해야 ... 나를 위해 잘 작동을 말했다 :

$("#insert").click(function() {}); 

사용이 대신 :

$("#insert").on('click', function() {}); 

Answer 3

당신은 자바 스크립트에서 misspels 있습니다. 필드에서 값을 가져 오는 동안 변수 payment_type을 초기화했지만 아약스 요청에 대한 쿼리를 작성할 때 variable_type을 사용합니다 ("s"를 끝내지 않음) 또한 title 및 duration과 같은 정의 된 변수가 없습니다.

체크 아웃이 : 오류 무엇

$(document).ready(function() { 
    $("#insert").click(function() { 
     var name = $("#name").val(); 
     var number = $("#number").val(); 
     var address = $("#address").val(); 
     var price = $("#price").val(); 
     var deposit = $("#deposit").val(); 
     var product = $("#product").val(); 
     var payment_type = $("#payment_type").val(); 
     var deal_date = $("#deal_date").val(); 
     var install_date = $("#install_date").val(); 
     var installed = $("#installed").val(); 
     var notes = $("#notes").val(); 
     var contract_recieved = $("#contract_recieved").val(); 
     var dataString = "name=" + name + "&number=" + number + "&address=" + address + "&price=" + price + "&deposit=" + deposit + "&product=" + product + "&payment_type=" + payment_type + "&deal_date=" + deal_date + "&install_date=" + install_date + "&installed=" + installed + "&notes=" + notes + "&contract_recieved=" + contract_recieved + "&insert="; 
//  if ($.trim(title).length > 0 & $.trim(duration).length > 0 & $.trim(price).length > 0) { 
     if ($.trim(price).length > 0) { 
      alert('ajax calls'); 
      $.ajax({ 
       type: "POST", 
       url: "http://http://www.domain.com/test6/services/insert.php", 
       data: dataString, 
       crossDomain: true, 
       cache: false, 
       beforeSend: function() { 
        $("#insert").val('Connecting...'); 
       }, 
       success: function(data) { 
        if (data == "success") { 
         alert("inserted"); 
         $("#insert").val('submit'); 
        } else if (data == "error") { 
         alert("error"); 
        } 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

https://jsfiddle.net/mLwsvuk1/