/    Sign up×
Community /Pin to ProfileBookmark

Radio Button tabbing sequence using cloneNode

Copy linkTweet thisAlerts:
Jun 27.2006

Good Morning All…

Looking for some guidance here on cloning. We got an app with many form fields, some displayed/hidden depending on what is selected, that our users can go into and make many changes. We don’t save the changes unless the “Save” is selected, otherwise, the form reverts back to the old values. Trying to be lazy on this side, and make remember all the values that saved as easy as possible, and can be plugged into different apps. First attempt was

cloneDiv = document.getElementByID(“formDiv”).cloneNode(true);
replaceDiv = document.getElementById(“formDiv”).replaceNode(cloneDiv);

but with that, it did not seem to “remember” what radio button in the group was selected, or what value was selected in a drop down. As we only use IE 6 here, the next method that seemed to work originally was using

cloneDiv = document.getElementByID(“formDiv”).cloneNode(false);
cloneDiv.insertAdjacentHTML(“beforeEnd”,document.getElementById(“divForm”).innerHTML);
replaceDiv = document.getElementById(“formDiv”).replaceNode(cloneDiv);

The values were remember, but then I ran into tabbing issue. As we have 508/usability to be concerned with, kind of important. After the section is replaced, when tabbing to the radio buttons from the top or bottom, if the middle radio is selected, it will not tab directly to that radio, but instead, to either the top button, or the bottom button in the group depending on the direction one is tabbing. Been playing with it long enough that I know it is time to look elsewhere for help. Here is a sample that I have been playing with, much more scaled down than our actual form. Any help would be appreciated!

Thanx in advance

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Typ!” content=”text/html; charset=iso-8859-1″ />
<title>Cloning Test</title>
<script language=”javascript” type=”text/javascript”>
function domClone() {
clonedDiv = document.getElementById(“cloneThis”).cloneNode(true);
replaceDiv = document.getElementById(“cloneThis”).replaceNode(clonedDiv);
document.all.heading1.focus();
}
function domInnerClone() {
clonedDiv = document.getElementById(“cloneThis”).cloneNode(false);
clonedDiv.insertAdjacentHTML(“beforeEnd”,document.getElementById(“cloneThis”).innerHTML);
replaceDiv = document.getElementById(“cloneThis”).replaceNode(clonedDiv);
document.all.heading1.focus();
}
function disableDropDowns(radioID) {
document.all.select1.disabled = (radioID == “radio3”) ? false : true;
document.all.select2.disabled = (radioID == “radio4”) ? false : true;
document.all.select3.disabled = (radioID == “radio5”) ? false : true;
document.all.select4.disabled = (radioID == “radio5”) ? false : true;
document.all.text1.disabled = (radioID == “radio6”) ? false : true;
document.all.text2.disabled = (radioID == “radio7”) ? false : true;
}
</script>
</head>

