Javascript problem with submit buttons placed close to each other

[spiritualghost]

Exclamation Javascript problem with submit buttons placed close to each other

Please have a look at the page here. Below is a screenshot where the problem lies:



As you can see, there are two buttons which have been called by a javascript here. Both have been coded to redirect to different pages. However, when I hover my mouse on the Regret button it automatically highlights both buttons and when I click regret it redirects to the page where the Confirm button is supposed to redirect. The Confirm button itself is working fine and taking me to the desired page.

Can't figure out where the problem is with the Regret button. Any help will be much appreciated. Basically each button should redirect only to where it is supposed to as I've specified in the Javascript code.

Disclaimer: I am absolutely noob with Javascript

[anarch]

lets see some code! what do you mean "hover"-what does hover have to do with anything? surely you're not using onhover for user input of a button...

it shouldn't be more complicated than
<input type=button onclick(window.location.href = **new location**) /> for each button set to different "new locations"

[chris.upjohn]

This isn't a javascript issue but a HTML issue, in your source you have a label that wraps both the text and input buttons. If this remove this label it will work normally.

[anarch]

sorry, it's not my problem Sgt but what do you mean label? are you talking about "name=" or a div ID?

Why would either of those attributes changed the functionality of onclick()?

[chris.upjohn]

sorry, it's not my problem Sgt but what do you mean label? are you talking about "name=" or a div ID?

Why would either of those attributes changed the functionality of onclick()?

This is his page source in Firebug

<label class="formFieldQuestion"><h3>I would like to <input type="button" onclick="document.location = 'http://audiquattrofinal.tigersportsmarketing.com/attending/index.html';" value="Confirm"> / <input type="button" onclick="document.location = 'thankyou.html';" value="Regret"> my participation in the Audi quattro Cup 2011 - India Finals</h3></label>

His HTML is wrapped by a label element which by default gets event handlers set by the browser and anything inside it gets rendered useless unless you absolutely position it on the page.

[spiritualghost]

This isn't a javascript issue but a HTML issue, in your source you have a label that wraps both the text and input buttons. If this remove this label it will work normally.

Thanks a ton I removed the label class and its working fine now! I was going mad trying to figure out what went wrong

lets see some code! what do you mean "hover"-what does hover have to do with anything? surely you're not using onhover for user input of a button...

Actually yes the hover has nothing to do with it. But I noticed that when you hover the mouse on a button there is a light blue highlight on it. Now when I was hovering the mouse on the "Regret" button it was highlighting both the buttons instead of one. Now its been resolved and only the relevant button is being highlighted on hover. Phew

[chris.upjohn]

No problem, the most simple issues will and can give you a bigger headache then then want.

[spiritualghost]

True.

PS: I am loving Sitepoint I'll be more regular here! Seeing great guys who really know their stuff!!

[anarch]

oooh that label... bahaha i didn't even know there was label tag in html.

I didn't know there was source included but I suppose searching for his words in the screenshot would of made it easy to find :-P

spiritualghost - get firebug!! after developing in pre-dynamic html, firebug-like plugins or programs are a god send!

[spiritualghost]

oooh that label... bahaha i didn't even know there was label tag in html.

I didn't know there was source included but I suppose searching for his words in the screenshot would of made it easy to find :-P

spiritualghost - get firebug!! after developing in pre-dynamic html, firebug-like plugins or programs are a god send!

Thanks for the tip. I'll get it.

[chris.upjohn]

oooh that label... bahaha i didn't even know there was label tag in html.

I'm a front end web developer by trade so i have to know these things

I didn't know there was source included but I suppose searching for his words in the screenshot would of made it easy to find :-P

There wasn't, he included a link within his post which allowed me to see the source.

spiritualghost - get firebug!! after developing in pre-dynamic html, firebug-like plugins or programs are a god send!

I second this, Firebug is the most powerful web development tool for Firefox and i haven't looked back on any other since.