NYCPHP Meetup

[Allen Shaw]

Michael B Allen wrote:
> Basically I just want to dynamically insert or remove one element in a
> form. The form is normally just a select with a submit button
> immediately to it's right. But depending on what option in the select
> is selected, I want another select to be inserted between the first
> select and the button.
>
> So it's either <select1><button> or <select1><select2><button>.
>
> I would be perfectly happy with toggling the style visibility: visible
> or visibility: hidden but this doesn't change the position of the
> button. It always appears off to the right. I want the form to
> re-pack.
Hi Mike,

The properties you want to mess with on <select2> are display (not 
visibility) and disabled.

var select2 = document.getElementById('select2')  // or however you want 
to go about defining select2

To turn off <select2> use something like this:
select2.style.display = 'none'; // this will collapse select2 so it 
takes up no space and is invisible
select2.disabled = true;  // not sure if this is necessary (may be 
redundant given
                        // that display = 'none'), but it will ensure 
the element is not submitted
                        // in the form.

To turn on <select2> use something like this:
select2.style.display = 'block'; // or 'inline', depending on what your 
layout.
select2.disabled = false;  // not sure if this is necessary (may be 
redundant given
                        // that display != 'none'), but it will ensure 
the element is not disabled

For more on the 'display' property, see this link: 
<http://www.blooberry.com/indexdot/css/properties/classify/display.htm>  
That site is slightly dated but still incredibly useful for 
understanding CSS properties;  I've been using it as a primary reference 
for years and find it only ages in its failure to report CSS support for 
newer browsers, which is information I can get elsewhere.

Good luck,
Allen


-- 
Allen Shaw
slidePresenter (http://slides.sourceforge.net)