수 없습니다 통과 값은 PHP로

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!--SERVER Query and Return function--> 
    <script type="text/javascript"> 
    function getreport() 
    { 
     $("button").click(function() 
     { 
      var id = $("#idF").val(); //assigning form values 
      var report= $("#reportF").val(); 
      var date = $("#dateF").val(); 

      $.post("report.php", {idP:id,reportP:report,dateP:date}, function(data){ 
       $("#results").html(data); //updating the page with results 
       }); //trying to pass the 3 fields to report.php 
     }); 
    } 
    </script> 

<form id="queryReports"> 
     ID: <input type="text" style='text-transform:uppercase' id="idF"> Report:<input type="text" style='text-transform:uppercase' id="reportF"> 
     Date(dd/mm/YYYY): <input type="date" id="dateF" id="Study_dateF">   
     <button id="button" onclick="getreport()">SEARCH</button> 

</form> 

누군가가이 코드는 아무것도 할 것으로 보인다 이유를 올바른 방향으로 날 지점 수 있습니까? 버튼을 클릭하면 report.php가 양식에서 전달 된 값으로 호출 될 것으로 예상됩니다. 그러나 나는 그것으로부터 아무것도 얻지, 나는 PHP 로그를 확인하고 내가 버튼을 사용하여 report.php를 호출하면 전달되는 아무것도 없다.

반면에 하드 코드 된 값으로 report.php를 실행하면 결과가 나타납니다. 내 jQuery/Javascript에 누락 된 것으로 의심됩니다.

Answer 1

로직은 결함이있다. JQuery와 하나 내부의 코드는 다음 시간까지 발생하지 않습니다

당신은

인라인 하나를 제거하기 버튼을 클릭하고 또한 "button"에 버튼 유형을 변경하거나이 "submit"을 기본값으로하고 양식을 제출한다 기본 과정을 통해

<button id="button" type="button">SEARCH</button> 

JS

$(function() {  
    $("#button").click(function(e) { 
    e.preventDefault(); 
    var id = $("#idF").val(); //assigning form values 
    var report = $("#reportF").val(); 
    var date = $("#dateF").val(); 

    $.post("report.php", { 
     idP: id, 
     reportP: report, 
     dateP: date 
    }, function(data) { 
     $("#results").html(data); //updating the page with results 
    }); //trying to pass the 3 fields to report.php 
    }); 
}); 

당신은에 name를 추가하여이 문제를 단순화 할 수 있습니다 입력 요소에 대한 찬사와 양식에 serialize()를 사용하여

예 입력 :

<input type="text" name="idP" id="idF"> 

JS 당신이 개발자 도구 (크롬 F12)를 열 경우, 네트워크에 이동에 명중

$(function() { 
    // use submit event instead of click on button  
    $("#queryReports").submit(function(e) { 
    e.preventDefault(); 
    $.post("report.php", $(this).serialize(), function(data) { 
     $("#results").html(data); //updating the page with results 
    }); //trying to pass the 3 fields to report.php 
    }); 
}); 

Answer 2

$("button").click() 기능을 제거하십시오. getreport() 함수는 버튼에서 onclick="getreport()"을 통해 호출하지만 함수를 호출하면 $("button").click() 함수 내부에 있기 때문에 AJAX 요청에 도달 할 수 없습니다.

Answer 3

코드에서 약간의 오류가 발견되었습니다. 속성에 대해 큰 따옴표를 사용하고 요소에 두 개의 ID를 부여하지 말고 제출 버튼에서 클릭 이벤트를 처리 할 때 기본값을 방지해야합니다. 하나의 핸들러를 다른 핸들의 내부에 만들면 동일한 핸들을 사용하여 두 핸들러를 사용하지 않아야합니다. 이 시도 : 당신이 jQuery를 하나 인라인 이벤트 리스너를 혼합하고 있기 때문에

$("button").click(function(ev) 
 
     { 
 
      ev.preventDeafult(); 
 
      var id = $("#idF").val(); //assigning form values 
 
      var report= $("#reportF").val(); 
 
      var date = $("#dateF").val(); 
 

 
      $.post("report.php", {idP:id,reportP:report,dateP:date}, function(data){ 
 
       $("#results").html(data); //updating the page with results 
 
       }); //trying to pass the 3 fields to report.php 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form id="queryReports"> 
 
     ID: <input type="text" style="text-transform:uppercase" id="idF"> Report:<input type="text" style="text-transform:uppercase" id="reportF"> 
 
     Date(dd/mm/YYYY): <input type="date" id="dateF">   
 
     <button id="button">SEARCH</button> 
 

 
</form>