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
Solved

Internet Explorer ajax problems when form is submitted.

Posted on 2012-03-25
7
241 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
  • 3
  • 3
7 Comments
 
LVL 83

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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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 83

Accepted Solution

by:
Dave Baldwin earned 500 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 83

Expert Comment

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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can i turn the array into an object 4 39
jQuery Dialog Autoresize Bug 2 24
Head to not include on scroll 4 23
multiple selects 23 48
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

809 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