button click function not working on IE?

Question

Hi, I have the code below and everything works but the button click function on IE I have played around and still cannot seem to get it working.

$(document).ready(function() 
{
$("img").hide();
$("#logo").show();
document.getElementById("fname").focus();
$(".button").click(function() 
{    
 postdata();
});    

})

function postdata()
{   

var parameters = 'fname=' + document.getElementById("fname").value + '&lname=' + document.getElementById("lname").value;
httpxml.onreadystatechange = stateck;  
httpxml.open('POST', '../checking/submitcheck.php', true);
httpxml.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
httpxml.setRequestHeader('Content-Length', parameters.length);
httpxml.send(parameters);

function stateck() 
{

if(httpxml.readyState==4)

{ 
 if (httpxml.responseText.indexOf("Successful") >= 0)
 { 
        $("#result").show("slow");
  $("#result").html("Project request has successfully been sent");
  $("#result").removeClass("result_error");

 }
 else if (httpxml.responseText.indexOf("Fail") >= 0)
 {
  $("#result").html("One or more errors have occured, please fix and submit again");
  $("#result").addClass("result_error");
  $("#result").show("slow");    

 } 
}

} 
}

Any idea?

Thanks =)

edit: submit button code

<input type="submit" name="button" class="button" id="button" value="Submit" disabled="disabled" onclick="return false;" />

Answer 1

It isn't the button click that isn't working, but rather the code in the event handler.

Since you've decided to use jQuery there is no reason to prefer getElementById over the powerful jQuery selectors. Also, you shouldn't do the Ajax call the hard way, but rather use the $.post method. The problem you are experiencing probably has to do with the Ajax request code.

Answer 2

How are you constructing the object httpxml ? Are you ensuring that you're using new ActiveXObject("Microsoft.XMLHTTP") for IE (and not new XMLHttpRequest())?

Answer 3

Since you're already using jQuery you might as well go all the way with it...

Try changing your postdata() function to this...

function postdata(){
  $.ajax({
    type: "POST",
    dataType: "text",
    url: "../checking/submitcheck.php",
    data: "fname=" + $("#fname").val() + "&lname=" + $("#lname").val(),
    cache: false,
    success: function(resp){
      if (resp.indexOf("Successful") >= 0){
        $("#result").show("slow");
        $("#result").html("Project request has successfully been sent");
        $("#result").removeClass("result_error");
      }
      else if (resp.indexOf("Fail") >= 0){
        $("#result").html("One or more errors have occured, please fix and submit again");
        $("#result").addClass("result_error");
        $("#result").show("slow");                            
      }
    }
  });
}

This way jQuery takes care of all the browser checking for you and creates the proper object for making the http post. Look here for more details about it http://docs.jquery.com/Ajax/jQuery.ajax#options

If you're not going to reuse the postdata() function anywhere else there isn't any reason you couldn't just put all of the above code into the anonymous function declared for the $(".button").click() event.

Answer 4

test in this way, because it may be that the problem is not in the click event

Javascript:

$("#myForm").bind("submit", function(ev) { return false; } );

$("#button").click(function(ev) {
   ev.stopPropagation();
   try{
     postdata();
   }
   catch(ex){
     $("#debug").append("<div>"+ex.description+"</div>");
   }
});

HTML:

<form id="myForm">
...
  <input type="submit" name="button" class="button" id="button" value="Submit" disabled="disabled" />

...
</form>

<pre id="debug"></pre>