Question

I have a ext series of functions attached to a “onClick” handler that appear to be badly broken in IE 8

I have an html submit button inside a form.

 <input id="myButton1 type="submit"> 

I do an Ext.get on the button ID

 var myButtonJS =Ext.get(myButton1);

I atttach the onClick as follows

  myButtonJS.on('click',function ()....)

In firefox 4 either a click on the button or pressing enter triggers the submit and the onClick. It works as expected every time in FF.

the onClick triggers a loop which polls a status bar that displays the progress of the submit process. onClick does not retrun a value it only acts as a trigger.

If I Change the the onClick to Submit then neither FF or IE triggers the js .

In IE 8 Clicking on the button triggers the onClick but not the submit and pressing enter triggers only the submit and not the onClick….changing from compatibility mode to quirks mode has no effect.

JSFiddle version of the code Fiddle

Could someone point out how to bring IE to heel and not break the working Firefox ?

Answer 1

I’m not very familiar with extJS, but here are my thoughts:

• Are you returning a true/false value on the onclick? (I have no idea
  what the purpose for the onclick is, I take it’s for validation.)

• Submitting with ENTER key will occur for all the browsers, you might
  want to change the event to onSubmit, then do you javascript and submitting the form using document.forms["myform"].submit();

• If you still want to use the onClick, make sure your are submitting
  the form if the javascript click code is allowing the user to submit
  form using the above snippet.

Let me know if this helped you.

UPDATE

See updated working link : http://fiddle.jshell.net/QzMVH/5/

Your problem was that your progress bar tag was a <p> tag instead of a <div> . Change it and it should work fine.