PDA

View Full Version : [DHTML] Form Dependency Manager



Twey
07-30-2006, 01:36 AM
1) CODE TITLE:
Form Dependency Manager

2) AUTHOR NAME/NOTES:
Twey (http://www.twey.co.uk/)

3) DESCRIPTION:
A script to manage complex forms in which various elements depend on others. Inspiration: Paintball24 (http://www.dynamicdrive.com/forums/showthread.php?p=45539)

4) URL TO CODE:
http://www.twey.co.uk/?q=forms

shachi
07-30-2006, 06:29 AM
oh!!! Now that is nice, I have been searching something like this for ages, only I needed with text boxes. By the way what does the Bash Prompt designer do??;)

Twey
07-30-2006, 01:14 PM
I have been searching something like this for ages, only I needed with text boxes.Works with text boxes too :) It even works with <select>, so it can be used as a replacement for the Chained Selects script.
By the way what does the Bash Prompt designer do??Helps you design BASH prompts :p BASH has a variable called $PS1 that allows you to change its general-use prompt, either temporarily or permanently by putting it in your .bash_profile. The format for this is highly difficult to read, so I wrote that to allow me to design them more easily, with live previews and so on. I thought somebody else might find it useful too :)

ddadmin
08-01-2006, 09:06 PM
Definitely a nice script! I'm going to look at the feasibility of including it on DD later this week. Explaining how to use this script for newbies might be a bit of a challenge.

benslayton
08-02-2006, 01:25 AM
well can see the super secret hidden stuff by either looking at the source or by turning off the css style sheet in FF or opera

Twey
08-02-2006, 01:36 AM
I know -- the "super secret" was sarcasm. :)

It does say "not secure, of course" in the source.

ddadmin
08-09-2006, 09:10 PM
Ok, script posted to DD: http://www.dynamicdrive.com/dynamicindex16/formdependency.htm If there are any updates, please simply post a quick notification here so I can check it out. One thing I think that could be made more intuitive is the keyword "CONFLICT". I can see how people may not understand exactly what that means.

Twey
08-09-2006, 09:42 PM
Do you have a suggestion for a replacement keyword?

ddadmin
08-10-2006, 05:19 AM
Do you have a suggestion for a replacement keyword?

Hmmm perhaps "NOT"? I know, grammatically it would sound strange. Maybe "And NOT" hehe.

k0ldfuz10n
08-14-2006, 06:14 AM
Great piece of code, thanks!

Twey
08-14-2006, 06:41 AM
Nope, you're doing it right, but you need to specify values for those options if you want it to work in IE:
<td><select name=LoanPurpose>
<option value="" selected="selected">Select Loan Type</option>
<option value="Purchase">Purchase</option>
<option value="Refinance">Refinance</option>
</select></td>
Hmmm perhaps "NOT"? I know, grammatically it would sound strange. Maybe "And NOT" hehe.AND NOT x BEING y? :)
I'll sit down with a thesaurus after I get a few complaints. :p

tresamul
08-24-2006, 02:42 PM
Your Form Dependency Manager is a great tool but I need it to work with the Advanced Gallery Script (found at Dynamic Drive). I've tried making each <div> it's own form with the dependency script within but it doesn't work. If I make it all one form the dependency works but the advanced gallery doesn't. can you help me?

Twey
08-24-2006, 03:04 PM
Work with it how?

mburt
08-24-2006, 03:08 PM
I don't think the situation has been clear. I'm not sure either on what tresamul is trying to say.

tresamul
08-24-2006, 03:16 PM
Okay, I have two drop down menus, one is for wire transfer the other is for ACH transfers. I want to give my user the option of doing more than one transfer at a time, so I am allowing them to indicate how many transfer using another drop down menu which uses the Advanced Gallery script to redraw the page with the number of input field. I want them to also be able to chose whether they want to do wires or ACH transfers; this determines which drop down menu to display, I want to use form depoendecy for that part.

advanced gallery draws <div>s where I put the select inputs, I want form dependency to handle whether the ACH or the wire menu is display in the <div>s

maybe I need to post the web page for you to see, would that help?

mburt
08-24-2006, 03:21 PM
Ah, I see. And, yes. Posting the webpage would help a lot. But seeings it's Twey's script, you should wait for his answer.

Twey
08-24-2006, 03:31 PM
maybe I need to post the web page for you to see, would that help?It would definitely help. It sounds as though you're using a fairly modified version of the Advanced Gallery that may well be redundant. I'll have to see your page though.

tresamul
08-24-2006, 03:38 PM
http://www.indiana.edu/~iutreas/test/test-dynamic2.html
in this one, form dependency is working but advanded gallery is not

http://www.indiana.edu/~iutreas/test/TNT001-042.html
this advance gallery is working but I had to remove form dependency and just display both the ACH and the Wire selects.

Twey
08-24-2006, 08:02 PM
This is a simple case of onload confliction. Instead of
<script type="text/javascript">
window.onload = function() {
setupDependencies('dropmsgform'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>Use:
<script type="text/javascript">
function addEvent(el, ev, f) {
if(el.addEventListener)
el.addEventListener(ev, f, false);
else if(el.attachEvent)
el.attachEvent("on", ev, f);
else
el['on', ev] = f;
}

window.addEvent(window, 'load', function() {
setupDependencies('dropmsgform');
});
</script>

tresamul
08-25-2006, 03:44 PM
it still is not working: http://www.indiana.edu/~iutreas/test/test-dynamic2.html.

advanced gallery is working but it is displaying both select inputs.

I appreciate your help..............

Twey
08-25-2006, 04:22 PM
I'm not sure I understand entirely what you're getting at here. You only want one of the "Transaction," "ACH Model" selects to show?

How about you explain exactly what you want, and I'll set it up for you? :p That way we can probably drop the "advanced gallery" and a lot of the other stuff I see on that page, which doesn't seem to be used anywhere in particular.

blm126
08-25-2006, 04:24 PM
Correction: It is not working in Internet Explorer. Works fine in Firefox

mburt
08-25-2006, 05:07 PM
If I could I would replace every Internet Explorer browser on the planet with Firefox.... :)

tresamul
08-25-2006, 05:16 PM
In ff the form dependencies of ACH and Wire are working but the advanced gallery for the number of transactions is not.

when a user first pulls up this page they will select whether they are going to do ACH or Wires then select from the drop down menu how many transactions they intend to do. that's where I am using advanced gallery; it just redraws the page with the particular <div> subject (1 transaction, 2 transactions, 3 transactions, and so on) that the user selects.

I think what is happening is that when advanced gallery redraws the page it is not looking at whether the user has checked ACH or Wire. does that make sense? or maybe what is happening is that the browser runs the form dependency manager and ignores the advanced gallery.

I think I need to rethink this design.........

because now I'm confused.........

Twey
08-25-2006, 05:17 PM
Ah, that would explain it. It's probably something to do with the Gallery script; I'll have a go at implementing that purely with the Form Dependency script.

tresamul
08-25-2006, 05:36 PM
could I do that using a more complex boolean for form dependency? can I make a <div>'s class dependent on the transaction menu and the typetrans (ACH or Wire)?

Twey
08-25-2006, 05:54 PM
It might require some modification to the script (depends what's allowed inside a <label>, I can't remember precisely at the moment) but it shouldn't be too much of a problem.

Twey
08-27-2006, 05:09 PM
Update (http://www.twey.co.uk/?q=forms): Added "EMPTY" keyword at the behest of a user.

NGJ
09-13-2006, 12:31 PM
Hi Twey,

I am having difficulty when using the script in conjunction with another bit of code within my FORM....:

<input type="button" name="add" value="="
onClick="document.subINV.totalValue.value =
parseInt(document.subINV.totalQty.value) *
parseFloat(document.subINV.buy.value)";>

Basically, I am allowing the user to calculate a line value
(totalQty * buy)

... and see this displayed in another field (totalValue)

The above ceases to work when used with your Dependency script.

Can you please advise a workaround???

Thanks in advance,

N.

PS: The Dependency script is brill - thank you!!

Twey
09-13-2006, 05:13 PM
Hm, yes, it rather mercilessly slaughters any events on the controls. I'll fix it.

tresamul
09-13-2006, 06:45 PM
Well, I'm back

I have been able to get the form to work using only form dependency: http://www.indiana.edu/~iutreas/test/test-dependency2.htm

now, I need to get it to work with other scripts included. Each time I add a script function the form dependency breaks. here is a text file of the scripts I need to include:http://www.indiana.edu/~iutreas/test/script-inserts.txt

can you help out here?

Twey
09-13-2006, 08:41 PM
Hm, I see no problems there. Stick them all on the page, and I'll try to resolve the problems one by one.

tresamul
09-14-2006, 04:41 PM
I've added the scripts. Form dependency is still working; I swear it didn't work yesterday. the only other script that is working is the currency format function. I've double checked my syntax, so maybe the issue is with the other scripts. got any ideas?

resource4us
09-17-2006, 09:41 AM
I've got a "form in progress" and just can't seem to get it doing what I want it to. I thought this script would do the trick but it isn't...I'm using IE...is that the problem? The sample form isn't even working when I put it up. When the page loads it shows there is an error on the page and I don't have a clue what the error might be.

I have a printable version of the form I'm trying to make online functional if that would help you help me. And of course I can give you the link where I'm working on it. http://www.resource4us.net/uffapp.html

I have a lot more to learn about building sites and especially forms! Any help you can give this amateur will be greatly appreciated....

resource4us

P.S. I've got some other 'dreams' to make come true about my website and don't know how to make it reality...or if I can even afford to do what I want. Maybe I could get some advice?

Twey
09-17-2006, 10:04 AM
tresamul: Your problem, I believe, is the same as NGJ's. I'm working on it. :)

resource4us, you haven't followed the instructions properly. You still have:
<script type="text/javascript">
window.onload = function() {
setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>(yes, ddadmin misused "ie," not me :p). The word inside the quotes should be the name of the form to which you wish to apply dependency checking. If you don't want to name your form, I think you could use:
<script type="text/javascript">
window.onload = function() {
setupDependencies(0);
};
</script>... to simply work on the first form on the page, but I'm not sure about that.
P.S. I've got some other 'dreams' to make come true about my website and don't know how to make it reality...or if I can even afford to do what I want. Maybe I could get some advice?That's what we're here for :) Not in this thread, though.

Twey
09-17-2006, 10:56 AM
Update (http://www.twey.co.uk/?q=forms): Script no longer tramples mercilessly over existing events.

tresamul, NGJ, I believe this version should fix your problems.

I must say, I'm quite surprised how popular this has become, after I just threw it together on the spur of the moment. It's even found its way onto a (Turkish?) script directory (http://www.javascriptindir.com/Goster/1036) and possibly something called the SimpleSite Website building framework (http://64.233.183.104/search?q=cache:OVWvbahjFoEJ:dev.mistralys.com/SimpleSite/browser/trunk/ExampleSite/htdoc/skins/mistral/templates/frames/Main.tmpl%3Frev%3D1454+FormManager.js&hl=la&ct=clnk&cd=1&client=firefox-a).

resource4us
09-17-2006, 06:45 PM
Oh that was just me putting your example into my form for a test so you're right...I didn't change the form name. Now I've gone and gotten your updated version and put that on there...and I changed the form1Name down in the form itself to match the head script. It still isn't working for me (I'm sure its me not doing something right).

Okay...using the external file. Maybe I'm just really ignorant on how to use that. I simply uploaded the FormManager.js onto my server...is that right?

Once I get the sample working then I'll change the text for my form. Do you see on my form where you have the first section named 'Borrower' and then there is 'Co-Borrower'? I want to hide the 'Co-Borrower' until the user clicks the 'Yes' radio button. And I have 3 other sections where I want to do the same type of thing. In fact, in the other 3 areas I want the user to have the ability to add another identical form mutliple times if needed...ie: the Mortgages section...they fill out the first form for their primary mortgage, they have a 2nd mortgage to give info about so they see at the bottom of the first one "Add Another Mortgage" button and another identical mortgage form appears for them. Same type of thing for the Income and Creditors sections. See what I'm trying to do?
http://www.resource4us.net/uffapp.html

Thanks so much for your help...self taught amateur at work here.

resource4us

Twey
09-17-2006, 07:38 PM
<script type="text/javascript">
window.onload = function() { setupDependencies('form1Name'); }; </script> will suffice. The others were only for example.

Your page is highly invalid (http://validator.w3.org/check?uri=http%3a%2f%2fwww%2eresource4us%2enet%2fuffapp%2ehtml). I would strongly suggest correcting the errors on it (and preferably switching to HTML 4.01 Strict) before attempting to deploy any scripts. There is no guarantee that they will work on a badly-coded page.
Thanks so much for your help...self taught amateur at work here.Ditto :)

resource4us
09-18-2006, 04:14 AM
This is frustrating for me and I thank you for being so patient with me. I believe I got half of the problem resolved and am now stuck on trying to figure out what code is needed for the Character Encoding. My server uses Linux, I have CGI Access with PHP, Perl, & MySQL.

I see this code on my servers own site via view source:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > (at the very top before the html tag)
and this code:
< link rel="shortcut icon" href="http://www.freeservers.com/favicon.ico" >
< link rel="stylesheet" href="/fs_img/freeservers/images/style.css" type="text/css" > (in the head).

By coping the top one I eliminated most of the errors but now it is looking for the Character Encoding. I've tried to understand what is spoken about in the w3 FAQ's/help and searched through my servers help pages but I guess I don't have a good enough understanding. Can you help me with the most universal and compatible with my server code I need? My server >>> www.freeservers.com

I have also kind of re-done my basic blank page on a new file trying to figure this out. I THINK if I can get this page validated then I'll be able to proceed on with the Javascripts. www.resource4us.net/blank.html

(If this works, I'm going to have A LOT of files to change! LOL)

resource4us

Twey
09-18-2006, 06:21 AM
You should read the FAQ entry on character sets (http://validator.w3.org/docs/help.html#faq-charset).

resource4us
09-18-2006, 07:41 PM
I told you in the 3rd paragraph of my previous post that I had already done that...guess you didn't read it. When you haven't learned the meaning of all the words in any language, then there will be times when no matter how much you read the same sentence over and over again you will not understand it. Well...I haven't learned the meaning of all the words in the html language yet. I'll find someone else who will be like a dictionary for me and help me with this since it is obvious you don't want to be bothered with it.

resource4us

Twey
09-18-2006, 08:48 PM
I apologise, I see it now:
I've tried to understand what is spoken about in the w3 FAQ's/help and searched through my servers help pages but I guess I don't have a good enough understanding.
AddType 'text/html; charset=ISO-8859-1' htmlThis should be in your .htaccess file.

NGJ
09-20-2006, 10:43 AM
Hi Twey,
I've pulled this back into the forum - as I'm not sure I made things clear in my email to you & in case others might be interested! :)

The below script copies a value to a cc email address, based on the value inputted from the form, and also flavours the subject title based also on content within the form.....fine.

However, I've noticed I'm getting 'error on page' with the script - when used with FormManager..... Further to this, when the form posts it removes the last character from both the cc and subject values...?!
The 'error on page' only appears when entering values into the fields used to capture the above values.

<script type="text/javascript">
var copying = false;

function copy(formNum, fromName, toName, prefix) {
if(!copying) return;
var from = document.forms[formNum].elements[fromName],
to = document.forms[formNum].elements[toName];
to.value = (prefix ? prefix : "") + from.value;
window.setTimeout("copy('" + formNum + "', '" + fromName + "', '" + toName + "'" + (prefix ? ", '" + prefix + "'" : "") + ")", 300);
}

function beginCopy(formNum, fromName, toName, prefix) {
copying = true;
copy(formNum, fromName, toName, prefix);
}

function endCopy() {
copying = false;
}
</script>

Using:
<input type="hidden" name="mailcc" value="email_copy">
<input type="hidden" name="mailsubject" value="Requestor">


Within the field inputs:
<input type="text" name="Requestor" onkeypress="return handleEnter(this, event)" onkeydown="beginCopy(0, this.name, 'mailsubject', 'SubInvRequest ');" onkeyup="endCopy();" class="memorize" value="1-" size="30" style="font-family:arial;font-size:8pt;color:red;">
<input type="text" name="email_copy" onkeypress="return handleEnter(this, event)" onkeydown="beginCopy(0, this.name, 'mailcc');" onkeyup="endCopy();" class="memorize" size="39">

Can you shed any light on this please?

Cheers,
N.

Twey
09-20-2006, 04:32 PM
I'd like to see the page in question, please.

tresamul
09-20-2006, 05:56 PM
Thank you sooooooooooo much, it all works perfectly now! sorry it took so long to get back to you; I've been out sick.

ddadmin
09-20-2006, 08:57 PM
I'm trying to follow the changes to the script here and whether I should update the script on DD to match. It's a little confusing trying to figure out whether some of the changes are to address specific needs in this thread, or are applicable in general. :)

Twey, can I assume http://www.twey.co.uk/?q=forms now contains certain updates/bug fixes that you'd recommend be mirrored to the script on DD as well?

Twey
09-20-2006, 09:59 PM
Aye. I'd say that perhaps you should wait to see if NGJ's problem was caused by the script, but since tresamul's is working without problems, I'd assume not.

ddadmin
09-22-2006, 10:24 PM
Just a note that the script on DD has just been updated with the latest build as of this posting: http://www.dynamicdrive.com/dynamicindex16/formdependency.htm

jbrown1028
09-23-2006, 03:28 AM
Hey great code, I am wondering, I am trying to create a simple form that has 8 text fields

Date, City, State, Event, Type, Place, HorseName, RiderName

What I would like to accomplish is if the Date>"" and Event>"" and Rider>"" then show a new line of boxes underneath, so if the user would like to enter another set they could. This would keep repeating pretty much unlimited times (until the user hits submit) Then all of these fields would enter into a database.

To place these fields into a database, I would pretty much need to use the Request.Form("lblDate") command to put these into a database. Would I need to create an array.

However it would write to the screen is how I would send it to the database.

ASP is pretty easy for me, although for me, Java script has its challenges. Any help would be appreciated.

Twey
09-23-2006, 10:16 PM
Essentially, an unlimited repetition when a condition is met.

This isn't currently supported by the script, but I will certainly add it when I've figured it out theoretically.

eakucera00
10-03-2006, 03:29 PM
can someone post up the form code that they would use to link 3 or 4 drop down menus based on this script. For some reason i'm having troubles getting one drop down menu to remain hidden untill a specific option is selected in another. Other form elements seem to work ok. It's probably just syntax but some sample code might point me in the right direction. I appreciate everyone's help. thank you.

Twey
10-03-2006, 05:47 PM
<select name="sel1">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<select name="sel2" class="DEPENDS ON sel1 BEING two">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<select name="sel3" class="DEPENDS ON sel2 BEING two">
<option value="one">One</option>
<option value="two">Two</option>
</select>

jimmay
10-13-2006, 10:22 PM
nice app

mrshawn
10-22-2006, 07:17 PM
Hi Twey, GREAT app. Wondering if you can help me out with a problem? I'm building a form for a cart using the dependency script you've written. On the page I ALSO have a swap image script I'm using (built-in Dreamweaver MX version) for a product graphic (so you can see it in different colour options). HOWEVER, whenever I add a behaviour to swap the image, it breaks the dependency script and all the selections show (I'm using drop-down lists). You can view it (in progress) at http://www.mrshawn.com/finishline/index2.html (click on the underwear tab in the left column) As an aside, I have already tried replacing the original <script> tag in the <head> section with the new <script> tag you provided (thinking it was an onload conflict) but that hasn't resolved it...so, I think I've switched it back.

ANY HELP IS APPRECIATED!!!

Twey
10-22-2006, 07:41 PM
A classic conflicting onload. You have:
window.onload = function() {
setupDependencies('suitoptions' /*, 'form4Name', 'form5Name', ... */);
};And:
<body onload="MM_preloadImages('Products/Chevron.jpg')">Instead, use:
window.onload = function() {
setupDependencies('suitoptions');
MM_preloadImages('Products/Chevron.jpg');
};And:
<body>The DreamWeaver scripts are rather hopeless, by the bye; if you have time, I strongly recommend you rewrite them by hand.

mrshawn
10-22-2006, 07:50 PM
You're brilliant!! THANK YOU. I agree about the DW Behaviours...they've just made is too convenient I think ;) THANK YOU AGAIN.

aka Robbie
12-08-2006, 09:33 AM
I have it set up so that what is chosen on one select displays another select menu with the final options, eg

<select name="vendor" size="1">
<option>Vendor</option>
<option>----------------</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<br>
<select name="product" size="1" class="DEPENDS ON vendor BEING a">
<option>Product</option>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
</select>
<select name="product" size="1" class="DEPENDS ON vendor BEING b">
<option>Product</option>
<option value="b1">1</option>
<option value="b2">2</option>
<option value="b3">3</option>
</select>
<select name="product" size="1" class="DEPENDS ON vendor BEING c">
<option>Product</option>
<option value="c1">1</option>
<option value="c2">2</option>
<option value="c3">3</option>
</select>

The script works nice, however when it is submitted I also get the unselected options

eg if a user selects vendor b product 3, I get "product b2 product". If they looked at the selections and at one point had vendor c product 1 visable on the select options before submitting vendor b product 2, I get "product b3 c1"

What I want is something which will only submit what is in view in the select option and strips the non visable selects.

Any ideas?

aka Robbie
12-08-2006, 11:11 AM
Just to let you know I've now got it working.

Still using the form dependency script, I added the following script:


Products= new Array(
new Array(
new Array("a1"),
new Array("a2"),
new Array("a3")
),

new Array(
new Array("b1"),
new Array("b2"),
new Array("b3")
),

new Array(
new Array("c1"),
new Array("c2"),
new Array("c3")
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
}
}

I then modified the html to:

<select name="vendor" size="1" onChange="fillSelectFromArray(this.form.items, ((this.selectedIndex == -1) ? null : Products[this.selectedIndex-1]));">
<option selected value="-1">PLEASE SELECT</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<br>
<select name="items" size="1" class="DEPENDS ON vendor BEING a OR vendor BEING b OR vendor BEING c">
<option> </option>
</select>

:)

Twey
12-08-2006, 11:18 AM
<select name="items" size="1" class="DEPENDS ON vendor BEING a OR vendor BEING b OR vendor BEING c">Or:
<select name="items" size="1" class="CONFLICTS WITH vendor BEING -1">Alternatively, you could have just stripped out "product" before filling :)

