Ajax trouble passing multiple form variables for dynamic PHP output

Question

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". When keeping with original sample and hard coding startDate & endDate, script performs perfectly. I then tried adding Jason Moon's calendar for startDate & endDate, having trouble passing variables. 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. 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>

Answer 1

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.

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],

Ajax trouble passing multiple form variables for dynamic PHP output

Question

1 answers

solution1
0 2013-05-24 13:46:40

Ajax trouble passing multiple form variables for dynamic PHP output

Question

1 answers

solution1 0 2013-05-24 13:46:40

solution1
0 2013-05-24 13:46:40