SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple AJAX calculator not working in IE

    I'm building my first AJAX gizmo at http://www.-.com/

    It's working really well in Firefox and Safari, but not in any version of IE. Oddly, if you don't fill out the form correctly, IE will still dynamically show my error messages, but when you do fill out the form, IE just says "error on page". Can anyone help me locate the problem? I figure it can't be in my .php processor because that is server side. Here is the javascript I'm using:

    Code:
    function submitForm()
    {
    
    try {
         // Try to create object for Firefox, Safari, IE7, etc.
         var http = new XMLHttpRequest();
       }
       catch (e) {
         try {
           // Try to create object for later versions of IE.
           var http = new ActiveXObject('MSXML2.XMLHTTP');
         }
         catch (e) {
           try {
             // Try to create object for early versions of IE.
             var http = new ActiveXObject('Microsoft.XMLHTTP');
           }
           catch (e) {
             // Could not create an XMLHttpRequest object.
           } 	
    	 }
       }
    
    for (var i=0; i < document.taxcalculator.status.length; i++)
     {
     if (document.taxcalculator.status[i].checked)
    	{
    	var status = document.taxcalculator.status[i].value;
    	}
     }
    var income = document.taxcalculator.income.value;
    
    var url = "http://www.-.com/";
    var params = "status=" + status + "&income=" + income;
    http.open("POST", url, true);
    
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    
    http.onreadystatechange = function() {//Call a function when the state changes.
    	if(http.readyState == 4 && http.status == 200) {
    		var display = document.getElementById("display_tax");
    		display.innerHTML = http.responseText;
    	}
    }
    http.send(params);
    }
    Last edited by volare; Mar 5, 2008 at 15:26.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another small issue I'm having: If I press enter after completing the form instead of clicking on submit, the whole page clears and reloads instead of processing the form. I image there is a simple fix for this but I don't know javascript very well yet.

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Yes I see that problem also in IE6 but I don't get an error message when fill the details correctly and hit calculate....just nothing. You might want to put some alert()s in the js code to see where it's choking.

    2. This is happening because you have a <form> which you are <submit>ting, but you intercept the onclick and handle it via ajax, however the form still submits in some browsers and you get the page reload. Try:
    Code:
    onclick="submitForm();return false;"

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, jimfraser.

    I managed to get the page working in IE with some more testing. Turns out IE didn't like me adding <p> tags with AJAX, so I used <span> instead. I have no idea why.

    As for the problem with pressing enter, your code worked for Firefox. The page still reloads in IE though. Any other thoughts?

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe try adding
    onsubmit="return false;"

    to the <form> tag?

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, that stopped the refresh but it didn't process the form, so I tried

    onsubmit="submitForm();return false;"

    and that seems to work. And actually, it looks like I don't even need the onclick statement anymore. Thanks very much for your help!

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good stuff =)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •