close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

validate dropmenu to show a different textfield

Thread began 8/26/2009 4:08 pm by un33k9309513 | Last modified 9/08/2009 4:04 pm by Eric Mittman | 4677 views | 11 replies |

un33k9309513

validate dropmenu to show a different textfield

I am trying to setup a submit comment into mysql.
How can I show a visitor a different text field depending on what they have selected from the drop down menu?

For instance if they choose "within this site" from the drop down, I would like to show a textfield that asked them to input A Member number: so they would type 342Be.
ps for this I would like to restrict URL.

But if they choose "my own website" from the drop down, I would like to show a text field that asks them to input their URL Address: so they would type the url.
For this I would allow URL.

Or is there a better way to do something like this.

thank you

Sign in to reply to this post

Eric Mittman

I think the best way to handle this would be to include both the member number and URL field in the form. Then using client side validations you would apply either a required or regular expression validation to the select list, then using this validation as the trigger for two show regions around the text inputs. For one of them you would choose for 'if trigger is valid' to show and for the other you would choose to hide. The help documentation for Validation Toolkit describes more about the response validations and using them with the client validations to achieve these type of results. Please post back with any questions that you have about any of these.

Sign in to reply to this post

un33k9309513

result

I set a required client validation on the drop down menu.
Then I selected the div tag that holds both the text field and the name next to it and set them to show if trigger is valid, and set the next div that holds the URL to hide if trigger is valid. Then I run it locally to test, and I try selecting between the two options in the drop down menu but both text fields are still showing, they both show when the page initially loads and they don't change if you select either option Member or URL from the drop down menu.

I read the help through dreamweaver also, but if there is more help docs, please post me a link for them, I kinda need exact steps to learn it. I think I may be missing a trigger from the drop menu to the two divs, and I may be missing some sort of show/hide region behavior, or I may not be understanding what you stated here "then using this validation as the trigger for two show regions around the text inputs".

Thank you for your help

Sign in to reply to this post

Eric Mittman

Getting the client side validations in place to show and hide divs on a page can be a little tricky if it is not something you have done before.

I have an example page that I created that has the type of validation on it that I think you are asking about. I will post the page itself and list the steps that I took here to get it in place.

step 1:
make sure the form is in place include the divs around the two fields you would like to toggle. The divs must have unique ids for the areas they surround. You will also need to default the divs to be hidden by adding this inline style:

style="visibility:hidden;"

step 2:
in my example my select list has two choices, only one choice has a value, the other option has it's value set to "".

step 3:
select your select list in the form, then go to the tag > behaviors panel to apply the client validation. Choose the required/not blank validation. Make sure it is configured for the current select list.

step 4:
as a response to the required validation apply the show hide layer validation response. Make sure to select the first div as the target layer, and choose to hide this layer if trigger is valid.

step 5:
Now that you have your first validation/response combo you can add in the second. For this one you will add in another required validation for the select list, then your response validation will be another show hide layer. In this one you will select the second div as the target layer and choose to show this div is trigger is valid.

You should now have a form on the page and have two sets of validations applied to the select list. The first is to check if a value has been selected, if true then hide the first input, the next validation will check to see if the select list has a value and show the second input. Since these validations for show hide reverse themselves when the triggering validation fails you do not need to worry about the alternate states. Attached is an example page of this validation in place.

Attached Files
newtest.zip
Sign in to reply to this post

un33k9309513

I have this for the two divs, I have them in cells of a table to keep them nice, I don't know where to place the invisible style. I actually need the member text field not to be hidden at page load, but when someone changes the select menu to URL then member div should be removed and urlshow should be visible. By the way thank you for your file, I tried even to copy that line into mine but didn't work correctly.

<div id="member">
<tr>
<td height="32">Code:</td>
<td><input name="member" type="text" id="ccode" size="40" /></td>
</tr>
</div>
<div id="urlshow">
<tr>
<td height="32">URL:</td>
<td><input name="url" type="text" id="url" size="40" /></td>
</tr>
</div>

