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

删除$("button").click()功能。您是通过按钮上的getreport()调用onclick="getreport()"函数，但是当它调用该函数时，它无法访问AJAX请求，因为它位于{{1}内部功能。

Answer 2

我在代码中发现了一些错误。您应该对属性使用双引号，永远不要给元素两个ID，并在处理提交按钮上的单击事件时阻止默认值。当在另一个内部创建一个处理程序时，您还应该避免使用两个处理程序来执行相同的操作。试试这个：

$("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>

Answer 3

逻辑是有缺陷的，因为你将内联事件监听器与jQuery混合使用。

jQuery one中的代码在下次单击按钮

之前不会触发

删除内联版本并将按钮类型更改为"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
  });
});

无法将值传递给php

3 个答案: