简体   繁体   English

Ajax麻烦为动态PHP输出传递多个表单变量

[英]Ajax trouble passing multiple form variables for dynamic PHP output

I'm having an issue passing multiple variables. 我在传递多个变量时遇到问题。 I started off with the basic W3schools example here: http://www.w3schools.com/php/php_ajax_database.asp my php code requires type of report, which is stored in "report" & a "startDate" & a "endDate". 我从这里的基本W3schools示例开始: http : //www.w3schools.com/php/php_ajax_database.asp我的php代码需要报告类型,该报告类型存储在“报告”和“ startDate”和“ endDate”中。 When keeping with original sample and hard coding startDate & endDate, script performs perfectly. 与原始样本和硬编码的startDate和endDate保持一致时,脚本可以完美执行。 I then tried adding Jason Moon's calendar for startDate & endDate, having trouble passing variables. 然后,我尝试将Jason Moon的日历添加到startDate和endDate,但无法传递变量。 Ideally I'd also like the form to automatically update data output when any field is edited, including the calendar, from my understanding there Jason Moon's calendar is creating a hidden textfield for startDate & endDate. 理想情况下,我还希望表单在编辑任何字段(包括日历)时自动更新数据输出,据我了解,Jason Moon的日历正在为startDate和endDate创建一个隐藏的文本字段。 Here's what I have: 这是我所拥有的:

    <html>
    <head>
    <script type="text/javascript"> 
    function showReport() 
    { 
        var report = document.getElementById('report').value;
        var startDate = document.getElementById('startDate').value;
        var endDate = document.getElementById('endDate').value;

          if (report=="" && startDate=="" && endDate=="")
          {
            document.getElementById("txtOutput").innerHTML="";
             return;
          }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtOutput").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","report.php?report="+report+"&startDate="+startDate+"&        endDate="+endDate,true);
    xmlhttp.send();
    }
     </script>
     <script type="text/javascript" src="js/cal.js">

    /***********************************************
    * Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
    * Script featured on and available at http://www.dynamicdrive.com
    * Keep this notice intact for use.
    ***********************************************/

    </script>
    </head>
    <body>

    <form>
    <select name="report" onChange="showReport()">
    <option value="">Type:</option>
    <option value="msales">Marketplace</option>
    <option value="lsales">Location</option>
    <option value="cos">COS</option>
    <option value="inventory">Inventory</option>
    </select>
    <br> StartDate:
    <script>DateInput('startDate', true, 'YYYY-MM-DD')</script>

    EndDate:
    <script>DateInput('endDate', true, 'YYYY-MM-DD')</script>
    </form>
    <br>
    <div id="txtOutput"><b>Report info will be listed here.</b></div>

    </body>
    </html>

The issue you are having is you try to select the hidden input from their id, but the first parameter of the function DateInput is the name of the field. 您遇到的问题是您尝试从其ID中选择隐藏的输入,但是函数DateInput的第一个参数是字段的名称。

So you must change the lines : 因此,您必须更改以下行:

var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;

by : 创建人:

var startDate = document.getElementsByName('startDate')[0].value;
var endDate = document.getElementsByName('endDate')[0].value;

Be careful if you have multiple fields with the same name this might not return the field you want, note the [0], 请注意,如果您有多个具有相同名称的字段,这可能不会返回您想要的字段,请注意[0],

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM