javascript - 无法将值传递给 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 监听器混合在一起。

直到您下次单击按钮时，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

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