jQuery Forum

Right, I've managed to get this half working now. I put my code into
a function, and put an onclick param on each <option> tag, so when
it's selected it runs my code:
example:
<script>
        function contactTypeVenue() {
            $(document.getElementById("cf_position")).hide();
            $(document.getElementById("cf_email")).hide();
        }
        
        function contactTypePerson() {
            
            $(document.getElementById("cf_position")).show();
            $(document.getElementById("cf_email")).show();
        }
        
        function contactTypeCompany() {
            $(document.getElementById("cf_position")).hide();
        }
</script>
<select name="contact_type" class="contact_type" title="This allows
you to select what kind of contact you are adding. Depending on your
options, different fields will appear for you to fill in."
onfocus="javascript:showToolTip();">
                        <option value="person"
onClick="javascript:contactTypePerson();">Person</option>
                        <option value="venue"
onClick="javascript:contactTypeVenue();">Venue</option>
                        <option value="company"
onClick="javascript:contactTypeCompany();">Company</option>
</select>
But now the problem I'm experiencing is when I use different
selections of options. For example, when I change it to company, it
removes the div cf_position, but not cf_email. When I then click
person, cf_email is already visible and causes the div to render
incorrectly.
Is their any way to check the state of a div tag first before
executing the code?

jQuery provides something like $('#id:visible'), which will select just visible elements. For your need, i think you could do something like this:
$("#div[@id^='cf_']").hide();
$("#id_you_need_to_show').show();
Either that, or hide both of the other divs when you need to show one.
<div><span class="gmail_quote">On 8/18/06, <b class="gmail_sendername">digital spaghetti</b> <<a href="mailto:digitalspaghetti@googlemail.com">
digitalspaghetti@googlemail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Right, I've managed to get this half working now.  I put my code into
a function, and put an onclick param on each <option> tag, so when
it's selected it runs my code:
example:
<script>
                function contactTypeVenue() {
                        $(
document.getElementById("cf_position")).hide();
                        $(document.getElementById("cf_email")).hide();
                }
                function contactTypePerson() {
                        $(document.getElementById("cf_position")).show();
                        $(document.getElementById("cf_email")).show();
                }
                function contactTypeCompany() {
                        $(document.getElementById("cf_position")).hide();
                }
</script>
<select name="contact_type" class="contact_type" title="This allows
you to select what kind of contact you are adding. Depending on your
options, different fields will appear for you to fill in."
onfocus="javascript:showToolTip();">
                                                <option value="person"
onClick="javascript:contactTypePerson();">Person</option>
                                                <option value="venue"
onClick="javascript:contactTypeVenue();">Venue</option>
                                                <option value="company"
onClick="javascript:contactTypeCompany();">Company</option>
</select>
But now the problem I'm experiencing is when I use different
selections of options.  For example, when I change it to company, it
removes the div cf_position, but not cf_email.  When I then click
person, cf_email is already visible and causes the div to render
incorrectly.
Is their any way to check the state of a div tag first before
executing the code?
On 18/08/06, digital spaghetti <<a href="mailto:digitalspaghetti@googlemail.com">digitalspaghetti@googlemail.com</a>> wrote:
>
> Hi there,
>
> I'm new to jQuery.  I've tried out a few AJAX things in the past, but I am very happy to settle on jQuery as it seems to have everything a developer could need :)
>
> I'm having a bit of trouble though, and I appologise if I sound thick, but I would like to use jQuery to create dynamic forms and I cannot seem to get it to work.
>
> I am creating a Contact tool, and with the tool I have a dropdown that allows you to select the type of contact (person, place, company, etc).  Based on the option selected, I want to present the required fields to the user, and remove fields not required from the view.
>
> I've tried to look through the docs, and cannot find what I am looking for.  What I want to do, is have a script that grabs the value from my select field (name="contact_type" class="contact_type") and based on this value, runs a short script to show and hide the required fields.
>
> I think once I get over this problem, the rest of the development should be relativly easy.
>
> Any help would be appreciated.
>
> Regards,
> Tane Piper
> No Half Measures
>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
</blockquote></div>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/