• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

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"];

?>
0
dmalovich
Asked:
dmalovich
  • 3
  • 3
1 Solution
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now