Internet Explorer ajax problems when form is submitted.

I have an html form with an input box and select boxes that represent start and end dates with day month and year.  When submit button is selected, I'm using ajax to display users selection below the form.  This is working in all other browsers except Internet Explorer versions.  I have included my code below.  The test.php file is a separate file.

This is my ajax function:

function loadXMLDoc(symbol,year,month,day,endyear,endmonth,endday)
{
var xmlhttp;

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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
 
xmlhttp.open("POST","test.php?s="+symbol+"&y="+year+"&m="+month+"&d="+day+"&ey="+endyear+"&em="+endmonth+"&ed="+endday+"&date="+new Date().getTime(),true);
xmlhttp.send();
}


This is the form:

<form action="" >
                           
        
<?php         
      $html = " ";


$html .= "      <table style='text-align:center; font-size:14px; width:500px;' id='tablesorter' class='tablesorter' border='1' cellpadding='0' cellspacing=''>
              <tr style='width:200px;'>
                <td style='background-color:#e6EEEE; text-align:left'>Enter Symbol:</td>
                <td><input height='30' size=35 name='symbol'></input></td>

            </tr>

        <tr style='width:200px;'>
            <td style='background-color:#e6EEEE; text-align:left;'>Start Date:</td>
            <td>
            <select name='month'>
                  <option>June</option>
                  <option value='January'>January</option>
                  <option value='February'>February</option>
                  <option value='March'>March</option>
                              </select>

            <select name='day'>
                  <option>15</option>
                  <option value='1'>1</option>
                  <option value='2'>2</option>
                              </select>

            <select name='year'>
                  <option>1970</option>
                  <option value='2012'>2012</option>
                  <option value='2011'>2011</option>
                  <option value='2010'>2010</option>
                            </select></td></tr>

        </tr>      
        <tr>
            <td style='background-color:#e6EEEE; text-align:left;'>End Date:</td>
            <td>
            <select name='endmonth'>
            <option>$list[1]</option>
                  <option value='January'>January</option>
                  <option value='February'>February</option>
                  <option value='March'>March</option>
                              </select>

            <select name='endday'>
                  <option>$list[2]</option>
                  <option value='1'>1</option>
                  <option value='2'>2</option>
                              </select>
     
            <select name='endyear'>
                  <option>$list[0]</option>
                  <option value='2012'>2012</option>
                  <option value='2011'>2011</option>
                  <option value='2010'>2010</option>
                          </select></td>

        </tr>
              </table>
<div id=\"myDiv\">Replace this text</div>

<table><tr>

      <td><button type=\"button\" onclick=\" loadXMLDoc(symbol.value, year.value,month.value,day.value,endyear.value,endmonth.value,endday.value) \">Get Answer</button>      </td>

   </table>
   </form>";
   
print $html;  



This is the test.php file:


<?php

   $stock = strtoupper($_GET["s"]);
   $year = $_GET["y"];
   $month = $_GET["m"];
   $day = $_GET["d"];
   $endyear = $_GET["ey"];
   $endmonth = $_GET["em"];
   $endday = $_GET["ed"];

?>
dmalovichAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
I downloaded your code and checked and you're right.  I even shuffled your code around and anything without a 'value' does not get returned in IE8.

The standard http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.6 says that the content should be used if there is no 'value' specified.  But if you want to support IE, you need to put values in every 'option' even if it is blank like "".  All of my forms with <select> have values for All <options> and this is actually the first time I've seen anyone Not do that.
0
 
Dave BaldwinFixer of ProblemsCommented:
You are formatting it as a GET, not a POST.  A GET has the data in the URL and POST doesn't.  Maybe this will work.

xmlhttp.open("GET","test.php?s="+symbol+"&y="+year+"&m="+month+"&d="+day+"&ey="+endyear+"&em="+endmonth+"&ed="+endday+"&date="+new Date().getTime(),true);

Open in new window


These pages http://www.javascriptkit.com/dhtmltutors/ajaxgetpost.shtml  show the difference between the methods and the required code.
0
 
Lalit ChandraCommented:
Why don't you use JQuery, as this will take care of this type of Browser-Dependent stuffs.
Your can simple code to take the value like
var year = $("#year").val()  // value from the year select dropdown box.

then after simply use

$.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,    
        cache: false,
        success: function (html) {  
                    //do work when ajax call is success.
        }      
    });

you can take a reference from the below link
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
dmalovichAuthor Commented:
Changing POST to GET didn't work.  

Wat do I need to  add/replace in my code for JQuery solution?
0
 
dmalovichAuthor Commented:
If you try out my code you will notice that IE does not recognize your inputs unless you select a value from each select box and then click 'Get Answer'.  All other browsers are able to get the values by just clicking 'Get Answer'.
0
 
dmalovichAuthor Commented:
Awesome.  That was it.  I missed that.  Thank you so much.....
0
 
Dave BaldwinFixer of ProblemsCommented:
You're very welcome!  Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.