Sign in to reply to this post

Eric Mittman

I'm not sure that you code will work like this inside of a table. If you are having trouble with it like this it may be better to have just the inputs with the text next to them in a div. It is best to have the div around the input and make the div invisible, but you can add the style attribute to just about any valid tag on the page. It is just like this:

<tag style="visibility:hidden;" />

Sign in to reply to this post

un33k9309513

Toggling Issue

I changed the page to use divs instead of the table and cells. But I am now having a hard time with the toggling. I start out by have only 2 items in the select list

member
url

then by defualt I leave it on member, so I show member text field on page load. When I preview the page, I have member in the list menu, and one text field showing which is memID and when you select url it hides memID and shows the url text field, but now you click the select list to go back to memID and it doesn't switch back.

Right now I have:

<div id="member">MemberID:
<input name="memID" type="text" id="memID" size="40" />
</div>
<div id="url" style="visibility:hidden;">URL:
<input name="url" type="text" id="url" size="40" />
</div>

and for bevhaviors I have:

target layer: div"url"
If trigger is valid: show layer
------
target layer: div"member"
If trigger is valid: Hide layer


Could you also tell me how to setup the server validation on memID field so it will check the database before submitting a duplicate memID? I tried putting in the server validation, but it stops inputing any data into the db.
Would CSS Form Builder do all this easier for me?

Thank you for the help

Sign in to reply to this post

Eric Mittman

It sounds like you are mostly there. When it comes to the behaviors that you have applied you stated that you have this:

and for bevhaviors I have:

target layer: div"url"
If trigger is valid: show layer
------
target layer: div"member"
If trigger is valid: Hide layer

These must be preceded by the required client side validations. So it should go like this:

Required
hide show layer
Required
hide show layer

If you have it setup like this and the value similar to the ones that I used it should work for you. Do you have a link to your current page you have this on? If you can please post back with the link and also a copy of the page in a zip archive. I can take a look at the page directly to help determine what is going on.

Sign in to reply to this post

un33k9309513

Ok I got the toggle to work, but
The divs toggle but only if I set the select list to:

ITEM LABEL VALUE

memID
URL ----------- 2


I would need a 1 for the memID VALUE and still have the toggle work, when I put a 1 there the toggling doesn't work, any thoughts?

I have validation on both these textfields, but when someone toggles them I would like the validation to show just for the one text field that they choose from the select menu.
In example: when someone picks URL from the select menu, memID hides and URL is shown, but when they finally submit the form, validation pops up saying please input memID. I have all these validations as client and they are all separate in the bevaiors panel for the form that is being submitted is that ok, because I will be adding a server validation to not allow duplicate memID entries?

I am trying to do one thing at a time but they kinda are linked together.

The preview is on my local machine right now, I will be avail Friday all day.

thanks

Sign in to reply to this post

Eric Mittman

I think there are two things here that could be updated to get this working the way you would like it.

The first is getting past the select list having a value for each entry. If you use the required not blank validation as the trigger then you must have one of the triggering options in the list not have a value, otherwise it would never fail validation. To get around this you can use the other select list compatible client side validation of regular expression. With this validation you must come up with a regular expression that will account for the value that you are using for the field. An example of an expression that would detect a 1 for the select list would be:

/^1$/

With this regular expression validation it would be triggered if the value contained just 1.

The regular expression validation is covered more thoroughly under the Validation Toolkit help from within Dreamweaver.

For the second issue with the validations occurring for the hidden form fields you should be applying the conditional validations to account for this. If the validation that determines if one value was selected over the other fails then only validate the appropriate element. It would essentially be very similar to the show hide set of validations that you have. What this would do is allow the other elements to be validated based on weather or not the triggering validation was activated. This is also discussed more thoroughly in the help documentation.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...