Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Internet Explorer ajax problems when form is submitted.

Posted on 2012-03-25
7
Medium Priority
?
245 Views
Last Modified: 2012-06-27
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
Comment
Question by:dmalovich
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37763425
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37763462
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
 

Author Comment

by:dmalovich
ID: 37763488
Changing POST to GET didn't work.  

Wat do I need to  add/replace in my code for JQuery solution?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:dmalovich
ID: 37763738
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
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 37763792
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
 

Author Closing Comment

by:dmalovich
ID: 37763794
Awesome.  That was it.  I missed that.  Thank you so much.....
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37763825
You're very welcome!  Thanks for the points.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question