<body onload=”document.all.heading1.focus();”>
<div id=”heading1″ tabindex=”0″>CloneTest</div>
<br />
<div id=”cloneThis”>
<input type=”radio” name=”myRadio” checked=”checked” id=”radio1″ onClick=”document.all.button2.style.backgroundColor = ‘blue’; disableDropDowns(this.id)” /><label for=”radio1″>Make Button 2 Blue</label>
<br />
<input type=”radio” name=”myRadio” id=”radio2″ onClick=”document.all.button2.style.backgroundColor = ‘red’; disableDropDowns(this.id)”/><label for=”radio2″>Make Button 2 Red</label>
<br />
<input type=”radio” name=”myRadio” id=”radio3″ onclick=”disableDropDowns(this.id)” /><label for=”radio3″>Radio 3</label>
<label for=”select1″>Select 1</label>
<select name=”select1″ id=”select1″ disabled=”disabled”>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
<option value=”3″>Option 3</option>
<option value=”4″>Option 4</option>
<option value=”5″>Option 5</option>
<option value=”6″>Option 6</option>
<option value=”7″>Option 7</option>
<option value=”8″>Option 8</option>
<option value=”9″>Option 9</option>
<option value=”10″>Option 10</option>
</select>
<br /><br />
<input type=”radio” name=”myRadio” id=”radio4″ onclick=”disableDropDowns(this.id)” /><label for=”radio4″>Radio 4</label>
<label for=”select2″>Select 2</label>
<select name=”select2″ id=”select2″ disabled=”disabled”>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
<option value=”3″>Option 3</option>
<option value=”4″>Option 4</option>
<option value=”5″>Option 5</option>
<option value=”6″>Option 6</option>
<option value=”7″>Option 7</option>
<option value=”8″>Option 8</option>
<option value=”9″>Option 9</option>
<option value=”10″>Option 10</option>
</select>
<br /><br />
<input type=”radio” name=”myRadio” id=”radio5″ onclick=”disableDropDowns(this.id)” /><label for=”radio5″>Radio 5</label>
<label for=”select3″>Select 3</label>
<select name=”select3″ id=”select3″ disabled=”disabled”>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
<option value=”3″>Option 3</option>
<option value=”4″>Option 4</option>
<option value=”5″>Option 5</option>
<option value=”6″>Option 6</option>
<option value=”7″>Option 7</option>
<option value=”8″>Option 8</option>
<option value=”9″>Option 9</option>
<option value=”10″>Option 10</option>
</select>
<label for=”select4″>Select 4</label>
<select name=”select4″ id=”select4″ disabled=”disabled”>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
<option value=”3″>Option 3</option>
<option value=”4″>Option 4</option>
<option value=”5″>Option 5</option>
<option value=”6″>Option 6</option>
<option value=”7″>Option 7</option>
<option value=”8″>Option 8</option>
<option value=”9″>Option 9</option>
<option value=”10″>Option 10</option>
</select>
<br /><br />
<input type=”radio” name=”myRadio” id=”radio6″ onclick=”disableDropDowns(this.id)” /><label for=”radio6″>Radio 6</label>
<label for=”text1″>TextBox 1</label> <input type=”text” name=”text1″ id=”text1″ value=”Text 1″ disabled=”disabled” />
<br /><br />
<input type=”radio” name=”myRadio” id=”radio7″ onclick=”disableDropDowns(this.id)” /><label for=”radio7″>Radio 7</label>
<label for=”text2″>TextBox 2</label> <input type=”text” name=”text2″ id=”text2″ value=”Text 2″ disabled=”disabled” />
<br /><br />
<input type=”button” name=”button1″ value=”button1″ id=”button1″ /> <input type=”button” name=”button2″ value=”button2″ id=”button2″ style=”background-color:blue; color:white;” />
</div>
<br />
<div>
<input type=”button” name=”domCloneButton” value=”Clone Using DOM” onclick=”domClone()”/>
<input type=”button” name=”domInnerButton” value=”Clone Using DOM and innerHTML” onclick=”domInnerClone();” />
<input type=”button” name=”reloadButton” value=”Reload Page” onclick=”window.location.reload();” />
</div>
</body>
</html>

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 27.2006 — Trying to be lazy on this side...[/QUOTE]
Stop trying to be so lazy. ? At least, start being lazy in a different direction... A single function, on load, can save all of the current values in the form using a single loop on the form's [b]elements[/b] colleciton. Another on-demand function can restore all of those values using another of the same loops.
Copy linkTweet thisAlerts:
@wembly71authorJun 27.2006 — Well, sometimes I can be the type of person that works harder at avoiding work then doing the work :rolleyes:

There are sections in the form that are whole div blocks that are displayed/shown depending on other items. Let us say that in my above example, that clicking radio2 hid the 2 bottom radios and their associated text boxes. If save is not clicked, I would need to reset whichever radio was loaded, and then reset the properties of the div to be shown again. There is where the cloning would have been ideal, if there were 30 divs, in addition to the form field values, a couple of lines of code verses a loop.

Thanx for the reply though; ?
Copy linkTweet thisAlerts:
@phpnoviceJun 27.2006 — Except the loop is more reliable. ?
Copy linkTweet thisAlerts:
@felgallJun 27.2006 — Don't use document.all either as that was only required by IE4 and is only understood by some modern browsers. All version 5+ browsers understand document.getElementById
Copy linkTweet thisAlerts:
@phpnoviceJun 27.2006 — Don't use document.all either as that was only required by IE4 and is only understood by some modern browsers. All version 5+ browsers understand document.getElementById[/QUOTE]
No real overriding reason for that piece of advice -- just make-work. :rolleyes:
As we only use IE 6 here...[/QUOTE]
IE still understands the [b]all[/b] collection and [b]all[/b]ways will. ?
×

Success!

Help @wembly71 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...