i have this here email form :: http://cogworks.beyondunreal.com/contact.php
and i want to make it so when you click on the dropdown box, the radio button to the left gets selected.
how do i achieve this?
| SitePoint Sponsor |
i have this here email form :: http://cogworks.beyondunreal.com/contact.php
and i want to make it so when you click on the dropdown box, the radio button to the left gets selected.
how do i achieve this?
There's no place like 127.0.0.1
Originally Posted by StoneViper
Okay, think i worked out a solution (NS4/IE):
Code:<script type="text/javascript" language="JavaScript"> <!-- function setRadio(active) { switch (active) { case 'leaders': i = 0; break; case 'groups': i = 1; break; case 'members': i = 2; } document.emailForm.emailwho[i].checked = true; } //--> </script> <form method="post" action="foo.php" name="emailForm"> <input type="radio" name="emailwho" value="leaders"> <select name="leaders" onfocus="setRadio('leaders')"> <option value="foo" selected="selected">foo</option> <option value="foo">foo</option> <option value="foo">foo</option> </select><br /> <input type="radio" name="emailwho" value="groups"> <select name="groups" onfocus="setRadio('groups')"> <option value="foo" selected="selected">foo</option> <option value="foo">foo</option> <option value="foo">foo</option> </select><br /> <input type="radio" name="emailwho" value="members"> <select name="members" onfocus="setRadio('members')"> <option value="foo" selected="selected">foo</option> <option value="foo">foo</option> <option value="foo">foo</option> </select> </form>
thanks for the reply. however, it does not work. unfortunatelly, i don't know any javascript, so i'm not sure what i'm doing wrong. i tried putting the js in the <head> and in the <body> with no luck either way. doens't seem to work in ie6 or firebird. i took note if it was case sensitive too. can you help me figure this out?
thanks
There's no place like 127.0.0.1
I just pasted the code from this page into a new document (includes header/body tags etc) in HomeSite and it works rather well in IE6 and Netscape 4.8, otherwise I'm not sure.
Just paste the code between <body> and </body>. You also should probably stick the JS in the header for good form.
Be sure to define both the name and value attributes in the <input> tags, for the radio buttons. Of course the radio's will all have the same name but different values.
The 'emailwho' object is really an array, and so each element in your radio button group is referenced by a numerical index. I put in a simple switch statement, to make it a little easier to work with.
Be sure and ref the function as such: setRadio('elementname')
You'll have to update the switch statment, each time you ad an element to your radio group. Another way would be to just ditch the switch statement and use only numbers...
i'm having fun with this, so perhaps i can write one that's a little more self explanatory, or better yet, can be pasted in without regard to how many radio groups are in the document -- something like that.
i do know about switch statements, and i tried to make sure it was moved correctly from this thread to my script, unfortunatelly, i can't just copy/paste the <form> code cause the <options> are built using php depending on what's in the database, it's not hard coded html. i hope i'm not missing somethingI'll go through your code and mine to make sure it's all the same, but i'll also await your new one
thanks
There's no place like 127.0.0.1
Hey Viper,
Well, yeah i'd meant to paste it in directly so you can at least verify that it works, before you begin adapting it, or running dynamic stuff. I always find it easiest to start really simple and then get progressively more complex.
happy halloween btw
lol, happy halloween
ok i copied and pasted the entire thing, without editing, into my html editor.
it still wouldn't work. i did find these errors
Error: Object Expected
on these lines
<select name="members" onfocus="setRadio('members')">
Last edited by StoneViper; Oct 31, 2003 at 21:15.
There's no place like 127.0.0.1
I don't get it, but javascript is so rarely consistent on any platform or even in the same browser, that I'm not suprised you get the Object Expected thing -- it seems that's the most common error.
Are you sure the form has been given a name in the version you're editing? The script needs to refer to the form by its name.
Let, me know if you figure anything out, I'm looking through some DOM stuff to see if there's a cooler way of doing it, or perhaps more inelligent.
I know the script works, but I'm also sure it's erroring for you too, JavaScript is like that.
even the js depends on the browser? i thought just html and the like had problems...
I checked everything, and it matches the straight copy/paste of your code to my html editor. each one is identical save a few tabindexes and <options>, both kind, my version, and the unedited version have the same errors.
too odd.
There's no place like 127.0.0.1
You guys are funny - and you're going to kick yourself when you hear what the solution is
Actually, you're code logic and symantics are 100% correct and perfect. What's wrong is your formatting and a slight oversight on browser compatibility.
With JavaScript embedded in HTML, you MUST have the comment tags <!-- and --> on separate lines from the code -- otherwise your code will be ignored by most (if not all) browsers. This is what your "object expected" error meant. It had no idea to do when your pulldowns called setRadio() because it technically didn't exist.
Format your javascript to look like this:
Always format your JS nicely like this (and leave the comment markers with the <script> tags -- it makes it MUCH easier to read and debug and keeps wacky browser problems like this from driving you insaneCode:<script type="text/javascript" language="JavaScript"> <!-- function setRadio(active) { switch (active) { case 'leaders': i = 0; break; case 'groups': i = 1; break; case 'members': i = 2; break; } document.emailForm.emailwho[i].checked = true; } //--> </script>
Lastly, you need to add duplicate calls to setRadio() for onclick() and onchange(). Not all browsers recognize onfocus().
Simply change your pulldown event calls like this:
In fact, you can really leave out the onfocus() and just rely on the other two for your needs.Code:<select name="leader" tabindex="6" onfocus="setRadio('leaders')" onclick="setRadio('leaders')" onchange="setRadio('leaders')">
Hope that helpsCode:<select name="leader" tabindex="6" onclick="setRadio('leaders')" onchange="setRadio('leaders')">
cheers, it works!!
thanks much !
There's no place like 127.0.0.1
Yes, In fact the trouble JavaScript has in adapting to the browser is worse in some ways then HTML alone. I built a script that works for checking form input in NS4.X and IE5 or 6 on the PC platform, but on the Mac it fails in the same browsers, and since we don't use Mac's at work it's easier to get out of touch with how inconsistent things are.
I love server-side scripting (PHP in particular) because all the functions and methods work as expected 99% of the time, and all of the errors in my scripts, are really *my* mistakes, rather then the mistakes of the browser in being able to understand the language correctly.
Netscape has Javascript versions: 1.0, 1.1, 1.2, 1.3, 1.5 being the latest
IE has Jscript (different thing) versions: 1.0, 2.0, 3.0, 5.0 being the latest
and then there is also ECMA script, which is supposed to be supported by both IE and Netscape, but it isn't.....really. IE also suppors client-side visual basic scripting or VBscript.
I'm using "JavaScript for the World Wide Web" by Tom Negrino and Dori Smith, which is really a great ref manual, and lays out most of the basics. Then you can also visit devedge.netscape.com for ref manuals on the latest verisons of JS and the DOM, if you were interested in getting up to date.
Thanks, guess in the version I had, it was pasting as it should with the comment markers above and below, but my intention all along was to abbreviate the code representation here, to keep you guys from having to scroll
So, I had always thought of it being in the header in the final version.
But you know what kid-DaileyI just learned something -- thanks
Good point, my mind was already working on that, I also realized that clicking on the radio buttons directly could mess things up, so those event handlers should be added to the <input> tags as well.Lastly, you need to add duplicate calls to setRadio() for onclick() and onchange(). Not all browsers recognize onfocus().
i'll keep that in mind. thanks
There's no place like 127.0.0.1
Cool, glad it works now. I dunno, you might be able to get by with only the onfocus. Looking in my ref....it's supposedly supported in ALL javascript browsers....so you should be good with that.i'll keep that in mind. thanks
just add the same handler to the <input> tag, to keep people from outsmarting your script.
Nevermind about adding the handler to <input> tag, i just tested the form again, and that would be retarded. sorry, about that.
i didn't put it in there anyways
There's no place like 127.0.0.1
I wish that were the case. I can't remember exactly which ones, but I tested with Mac/PC versions of all these (where applicable) and onfocus doesn't work in at least one or two of them: IE, NS, Opera, Moz, Camino/Chimera, Safari and Omniweb.
It sucks
Glad it works now, SV!
Don't worry -- we believe youonfocus doesn't work in at least one or two of them: IE, NS, Opera, Moz, Camino/Chimera, Safari and Omniweb.
It sucks
For me, it's to the point where I figure hitting one of the 2 bigs ones is pretty good, and unless I've got access to Mac's and Camino or Safari, there just isn't time to sweat all of that.
Maybe I'm communist or something, but the world needs to use either one browser, or stick to really tight standards. Browsers aren't a good place for creative differences.
lol - no doubt about that (browsers not being a good place for differences) Good news is that if you stick to the standardized stuff, Mac users won't have any trouble with your site.
And personally, I don't ever want to see one browser on the net. That would mean that one company/organization litterally owns the web and can do what they will with it. I'd rather have browser-compatibility issues.
LOL, i think MS already does, and it hasn't turned us all into droids yet (we just appreciate something that works). There is obviously a place for improved browsers, as long as they are fully standards compliant, and they stop trying to assume a proprietary format in hopes of being the only coffee shop in town. Do you think open source would have any place here? I could see the next browser being true open source and beating IE.
Honestly, I think the only reason IE got ahead (besides the platform advantage) was its consistent support of standards. Netscape just brought 7.1 (a real standards browser) a little too late in the game. NS 6 was so unbelievably bad, that everyone ran back to IE or telnet or something.
Then again, since when was a browser ever that important in the first place, until we all started feeling like there was a need to be online.
Above you mention ecma script, and almost dismiss it, which is a little dangerous since it IS the actual standard, and it is better supported on modern browsers than either javascript or jscript.Don't worry -- we believe you
For me, it's to the point where I figure hitting one of the 2 bigs ones is pretty good, and unless I've got access to Mac's and Camino or Safari, there just isn't time to sweat all of that.
Maybe I'm communist or something, but the world needs to use either one browser, or stick to really tight standards. Browsers aren't a good place for creative differences.
Also once you move away from the proprietry DOMs and use the standardsy ones then you have much more power over the document, and it is more consistent. However all of these versions of javascript are very similar and there is a large selection of stuff which is safe even if you need to support older non-standard browsers.
Thanks, I promise to read up on that -- been so busy with other things lately....perhaps trying to fix broken Java Scripts.
Using less browser oriented code is always a good thing.
Posting Permissions
Bookmarks