MinusMyThoughts Posted September 24, 2006 Share Posted September 24, 2006 I just read through the other innerHTML post, but I'm still stumped. I'm pretty much brand new to everything but HTML, so I'm flailing a little.What I'm trying to do is get my dropdown box to populate an update page using innerHTML. What I'm attempting is to call the value of each option in as a variable that will determine (so far, using an if...else if...else statement) which innerHTML command to use. Here's where I've gotten. Forgive me if it's hideously wrong. Also, I don't know where to place the function call (either in the option or the select tag), so no call has been made. I've tried both with no luck, and come to the conclusion that I should figure out if my code works before I worry where I'm calling my function from. <html><head><script type="text/javascript"> <!-- var val = document.getElementById("pages").value; function buildPage(val); { if (val = "home") {document.getElementById("updater").innerHTML = "<h2>You selected home.</h2>"; } else if (val = "about") {document.getElementById("updater").innerHTML = "<h2>You selected about.</h2>" } else if (val = "services") {document.getElementById("updater").innerHTML = "<h2>You selected services.</h2>" } else if (val = "mediacredits") {document.getElementById("updater").innerHTML = "<h2>You selected media credits.</h2>" } else if (val = "testimonials") {document.getElementById("updater").innerHTML = "<h2>You selected testimonials.</h2>" } else if (val = "links") {document.getElementById("updater").innerHTML = "<h2>You selected links.</h2>" } else {document.getElementById("updater").innerHTML = "<h2>Please select which page you would like to edit.</h2>" } } //--></script></head><body><form><select name="pages"><option value="home">Home</option><option value="about">About</option><option value="services">Services</option><option value="mediacredits">Media Credits</option><option value="testimonials">Testimonials</option><option value="links">Links</option></select></form><div id="updater"></div></body></html> Am I even close? Any and all help is greatly appreciated...Jason Link to comment Share on other sites More sharing options...
Webworldx Posted September 24, 2006 Share Posted September 24, 2006 <html><head><script type="text/javascript"><!--function change_pages(val){ if(val == ""){ document.getElementById('updater').innerHTML = "Please select which page you would like to edit"; } else { document.getElementById('updater').innerHTML = "You selected " + val + "."; }}//--></script></head><body><form><select name="pages" onchange="change_pages(this.value);"><option value=""></option><option value="home">Home</option><option value="about">About</option><option value="services">Services</option><option value="media credits">Media Credits</option><option value="testimonials">Testimonials</option><option value="links">Links</option></select></form><div><h2 id="updater"></h2></div></body></html> How's that? I think it basically emulates what you were trying to do. I put the id on the h2 to save a bit of code, but obviously you can put it back on the <div> and add it to the innerHTML in the javascript. Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted September 24, 2006 Author Share Posted September 24, 2006 That worked wonderfully! Thanks so much for helping me!However, when I went to add the real content, the code broke. I'm trying to add a form into the change_pages() function. The uncondensed code that I know works is this: <form action=/"updatenews.php/" method=post><table border=/"0/" class=/"w600/"><tr><td colspan=/"2/" align=/"center/"><h2>News</h2></td></tr><tr><td align=/"right/" class=/"w100/"><b>Headline:</b></td><td align=/"center/" class=/"w500/"><input type=/"text/" name=/"newsHeadline/" class=/"w500/"><br/></td></tr><tr><td align=/"right/" class=/"w100/"><b>Body:</b></td><td align=/"center/" class=/"w500/"><textarea rows=/"15/" cols=/"20/" name=/"newsBody/" class=/"w500/"></textarea></td></tr><tr><td colspan=/"2/" align=/"right/"><input type=/"submit/" value=/"Update News/"></table></form> This didn't work for me either. Also, I changed the <h2> to a <p> for the sake of keeping text small. Is there a trick I haven't learned yet?Jason Link to comment Share on other sites More sharing options...
Webworldx Posted September 24, 2006 Share Posted September 24, 2006 It would be \" not /" :)If you're wanting to add that much content though, there is an easier way - drop it all onto the page completely, and hide it. .... select stuff here...<div id='home_content' style='display: none;'> ... all the home content HTML in here, form etc etc</div><div id='about_content' style='display: none;'> .... all the about content in here...</div> Then you just need to dodocument.getElementById('about_content').style.display="block";and it'll add it to the page. There's downsides - obviously all the content gets loaded onto the page every time it's accessed rather than progressively as JS would do - but if you can live with that - it might be quicker - and certainly cleaner Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted September 24, 2006 Author Share Posted September 24, 2006 It would be \" not /" I feel like a prize idiot. \" I would have pounded my head against the wall all day over that one...Thanks again! I'll probably do it your way. There aren't enough options to affect the load too negatively.You're a hero, sir. Thanks!Jason Link to comment Share on other sites More sharing options...
Webworldx Posted September 24, 2006 Share Posted September 24, 2006 No worries Link to comment Share on other sites More sharing options...
jhecht Posted September 25, 2006 Share Posted September 25, 2006 read up on ajax... it does what u want from what i can get Link to comment Share on other sites More sharing options...
Webworldx Posted September 25, 2006 Share Posted September 25, 2006 Why would you want to use ajax if it's just a simple form - with no large dynamic content? I'd understand if the form was bigger (which I added in the downsides), but as it was a small form - I don't think it's worth implementing an ajax interface for it. Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted September 26, 2006 Author Share Posted September 26, 2006 One more quick question: how do I implement the "else if" condition? I have to be doing something wrong, because my code breaks as soon as I put the extra "if" in there. I'm looking to select between each value of "val" with a different display. Would I be better off with a "switch" statement?Thanks!Jason Link to comment Share on other sites More sharing options...
Webworldx Posted September 26, 2006 Share Posted September 26, 2006 It's up to you really... switch() has relative speed differences in PHP, but not really that much in JS. if (val) { } else if (val) {} else if (val) {} else {} Link to comment Share on other sites More sharing options...
jesh Posted September 26, 2006 Share Posted September 26, 2006 One more quick question: how do I implement the "else if" condition? I have to be doing something wrong, because my code breaks as soon as I put the extra "if" in there.In your original post, you had:if (val = "home"){ ...}else if (val = "about"){ ...} Make sure you use the equality operator "==" rather than the assignment operator "=". if (val == "home"){ ...}else if (val == "about"){ ...} Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted September 27, 2006 Author Share Posted September 27, 2006 I think I love you. You've bailed me out yet again...Jason Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now