DOM onclick action

[redpixel]

Hello everyone,

I'm a fairly new to javascript and I need some help regarding element
IDs.
What I need is a simple javascript action that is attached to a
checkbox that upon checking and unchecking changes the id= attribute of
the button named search (name="search")

initially the button is checked and id should be set at "searchbutton"
(id="searchbutton")
when the checkbox is unchecked I want id of that button to change:
id="button".

I searched the web for few hours and haven't found any examples.
here's my approximate scenario

if (document.myform.mycheckbox.checked == true) {
somehow change button.id to "searchbutton" }
else if (document.myform.mycheckbox.checked == false)
change button.id to "button" }

I'm not even sure if changing id of the element is possible since I was
trying to use getElementById and then the ID changes.

Any suggestions? If possible a short example is appreciated.

Regards,

Peter

[RobG]

redpixel wrote:

Hello everyone,

I'm a fairly new to javascript and I need some help regarding element
IDs.
What I need is a simple javascript action that is attached to a
checkbox that upon checking and unchecking changes the id= attribute of
the button named search (name="search")

I am completely at a loss as to why you want to do that, but anyway...

initially the button is checked and id should be set at "searchbutton"
(id="searchbutton")
when the checkbox is unchecked I want id of that button to change:
id="button".

I searched the web for few hours and haven't found any examples.
here's my approximate scenario

if (document.myform.mycheckbox.checked == true) {
somehow change button.id to "searchbutton" }
else if (document.myform.mycheckbox.checked == false)
change button.id to "button" }

Guessing that the "search" button is in the same form (and wrapping for
posting):

document.myform.search.id =
(document.myform.mycheckbox.checked)? 'searchbutton' : ' button';

I'm not even sure if changing id of the element is possible since I was
trying to use getElementById and then the ID changes.

Why you want to change it? An element's id property is accessible and
changeable as a normal JavaScript object property using either dot or
square bracket notation. You could also use setAttribute, but it is
buggy in some browsers.

If you don't know which ID to use to get a reference to the element
known occasionally as 'searchbutton' and otherwise as 'button, you could
try:

var buttonRef;
if (document.getElementById('searchbutton')){
buttonRef = document.getElementById('searchbutton');
} else {
buttonRef = document.getElementById('button');
}

Which can be shortened to:

var buttonRef = (document.getElementById('searchbutton') ||
document.getElementById('button'));
--
Rob

[redpixel]

RobG wrote:

redpixel wrote:

Hello everyone,

I'm a fairly new to javascript and I need some help regarding element
IDs.
What I need is a simple javascript action that is attached to a
checkbox that upon checking and unchecking changes the id= attribute of
the button named search (name="search")

I am completely at a loss as to why you want to do that, but anyway...

initially the button is checked and id should be set at "searchbutton"
(id="searchbutton")
when the checkbox is unchecked I want id of that button to change:
id="button".

I searched the web for few hours and haven't found any examples.
here's my approximate scenario

if (document.myform.mycheckbox.checked == true) {
somehow change button.id to "searchbutton" }
else if (document.myform.mycheckbox.checked == false)
change button.id to "button" }

Guessing that the "search" button is in the same form (and wrapping for
posting):

document.myform.search.id =
(document.myform.mycheckbox.checked)? 'searchbutton' : ' button';

I'm not even sure if changing id of the element is possible since I was
trying to use getElementById and then the ID changes.

Why you want to change it? An element's id property is accessible and
changeable as a normal JavaScript object property using either dot or
square bracket notation. You could also use setAttribute, but it is
buggy in some browsers.

If you don't know which ID to use to get a reference to the element
known occasionally as 'searchbutton' and otherwise as 'button, you could
try:

var buttonRef;
if (document.getElementById('searchbutton')){
buttonRef = document.getElementById('searchbutton');
} else {
buttonRef = document.getElementById('button');
}

Which can be shortened to:

var buttonRef = (document.getElementById('searchbutton') ||
document.getElementById('button'));
--
Rob

Thank you Rob!

Your advice with

document.myform.search.id =
(document.myform.mycheckbox.checked)? 'searchbutton' : ' button';

was enough to make the form working.
The reason I wanted to change id of the submit button is because
"searchbutton" was the id to use with ajax live-search. but the script
was constructed in the unobstrusive manner, to demonstrate that normal
$_GET through url can be used when ajax live-search is disabled.
Changing button ID to something else (like "button") would stop ajax
from executing live search and page would reload giving search results.
Thanks for your help.

Peter