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 believe 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 onclicks 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.

If you reduce your goStep3 function down to just the form submission, what happens? — Zoidberg
– Zoidberg, Commented Dec 16, 2009 at 15:36
edited to include that information. It is almost like the 'onclick' is somehow triggering all of the 'onclick's on the whole page... — user103219
– user103219, Commented Dec 16, 2009 at 15:46
Can you post more of the code from the goStep3() function. I have done some testing based on the code that you have presented here and I cannot reproduce your results. Are you using any javascript frameworks such as jQuery or Prototype? — Kyle Gibbons
– Kyle Gibbons, Commented Dec 16, 2009 at 15:47
How are you determining that "and it still does not submit until running through all of the other 'onclick' s on the page."? It is hard for us to understand exactly what is happening here. — Kyle Gibbons
– Kyle Gibbons, Commented Dec 16, 2009 at 15:56
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 .. — Madi D.
– Madi D., Commented Dec 16, 2009 at 16:12

Alex · Accepted Answer · 2020-10-27 08:40:26Z

1

"posting my earlier comment as an answer"

I see a lot 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

edited Oct 27, 2020 at 8:40

Alex

1,6101 gold badge16 silver badges27 bronze badges

answered Dec 17, 2009 at 7:25

Madi D.

1,9905 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Gibbons · Accepted Answer · 2009-12-16 15:48:31Z

0

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

answered Dec 16, 2009 at 15:48

Kyle Gibbons

4502 gold badges9 silver badges20 bronze badges

2 Comments

bobince Over a year ago

It's stopping the link to # being followed, making the page jump and potentially stopping the navigation. It must be left in.

Kyle Gibbons Over a year ago

Oh right, that makes sense now that I think about it. The answer below referencing "javascript:void(0)" would solve that.

Hiyasat · Accepted Answer · 2009-12-16 15:59:21Z

0

try changing

 href="#"

with

 href='javascript:void(0)' .

edited Dec 16, 2009 at 15:59

answered Dec 16, 2009 at 15:48

Hiyasat

8,9667 gold badges36 silver badges60 bronze badges

1 Comment

user103219 Over a year ago

Sorry this doesn't make any effect either.

Paul Lammertsma · Accepted Answer · 2009-12-16 16:23:02Z

0

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.

answered Dec 16, 2009 at 16:23

Paul Lammertsma

38.4k17 gold badges139 silver badges190 bronze badges

5 Comments

user103219 Over a year ago

Sorry I did not write the code, I have just been tasked with attempting to fix. Your method is returning 'Object Expected' in the query-1.2.3 file and 'Object doesn't support this property or method' in goStep3()

Paul Lammertsma Over a year ago

The form element can't be found. You are receiving this error because you can't reach .action on a missing object. Consider giving the form element an id attribute and referencing it in that manner.

user103219 Over a year ago

Ok this line document.FindForm.submit(); is used multiple places and works. In Fact, the form is <form name="FindForm" id="search_form" action="/find/step2" method="post">

Paul Lammertsma Over a year ago

Out of curiosity, what happens if you reference it using $("#search_form") (as opposed to $("form:FindForm"))?

user103219 Over a year ago

it submits to itself - as it is currently sitting on /find/step2

user103219 · Accepted Answer · 2009-12-17 02:03:06Z

0

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;       
}

answered Dec 17, 2009 at 2:03

user103219

3,21911 gold badges41 silver badges51 bronze badges

Collectives™ on Stack Overflow

Onclick JavaScript not working properly in IE

5 Answers 5

Comments

2 Comments

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related