Hi Richie,
> Now,
> <select id="box2" onchange="ajaxUpdater('ajax_day', '/ajax/
> populate.php?show=day&month=' + getsel('box2')">
> <div id='ajax_regions'></div>
> </select>
>
> , doesn't work...
That's because it's invalid HTML. You can't put divs inside select
elements. I'm pretty sure only option and optgroup are allowed, but
in any case I'm certain div isn't. You can use the W3C Markup
Validator[1] to keep your HTML valid.
[1] http://validator.w3.org
With your updated example of the select box within the div and
replaced via an Ajax.Updater: Using innerHTML to create form elements
doesn't work reliably, and under the covers Ajax.Updater uses
Element#update, which uses innerHTML. Separate from your specific
problem of the event handler not being called (that could be easily
solved using Event#observe), you'll run into issues with some browsers
not recognizing the replaced select box at all. You pretty much have
to add form elements using DOM methods (appendChild and the like).
I take it the goal is to change the options available within the
select box when the value changes? (OT: Doesn't that make for a
jittery user experience?) Rather than using HTML, I think you're
better off manipulating the options array of the select box directly.
It's been years since I did that, so I'm sure what I used to do is old-
fashioned -- I'll leave it to you to Google changing the options, or
for someone who's done it more recently to chime in.
So, not a complete answer, but hopefully it's useful to know what's
going wrong...
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Feb 4, 12:41 am, Richie M <[email protected]> wrote:
> Hi,
>
> I have a form with three drop down select boxes in it. I'd like the
> second box to populate when an option is selected in the first, and
> for the third to populate when an option is selected from the second.
>
> In the first select box, I use onchange to call a php script:
>
> <select id='box1' onchange="ajaxUpdater('ajax_regions', '/ajax/
> populate.php?show=month&id=' + getsel('box1')">
> <option>something</option>
> </select>
>
> Now,
> <select id="box2" onchange="ajaxUpdater('ajax_day', '/ajax/
> populate.php?show=day&month=' + getsel('box2')">
> <div id='ajax_regions'></div>
> </select>
>
> , doesn't work, so I'm forced to use:
>
> <div id='ajax_regions'>
> <select id="box2">
> </select>
> </div>
>
> , and get my php code to output something like:
>
> <select id='box2' onchange="ajaxUpdater('ajax_day', '/ajax/
> populate.php?show=day&month=' + getsel('box2')">
> <option>1</option>
> </select>
>
> Unfortunately, the onchange in the second select box doesn't fire. Is
> this because it doesn't parse the javascript outputted by the php
> code?
>
> Is there a way around this? Or perhaps a solution to the div inside
> select problem?
>
> Thanks in advance!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