JackieO
12-10-2006, 08:26 AM
Excellent script and I've always found great ideas from Dynamic Drive.

I have a question. I found that the more fields I add, for example having the example input script over and over to the point of 14 of them, it slows down to the point where my computer is not responding.

Is this something related to javascript or error in my coding? Just to be sure, I made a web page as exactly as the sample listed. But I copied the execusion Linux Windows Password 14 times. And when I ran the page it's taking forever to type anything and click on the next radio/checkbox value.

Any tip would be appreciated.
Thank you.
~J

shachi
12-10-2006, 08:29 AM
Twey, it'd be great if we could add animated effects with the elements. Any ideas how I could do that?

jps4m3
12-21-2006, 02:35 PM
First off, this is a great script.

I've set it up to feed information into our companies CRM database. However, the performance of the form is severly lacking now that I have a over 40 fields with some dependencies. Can anyone recommend ways to improve performance of the form?

Thanks!

Twey
12-21-2006, 03:37 PM
Twey, it'd be great if we could add animated effects with the elements. Any ideas how I could do that?Certainly, just modify the hideEl and showEl functions defined in setupDependencies().
Can anyone recommend ways to improve performance of the form?The default setup is, as you've noticed, a bit of a performance nightmare. This is because IE6 (surprise, surprise) doesn't seem to call onchange when radio buttons are clicked, so I've resorted to basically hijacking every event that could result in a change:
addEvents([e[j]], ["change", "keyup", "focus", "click", "keydown"], changeHandler);If you know what type of elements you'll be dealing with, you can remove some of those. "focus" and "click" can go if you're not going to be using radio buttons or check boxes (or don't care about IE6); "keydown" can go if you're not going to be using text boxes. For a slightly less responsive but still working experience, you can remove "keydown" even with text boxes, or remove both "keyup" and "keydown" if you don't mind the changes not taking effect until the user removes focus from the box. A fully working configuration would be:
addEvents([e[j]], ["change", "focus", "keyup"], changeHandler);"keydown" and "click" are actually redundant, since no data has been changed onkeydown and a click (except in some odd cases) will trigger focus. I'll remove them from the default script. It would also be a good idea to implement some type checking (a textbox doesn't need "focus", a select doesn't need anything but "change"), but I haven't time for that now.

Galactic
12-22-2006, 10:58 PM
Ok, I've managed to get this to work with just a simple form however I'm needing to add this to a more complicated form here:

http://testbed.galacticzero.net/test/apply_online_modified1.html

Simple:
http://testbed.galacticzero.net/test/test.html

Could one of you guru's look at this and help point me in the right direction please?

Franklyn

Galactic
12-23-2006, 08:29 PM
Ok, I got this figured out, I just moved the script to within the table and created a nested table, then the script, then what I wanted to show upon a click, then buttoned it all up and it works just fine.

Great script.

kemie
12-31-2006, 04:56 PM
Hi, I'm hoping somebody can help me since i'm not too js-literate.
I'm trying to create a dependency based on a numeric value, but not for an exact match, but to check if the number is greater than something.

i tried the following code:

<input name="userEmail" value="" id="userEmail" type="text" class="DEPENDS ON age BEING < 13">

but of course that only returns true if i type literally "< 13" on the age field.
Is there a way of making the script check for the numerical value?

thanks?

Twey
01-01-2007, 12:15 AM
Yes, I think that it needs an "expression" statement.

...

... maybe I should do some refactoring, while I'm at it.

Twey
01-01-2007, 02:05 AM
OK, I've modified the file on my site. I haven't tested in anything except Firefox yet, so I've disabled expression evaluation by default: set FORM_MANAGER_EVAL_EXPRESSION to true in the file to enable it. With this modification, the class you used above should work. Anything that isn't a valid Javascript expression (operator and right-hand operand) should be treated as a string, but if you want to make sure that a value won't be evaluated, put it in quotes. This is always a good idea when the above option is enabled: the script will never yield a false negative, but false positives are possible.

kemie
01-01-2007, 11:56 AM
Wow, i never expected such a quick response, especially not around the holiday!

The expression addition worked like a charm. Thank you very much!!!

By the way, I also made a little change to it
instead of:

var hideEl = function() {
this.style.display = "none";

i added:


var hideEl = function() {
this.style.display = "none";
this.disabled = true;
So that hidden fields don't get sent.

Thanks for the help and for such a great unobtrusive script!

kemie
01-01-2007, 12:12 PM
oh, by the way, it seems to work perfect on ie too :)

east71177
01-18-2007, 03:55 PM
Twey your Form Dependency script is wonderful.

To anyone who can assist,

I have, hopefully, a small issue.

What I want to do is use checkboxes that when multiple boxes are selected, radio buttons for each checked box are displayed. Currently, if I select more than one checkbox, it only displays the input for one of those selections. I hope this isn't too confusing. Thank you for your help!

East

Twey
01-18-2007, 05:26 PM
It is fairly. Can you show us what you have so far?

scotto
01-29-2007, 03:02 PM
My apologies in advance of this very basic question...

I have successfully implemented the dynamic forms but my form is a bit complex. I'd like to add some text before different sections of the form but the text is not associated with any of the form elements. I have tried every way I can think of with no luck, so I am wondering how I can add text that appears and disappears dynamically based on the form selections?

Thanks for the excellent script, and thanks in advance for a reply.

Scott

Twey
01-29-2007, 03:10 PM
In the demo, I did it with a hidden form element:
<label>
Your text here
<input type="hidden" class="DEPENDS ON x BEING y">
</label>It's abusing the element slightly, but it's not too bad (especially since hidden form elements are a bit of a hack to start with). The hidden element won't be submitted if no name is given to it.

scotto
01-29-2007, 07:17 PM
Thanks Twey!

Etymon
01-30-2007, 03:49 PM
Hi Twey,

Thank you for the code. It is very awesome!

Question: We have another set of scripts running a dropdown menu, and there is a conflict between yours and theirs. With "display a notification about every script error" checked in IE (Tools > Internet Options > Advanced), I'm getting the 'selectarray.length' is null or not an object error.

Our test page is here: http://www.simpletractors.com/club34/date_today.asp

If you need the conflicting .js files, I can email them to you.

Thank you Twey. This will help us out a lot!

Etymon

Twey
01-30-2007, 04:09 PM
I see you've attempted to rectify the problem:
window.onload=setupDependencies('weboptions');loadFunction;This isn't quite right. You probably meant:
window.onload = function() { setupDependencies("weboptions"); loadFunction(); };However, this must be done in every single one of the browser-dependent JS files. It's a lot nicer to do, in the main page:
window.oldonload = window.onload;

window.onload = function() {
if(window.oldonload) window.oldonload();
setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};You'll also need to set that old line back to how it was :)

Etymon
01-30-2007, 04:49 PM
Resolved - :( Still getting the scripting error.

Resolved - Also getting a Object expected error.

Etymon
01-30-2007, 05:25 PM
Resolved - What I mean, is that your code works perfect. It's just that it is doing something to the other script. If we weren't debugging, though, we wouldn't even know the error was there. :D

Etymon
01-30-2007, 06:22 PM
I backed up the dropdown menu files with an backup set. Seems the errors are gone now.

Sorry to worry you about the errors.

Now, your script doesn't work anymore. I went back and placed an instance into each .js file, but that throws the errors.

Does it matter what order the onload functions are in?

Twey
01-30-2007, 06:27 PM
On what line?

(Please, give me a Firefox error: the errors generated by Internet Explorer are practically useless for the purposes of debugging.)

/EDIT: Ah, very well. Glad you got it sorted. :)

Etymon
01-30-2007, 07:26 PM
I apologize for juggling the posts there. I didn't want to post a lot of "got it, no ... wait a minute, etc." posts.

I'm still having trouble getting the script to work. I have not tried it in FireFox though the errors at this moment are not there. I get the errors when I join the window.onload functions together. The script just doesn't work when I use your onload separate from joining the other window.onload functions together.

But I am in a hurry at the moment. My thoughts may not be too clear on that since I have tried it so many different ways. Everything seems a bit jumbled right now.

I have to step out for a few hours. I'll be back later to explain what I doing then.

Thanks so much for your help!

Etymon

Dutchie
02-10-2007, 04:11 PM
Hi Twey,

Your Form Dependency is exactly what I searched for, but I have some question about it because I canít solve a problem. Can you please help me?

The problem is, that if I copy the example into a blank html file, it works like clockwork. I can even modify it to sued my needs. But eventually it has to be integrated into my website template and that is the part where I get stuck.

Iíve put the following into my template <head>:



<script type="text/javascript" src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>
<script type="text/javascript">
window.onload = function() {
setupDependencies('adoptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>

And the test form into the <body>



<form action="" name="adoptions" onsubmit="return false;">
<p>
<label>Linux<input type="radio" name="os" value="dot.linux"></label>
<label>Windows<input type="radio" name="os" value="windows"></label>
<label>Password (try entering &quot;password&quot;):<input type="password" name="pass"></label>
<label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="DEPENDS ON os BEING dot.linux OR os BEING windows"></label>
<label>SSH<input type="checkbox" name="ssh" class="DEPENDS ON os BEING dot.linux"></label>
<label>IIS<input type="checkbox" name="iis" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label>
<label>ASP<input type="checkbox" name="asp" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label>
<label>Insecurity<input type="checkbox" name="insecurity" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label>
<label>Frequent Crashes<input type="checkbox" name="crashes" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label>
<label>Apache<input type="checkbox" name="apache" class="DEPENDS ON os BEING dot.linux OR os BEING windows AND CONFLICTS WITH iis"></label>
<label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="CONFLICTS WITH pass BEING EMPTY"></label>
<label>Super secret hidden stuff!<input type="hidden" class="DEPENDS ON pass BEING password"></label>
</p>
</form>

But when previewing the page or even uploading it to the server, it doesnít work. All the fields are visible and noting is hidden.

You can find the test page here: http://affiliate.dne3.com/orderform1.php

Maybe the errors are there because there are more scripts running on the same page?

Thank you in advance for your assistance,

Patrick

P.s. I just saw that you prefer question ask via the forum and not e-mail or PM, sorry about that!

Twey
02-10-2007, 04:31 PM
It's most likely an onload conflict. Try:
function addEvent(el, ev, f) {
if(el.addEventListener)
el.addEventListener(ev, f, false);
else if(el.attachEvent) {
var t = function() {
f.apply(el);
};
addEvent.events.push({'element': el, 'event': ev, 'handler': f});
el.attachEvent("on" PLUS ev, t);
} else
if(el['on' + ev]) {
var a = el['on' PLUS ev];
el['on' + ev] = function() {
a.apply(this);
f.apply(this);
};
} else el['on' + ev] = f;
}
addEvent.events = [];

if(typeof window.event !== "undefined")
addEvent(window, "unload", function() {
for(var i = 0, e = addEvent.events; i < e.length; i) {
e[i].element.detachEvent("on" + e[i].event, e[i].handler);
e[i].element['on' + e[i].event] = null;
}
}
);

addEvent(window, "load", function() { setupDependencies("adoptions"); });

ddadmin: Shouldn't this thread be locked?

jscheuer1
02-10-2007, 05:03 PM
ddadmin: Shouldn't this thread be locked?

Sounds like a good idea. I've always had to 'lock' my own threads in this section when it became time by (sometimes repeatedly) telling folks to take it to the help section.

DruidToolz
02-21-2007, 09:38 PM
Thanks Twey,

For the nice script you made :D But anyways i am having a little bit of a problem implementing this into a form that i made awhile back and figure to improve upon it with your script.. But i am trying to figure how to get it to work with my upload.php script.. What i'm trying to do is upload a banner or a image with your code.. Since i'm not too familar with Javascript or DHTML, but i do know a little about php/html though.. But anyways i will throw up the code so you can look at it..

Form with your script

<script src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>

<script type="text/javascript">
window.onload = function() {
setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>

<form action="upload.php" name="weboptions" method="post">
<p>
<table border="0" cellpadding="3" cellspacing="1">
<tbody><tr>
<td nowrap="nowrap" valign="top"><b><font color="white" size="2">Title:</font></b></td>
<td valign="top">
<input name="Title" size="30">
</td>
</tr>
<tr>
<td nowrap="nowrap" valign="top"><font color="white" size="2">
<label><b>Banner Text:</b><input type="radio" name="url" value="btext"></label><br>
<label><b>Banner Upload:</b><input type="radio" name="url" value="banner"></label><br></td>
<td valign="top">
<label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="DEPENDS ON url BEING btext OR url BEING banner"></label>
<label>URL: <input type="url" name="url" class="DEPENDS ON url BEING btext" size="30" value="http://"></label>
<label>URL: <input type="url" name="url" class="DEPENDS ON url BEING banner" size="30" value="http://"></label>
<label>Banner: 200x40 <input type="file" name="userfile" class="DEPENDS ON url BEING banner AND CONFLICTS WITH btext" value="3536" size="20"></label>
</tr>
<tr>
<td nowrap="nowrap" valign="top"><b><font color="white" size="2">Description:</font></b></td>
<td valign="top">
<textarea wrap="virtual" name="Description" rows="5" cols="35"></textarea>
</td>
</tr>
<tr>
<td nowrap="nowrap" valign="top"><b><font color="white" size="2">Contact Name:</font></b></td>
<td valign="top">
<input name="Contact" value="" size="30">
</td>
</tr>
<tr>
<td nowrap="nowrap" valign="top"><b><font color="white" size="2">Contact Email:</font></b></td>
<td valign="top">
<input name="Email" value="" size="30">
</td>
</tr>
<tr>
<td></td>
<td>
<input value="Submit Link Exchange" name="SUBMIT" class="button" type="submit"></td></tr></tbody></table>
<br>
<br>
<br>
</p></form>

Upload.php file

<?php
@import_request_variables("gpc");

//The directory where the file will be placed. CHMOD this directory to 777.
$uploadDir = '/home/username/public_html/_files/Links/';

$uploadFile = $uploadDir . $_FILES['userfile']['name'];
$thefile= $_FILES['userfile']['name'];

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadFile))
{

$image = $thefile;
print "File ".$thefile." was successfully uploaded.";

$headers = 'From: Link-Exchange@mysiteurl.com';
mail(" DruidToolz@myemail.com", "Link Exchange","
Title: $Title
URL: $URL
PIC: $thefile
Description: $Description
Contact: $Contact
Email: $Email",$headers);
}

else
{
print "Sorry there was an error in your request. The File you requested <p><center>is too big. Please try uploading a smaller banner and try again";
}

?>

If you could please help me out with this i would be grateful.. If you need more info on this please PM thanks.. :D

Twey
02-21-2007, 09:52 PM
Do you have a sample page?

DruidToolz
02-21-2007, 11:08 PM
Do you have a sample page?

I was working with it on my pc webserver but yeah i can upload it to my site.. I will PM you the url since the site is contants adult content, which i am sure there are minors that browse this site.. Thanks for the quick reply though :D

Twey
02-22-2007, 11:12 AM
I think it's OK to post the link so long as you warn that it's adult. At least, it's been done before.

DruidToolz
02-22-2007, 02:38 PM
I already sent an email to you yesterday.. The subject of the email is "Form Deendency Manager". If you didn't recieve it then i will throw up the url here along with a tag of the warning

Jaz
02-27-2007, 02:01 AM
Hi Twey,

Very useful script and great easy but powerful class driven control.

All works great for me in Firefox but in IE the initial option in a select box isn't displayed - just the box. It is the correct box and I can 'drop it down' and select an option correctly. One of your earlier post said to put in 'selected="selected" into the required option. I have tried this and also just 'select' ie.

<Select name="blah" id="blah" class="DEPENDS ON age BEING 10">
<option value="1" selected>Title of option</option>

and

<Select name="blah" id="blah" class="DEPENDS ON age BEING 10">
<option value="1" selected="selected">Title of option</option>

However I still get no selected value. Works great in Firefox but sadly 98&#37; of my users are on IE 6/7.

Any suggestions?

Thanks

Jaz

Twey
02-27-2007, 09:24 AM
Can you provide a link to the page in question?

Jaz
02-27-2007, 09:15 PM
Sure - http://www.racgp.org.au/test/formtest2.htm

julesie24
03-02-2007, 03:24 PM
Hi Twey,

I seem to be encountering the same issue as Jaz. When using the script with a <select> box, the initial option does not appear in IE.

For example,

<input name="joint" type="checkbox" id="joint" value="yes" />Is this a joint gift?
<label><input type="hidden" class="DEPENDS ON joint" />Tell us about your spouse/partner (if a joint gift)... </label>
<label><input type="hidden" class="DEPENDS ON joint" />Spouse/partner Name: </label>
<label><select name="spouse_title" class="DEPENDS ON joint" id="spouse_title">
<option value="title" selected="selected">Title</option>
<option value="Dr.">Dr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select></label>

Thank you in advance for any suggestions!

3rdeyepro
03-05-2007, 05:37 PM
I am trying to get the Form Dependency script to work with this Validation script: http://dynamicdrive.com/dynamicindex16/requiredcheck.htm

I have a form that has 3 radio buttons and I have successfully used the Dependency script to hide the child items when the parent radio isn't selected. But I need to make the child text box required only when the parent is selected.

chrisd84
03-19-2007, 04:40 PM
Hi Twey,

Is there a way to use your script for bigger portions of a form ?
Let's say i do wanna hide or show a few fields contained inside a <div> tag, is that possible ( i gotta hide within the div an <img> tag too, that's why i just can't hide the single items individually ).

Thank you in advance for the answer!

Twey
03-19-2007, 05:42 PM
You can use a single <label>, but that's not really neat. I'll code it in some time tomorrow.

chrisd84
03-20-2007, 08:09 AM
Thanks :) Using a <div> like a container of mixed content would really help.

Really appreciated ^^

wooly
03-22-2007, 05:06 PM
A great script. Found at just the right time for a form project I am working on.

I have a long list of option values and want a form to be dependent on all but one of these values. Is it possible to do 'DEPENDS ON x NOT BEING y' rather than a long comma separated list?

Just starting with this and only come to changes to the first field, so I am sure that I will be bugging you again!

I knew I'd have more questions!

How do I stop an entire table row showing?

For example


<tr valign="top"> <label>
<td><div align="right" class="style1">Presently living where?</div></td>
<td align="left"> <input type="radio" name="presently_living_where" value="Home" />Home
<input type="radio" name="presently_living_where" value="With relatives" />With Relatives
<input type="radio" name="presently_living_where" value="Facility" />Facility </td></label>
</tr>
<tr valign="top"><label>
<td align="right">If presently living at facility, <br />please indicate name:</td>
<td align="left"><input name="presently_living_where2" type="text" class="DEPENDS ON presently_living_where BEING Facility"/></td>
</label></tr>

I do not want the second line "if presently living...." to show if the answer is not Facility. The input box does not show but I would like to hide the whole row.

Twey
03-22-2007, 09:50 PM
Yes, the CONFLICTS keyword exists for this purpose:
CONFLICTS WITH x BEING ychrisd84, the easiest way to achieve what you want is to replace:
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {with
var calcDeps = function() {
for(var i = 0, e = Array.prototype.slice.apply(this.elements).concat(Array.prototype.slice.apply(this.getElementsByTagName("div"))); i < e.length; ++i) {This should allow you to apply classes to <div> elements within the form in exactly the same way as you would to a form element.

pcbrainbuster
03-22-2007, 10:01 PM
What is the script supposed to do ? I am sorry but when i had a look at it I did not understand it's purpose :(

djr33
03-23-2007, 01:21 AM
I haven't looked at it too closely, but it's a manager to control which elements of a form are required, like a checkbox that must be checked to agree to the TOS, for example.

wooly
03-23-2007, 06:05 PM
Twey. Thanks for solving my first problem.
Any answer on the second query about hiding complete table rows? And this time I have re-read the instructions and searched all Forum pages.

Twey
03-23-2007, 06:41 PM
Use the answer I gave to chrisd84, but replace "div" with "tr".

wooly
03-26-2007, 05:51 PM
I must be really dumb at this. I have replaced the lines as suggested and replaced "div" with "tr". It does not work and I get a script error. I have tried putting <label> in many different places around or in the <div> or <tr> and still nothing.
What should I be doing?

nburkha1
03-27-2007, 05:15 AM
I tried making the revisions to the code so I could hide a table or a row but it is not working for me either. Here are links to the code. What am I doing wrong? I can get it to work without div tags. Wooley I tried hiding a row as well and it is not working. I actually need to hide a number of rows that is why I tried using the div tag but I just tried making the adjustment to the <tr> tag but that did not work either. I am also feeling pretty dumb.

http://d1890571.user21.savvysitesinc.com/test.html

http://d1890571.user21.savvysitesinc.com/scripts/FormManager.js

Thanks for your help.

tamuir
03-28-2007, 08:39 PM
hey Twey,

very nice script.


but i am stuck with this lill problem, if it can be fixed....

i have a form made inside a php, it have combo box/ menu

which is duplicated with the help of php cause its pulling data from DB

the name of combo is prop[] and getting duplicated over

but every duplicated drop down have different values but same name like prop[].


i am stuck how can i tell it to DEPEND on which combo


here look at the page

http://absolutedge.com.pk/bellomonili/brcCategories/pDetails.php?id_prd=143

i just want to remove that text area, i just want if the client selects

1strand = one textbox appears
2strand = two textbox appears
3strand = three textbox appears

thanks in advance :)

Tamuir

wooly
04-02-2007, 03:13 PM
Any more thoughts yet on the posts of last week from me and nburkha1 about hiding rows/divs?

dussy
04-17-2007, 09:55 AM
So I have also the same problem to hide table and rows i just write here to be notifyed if there is an solution.

And i want to use this oportunity to say - This is a gret work!

thank you

Greatz: Andy

justuspost
04-19-2007, 06:17 PM
I am also having this issue. Everything works fine until you want to add the DIV code.

I am looking to sub out 2 visual looks for a price field. If the user selects one option I want it to say $[field] [?] and the other option would show from$[field] - to $[field] [?].

[?] = my help popup

So, I need to be able to hide text, a field(s) and other javascript. Using a DIV would be great!

Has anyone gotten this to work? or are we just working on something that is hopeless?

justuspost
04-25-2007, 12:57 AM
I have found a decent solution. If you simply encase the text with a <label> </label> tag you can have anything with in a table cell to hide. Here is an example of how I got an I frame to hide.


<input type="hidden" name="blank" class="DEPENDS ON name BEING value OR name BEING value OR name BEING value" id="blank" />
<iframe name="toswin" name="toswin" id="toswin" style="border:1px outset " width=350 height=100 src="http://www.google.com">
</iframe><br /><br />
</label>


Notice the hidden input type. This completely hides this Iframe. This has worked on anything I put in a cell, even if it is a span.

wooly
04-25-2007, 01:16 PM
I think I might also have an answer but it depends on the use of radio buttons, which suited me fine in this instance.

It is at http://www.webdeveloper.com/forum/showthread.php?t=146079 and the script is there. I have used 2 radio buttons instead of their solution and my script is



<html>
<title>Test 6</title>

<head>
<script type="text/javascript">
function toggle(divToShow) {
if (document.getElementById) {
if (divToShow == "with") {
document.getElementById('withdiv').style.display = "inline";}
else if (divToShow == "without") {
document.getElementById('withdiv').style.display = "none";
} else {
document.getElementById('withdiv').style.display = "none";
}
}
}


</script>
</head>

<body >

<input type="radio" name="sam" value="1" id="with"
onclick="toggle('with')" /> With
<input type="radio" name="sam" value="1" id="without"
onclick="toggle('without')" /> Without

<div id="withdiv" style="display:none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><select name="">
<option>-- Select --</option>
</select>
</tr>
<tr>
</td>
<td><textarea name="" cols="" rows=""></textarea>
</td>
</tr>
</table>
</div>
</body>
</html>

Might solve the problem for some of you but not as elegant as using FormManager

Choogster
05-15-2007, 07:00 AM
I`m not sure if this has been covered in the forum anywhere but here's my problem - I`ve changed the radio buttons to checkboxes. I need to show multiple selections at the same time without the previous being hidden.

Example: Click on linux and it shows a list, click on windows and it also shows a list without hiding linux. I need to be able to submit each list with an option(s) selected all at the same time. Basically I need all lists to be shown at the same time without any being hidden unless they haven't been selected.

Any help would be appreciated, I know nothing about javascript!

marker2001
10-21-2007, 04:12 PM
Excellent code.

I get it to work in IE fine but in FF2. well . . .
My use of this code is simple - select other in the pull down menu and the "other" text box pops up.

What happens in FF2 is the pull down appears as an empty pull down and all the values show up as unformatted text after the pull down box. See the screen capture:

http://www.thethirdzone.com/eLEAD/images/capture007.jpg

Here's my code which works fine in FF2 without the "label" tags:


<label><select size="1" name="Q01" Id="Q01"></label>
<label><option value="blank">Select One</option></label>
<?php
while($row = mysql_fetch_array($userIssuesQueryResult))
{
echo "<label><option value='". $row['ISSUE'] ."'>" . $row['ISSUE'] . "</option></label>"; }
?></select>
<label><p>Other:<br><textarea rows="3" name="other_topic" class="DEPENDS ON Q01 BEING Other" cols="30"></textarea></label>

Any suggestions?

TIA!

- Mark

Mozie
10-25-2007, 12:23 PM
Gr8 script, just wish I could get it working like I want to, being an UTTER newbie :p

Twey
10-25-2007, 04:02 PM
marker2001, your markup is highly invalid and badly-formed, so I wouldn't expect anything to work with it. Check out the validator (http://validator.w3.org/).

D.A.
10-26-2007, 07:31 PM
Another n00b here! I know a little bit about a lot of things but Javascript is not one of them.

This is an excellent script and is just what I have been looking for, it works perfectly, but I too need it to work with table rows.

I tried adapting the script as stated earlier in the thread (tried 'div' and 'tr') but no joy.

I also tried another script called usableforms (http://www.quirksmode.org/dom/usableforms.html) which does allow hiding of rows, but doesn't have the option for 'OR's which makes it no good for me.

If you had chance to take another look at it at some point I would be forever grateful :)

Dan

boogyman
10-26-2007, 07:46 PM
This is an excellent script and is just what I have been looking for, it works perfectly, but I too need it to work with table rows.

I sincerely doubt that twey is going to re-write the script to be usable in unproper coding techniques.
as stated in his last post
marker2001, your markup is highly invalid and badly-formed, so I wouldn't expect anything to work with it. Check out the validator.whatever you are attempting to do with the layout can be done with creative CSS...

if you explain / draw out what you would like, you would be a heck of alot more likely for him / someone else to help you accomplish your goal(s).

D.A.
10-26-2007, 08:45 PM
I appreciate that he will not re-write the script. I am not asking that of him. He kindly gave some advice to another member in post 100 (http://www.dynamicdrive.com/forums/showpost.php?p=82697&postcount=100) and I am attempting to adapt the script as described but it is not working.

D.A.
10-27-2007, 10:36 AM
OK I have a solution for myself and others wanting to hide complete rows.

I DID NOT modify the code as outlined in post 100. I modified the code to check if the parentNode is a <tr> and also to check if the parentNode of the parentNode is a <tr> (as the parentNode will be a <td>).

Original part of code:

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};

Modified version of code:

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.style.display = "";
if(this.parentNode.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
if(this.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.style.display = "none";
this.hidden = true;
if(this.parentNode.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.parentNode.style.display = "none";
this.hidden = true;
};


For some reason I am getting a rogue greater than sign at the beginning of my table but that might not be related.

I tried it with an 'else if' but it didn't work (I probably didn't have brackets or semicolons in the right place but as I say I know pretty much nothing about js)

I hope this is useful to others.

I have attached the modified version (I hope this is allowed).

Dan

tp4fp
02-03-2008, 07:56 AM
My form is basically this:

main dropdown: Sub-Dropdown 1:
Sub-Sub Drop Down 1
Sub-Sub Drop Down 2


Sub-Dropdown 2:Sub-Sub Drop Down 3
Sub-Sub Drop Down 4


And it works great, but if i go into any sub-sub drop down but then change Main Drop down, the other ones still stay there. Is there a way to make it when someone changes Main Dropdown, it sets everything (even if it is a giant code) to a value (in my case 0000).
Help is appreciated :)

webmerlin
02-11-2008, 05:56 AM
OK I have a solution for myself and others wanting to hide complete rows.

I DID NOT modify the code as outlined in post 100. I modified the code to check if the parentNode is a <tr> and also to check if the parentNode of the parentNode is a <tr> (as the parentNode will be a <td>).

Original part of code:

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};

Modified version of code:

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.style.display = "";
if(this.parentNode.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
if(this.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.style.display = "none";
this.hidden = true;
if(this.parentNode.parentNode.tagName.toLowerCase() == "tr")
this.parentNode.parentNode.style.display = "none";
this.hidden = true;
};


For some reason I am getting a rogue greater than sign at the beginning of my table but that might not be related.

I tried it with an 'else if' but it didn't work (I probably didn't have brackets or semicolons in the right place but as I say I know pretty much nothing about js)

I hope this is useful to others.

I have attached the modified version (I hope this is allowed).

Dan

Could you explain how you make this work (or give an example) with table rows and/or table data? I'm mixing this with some php and I need all the help I can get when it comes to .js . Thanks

lex2000
02-12-2008, 10:03 PM
This script is great. Thanks a ton.

I am curious about form field requirement, though. I have this set up on a contact form so that the user must choose either email or telephone as their choice of contact method. Based on which radio button is selected a text box is shown for either their address or number. I want the field that contains a submitted value to be required, while NOT requiring the empty field. Does anyone have any ideas?

schwim
03-05-2008, 02:10 PM
Hi there twey, and thanks very the awesome script. I use it in almost every form I make.

I have a problem with my current form though. I may just be asking something of the script that it can't do.



<option>None</option>
<option class='DEPENDS ON party_number BEING 2 OR party_number BEING 3 OR party_number BEING 4 OR party_number BEING 5 OR party_number BEING 6 OR party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>1</option>
<option class='DEPENDS ON party_number BEING 3 OR party_number BEING 4 OR party_number BEING 5 OR party_number BEING 6 OR party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>2</option>
<option class='DEPENDS ON party_number BEING 4 OR party_number BEING 5 OR party_number BEING 6 OR party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>3</option>
<option class='DEPENDS ON party_number BEING 5 OR party_number BEING 6 OR party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>4</option>
<option class='DEPENDS ON party_number BEING 6 OR party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>5</option>
<option class='DEPENDS ON party_number BEING 7 OR party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>6</option>
<option class='DEPENDS ON party_number BEING 8 OR party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>7</option>
<option class='DEPENDS ON party_number BEING 9 OR party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>8</option>
<option class='DEPENDS ON party_number BEING 10 OR party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>9</option>
<option class='DEPENDS ON party_number BEING 11 OR party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>10</option>
<option class='DEPENDS ON party_number BEING 12 OR party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>11</option>
<option class='DEPENDS ON party_number BEING 13 OR party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>12</option>
<option class='DEPENDS ON party_number BEING 14 OR party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>13</option>
<option class='DEPENDS ON party_number BEING 15 OR party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>14</option>
<option class='DEPENDS ON party_number BEING 16 OR party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>15</option>
<option class='DEPENDS ON party_number BEING 17 OR party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>16</option>
<option class='DEPENDS ON party_number BEING 18 OR party_number BEING 19 OR party_number BEING 20'>17</option>
<option class='DEPENDS ON party_number BEING 19 OR party_number BEING 20'>18</option>
<option class='DEPENDS ON party_number BEING 20'>19</option>


Is there a way to have each option dependent like this? Currently they're all showing up, regardless of what is in the party_number text box.

thanks,
json

schwim
03-06-2008, 03:58 PM
We've been posting in a dead help thread since Oct of last year, haven't we?

thanks,
json

Rhino
05-08-2008, 09:19 AM
Hi there! I have read this treat thru and still did not get an answer. My be because English is not my first languish,

Iím trying top use the Form Dependency Manager to complete my form?

Let me explain how it should work.

1. select the first drop down
2. then it auto populates the second drop down
3. if you select let say other in the second drop down it needs to bring up a text field (now here is where I have a problem) is there any body out there that can help

here is the script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>

<script type="text/javascript">
window.onload = function() {
setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
};
</script>
</head>

<body>
<form action="" name="weboptions">
<p>
<label><select name="os" size="1">
<option>----Select----</option>
<option value="Cape Town">Cape Town</option>
<option value="Durban">Durban</option>
<option value="Johannesburg">Johannesburg</option>
</select><br>
</label>
<label></label>
<br>
<label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="DEPENDS ON os BEING Cape Town OR os BEING windows"></label>
<label>
<select name="capetown" size="1" class="DEPENDS ON os BEING Cape Town">
<option value="Cape Town International">Cape Town International</option>
<option value="Stellenbosch">Stellenbosch</option>
<option value="Johannesburg">Johannesburg</option>
</select></label> <label>
<select name="durban" size="1" class="DEPENDS ON os BEING Durban">
<option value="Durban1">Durban1</option>
<option value="Durban1">Durban1</option>
<option value="Durban1">Durban1</option>
</select></label> <label>
<select name="johannesburg" size="1" class="DEPENDS ON os BEING Johannesburg">
<option value="Johannesburg1">Johannesburg1</option>
<option value="Johannesburg1">Johannesburg1</option>
<option value="Johannesburg1">Johannesburg1</option>
</select></label>
<input name="add" type="text" id="add" class="DEPENDS ON os BEING Cape Town AND DEPENDS ON Stellenbosch">
<br>
<!-- <label>IIS<input type="checkbox" name="iis" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label><br>
<label>ASP<input type="checkbox" name="asp" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label><br>
<label>Insecurity<input type="checkbox" name="insecurity" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label><br>
<label>Frequent Crashes<input type="checkbox" name="crashes" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label><br>
<label>Apache<input type="checkbox" name="apache" class="DEPENDS ON os BEING linux OR os BEING windows AND CONFLICTS WITH iis"></label>--><br>
</p>
</form>
</body>
</html>


What am I doing wrong :confused:

Misafir
05-18-2008, 12:05 AM
thank you nice..

comaiwat
06-11-2008, 07:16 PM
I think this is an excellent piece of codes. I need some help with it though. I have a form that is in a multiple select option. Select from A to F option. if they choose F the last option I was able to show the required filed. If F is selected then fill in the text area. I wan the text area to be required field. How should I go about doing that? If I put it earlier on in the script then no matter which option the user select B it would required them to fill the text area. I don't want that to occur. Any advice? If it's doable.

Here is a screen video shot..

http://screencast.com/t/IWhS5TYn

I also attached the file.

skatek2smp
07-15-2008, 10:41 PM
Hi, I have a large form i am using the depends script on. The script works fine but it is slowing down the form. The form i am using has 32 different fields that require the depends script.

If you type or click a radio or checkbox there is 2 to 4 second delay before the user can see the input. Is there a way to speed this up or do you know of another script that will not slow this down? Thanks, SMP

skatek2smp
07-16-2008, 11:41 PM
I reduced the script to 16 sets of depends and it is still lagging on the input of users??

dsontag
11-29-2008, 09:16 PM
I'm using this script right out of the box, no mods >> http://www.dynamicdrive.com/dynamicindex16/formdependency.htm.

I keep getting window.document.forms[arguments[i]].elements is undefined referencing the following bolded line in the code:

for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
addEvents([e[j]], ["change", "keyup", "focus", "click", "keydown"], changeHandler);
e[j].hide = hideEl;
e[j].show = showEl;
}

Does anyone know why? I don't know where to start.

Thanks!

Twey
11-29-2008, 11:39 PM
It means that you've passed a form name to the initial setup function that doesn't exist on your page.

Twey
12-22-2008, 05:45 AM
I'm closing this thread; further queries should be made in the script help forum. The existing topic that was here has been moved to Of Form Manager and the Positioning of Forms on the Page (http://dynamicdrive.com/forums/showthread.php?p=176481).