Onclick javascript not working properly in IE

Question

Please excuse my ignorance I am not very familiar with Javascript and have been tasked with repairing a bug by a developer no longer at the company.

The onclick works perfectly in FireFox, however in IE 7&8 (the only ones we test for), it appears to run through the onclick functions properly, then instead of the data being submitted to the form URL in goStep3(), it runs through every onclick on the page, with 'href="#"' then finally submits with incorrect information as the variable has been overwritten 50 times.

<a href="#" onclick="trackSponsor(62, 64265); goStep3(1896, 64265, 0); return false;">view</a>

EDIT: When I run trackSponsor(62, 64265); goStep3(1896, 64265, 0); return false; in the Developer Tools in IE8 I get an error of returning false outside of a function....removing that it works just fine.

Is the line that I belive is causing the problems

trackSponsor() is working properly and returns false

goStep3() is quite a large function however it works by retrieving values from 4 other functions within, assigning the values to a URL within theAction

It completes the function by EDIT:

var yr = $("#find-yr").attr('value');
var me = $("#find-me").attr('value');
var mo = $("#find-mo").attr('value');
var keywords = $("#find-keywords").attr('value');
var theAction = PATH_BASE+'find/step3/'+p_term+'/'+p_id+'/'+p_l_id+'/';

document.forms['FindForm'].action = theAction;
document.FindForm.submit(); 
return true;

I have tried returning false from this function, as well as changing the document.FindForm.submit() to the 'correct' syntax of document.forms['FindForm'].submit() and it still does not submit until running through all of the other 'onclick' s on the page.

Thanks in advance!

Notes:

jQuery is being used as well.

Javascript is not throwing any errors.

This works fine in FireFox

I can see it going through all of the other functions in the other 'onclick's using Developer Tools and stepping through the page it does not submit the results of goStep3 until it has gone through all of the other 'onclick' functions on the page.

Answer 1

I would start by removing "return false;" from the onClick event since it really isn't doing anything.

Answer 2

try changing

 href="#"

with

 href='javascript:void(0)' .

Answer 3

I can't say for sure where things are going wrong, but I discourage using a form's name attribute to reference it like you have done here:

document.forms['FindForm'].action = theAction;
document.FindForm.submit();

Why not try the following jQuery:

$("form:FindForm").action = theAction;
$("form:FindForm").trigger("submit");

You should also check that $("form:FindForm") is indeed referencing the desired form element.

Answer 4

The problem was called because of how IE uses the bubble! Thanks all for your help, I have included the code solution to be placed in goStep3().

    var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
 window.event.cancelBubble = true;  
}

Answer 5

"posting my earlier comment as an answer"

i see alot of Jquery being used with attribute selectors, so plz check the code against those..

EDIT:

i noticed ur unfamiliar with Javascript.. so in-case u didnt know, a jQuery selector, will select all tags matching a certain "selector-filter" and perform a certain action on them... so if there is a selector that selects all A tags with a href attribute (or maybe another common attribute between them..) then that would be the cause of your problem .

EDIT: -after you posted your answer -

glad you found an answer..

though it is alittle werid, cause according to your question it goes through "every element with href="#" ..

However According to msdn, Event bubbling simply passes these unhandled events to the parent element for handling. not through "similar" tags :)

oh well..nothing is logical when it comes to IE