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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
dmalovichAuthor Commented:
Changing POST to GET didn't work.  

Wat do I need to  add/replace in my code for JQuery solution?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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
Dave BaldwinFixer 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

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.