HTML - Conditional Select Boxes
hi All,
I want to add two select(dropdown lists) boxes. Content of first select box will be name of countries. And the other select box which will contain states of those counties should show the values according to the value selected in first select box. Eg: Suppose I select America then it should only show the states of America. I want to know whether it is possible using simple html? or javascript is required? and how? Regards, Jaas Similar TutorialsI have a custom order form where the choices available in one box should be conditional on another one. I want both the drop down boxes to display on the same page. For instance, the first box has regular, superior and deluxe. The second box would have red, orange, violet, indigo, blue. If user chooses regular, all colour options would be available.. If user chooses superior, red orange violet would be available If deluxe, only red available. How would I do this? I'm creating a form framed in a table. I want to have 2 textboxes and 1 select box in one row of the table. The Last Name, First Name and Age. When I create the row the fields are fine, but there's spacing after each field that I need to decrease in size to allow everything to fit correctly. Here's the code I have right now Code: <table summary="form" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <input type="text" name="childlname" value="" size="20"> </td> <td> <input type="text" name="childfname" value="" size="20"> </td> <td> <select name="childage" align="right" width="5"> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> </td> </tr> </tbody> </table> Thank you in advance for any help Mike I am having a problem with IE7 rendering this page's last two select boxes. It renders fine in Firefox. It doesn't seem to like the height properties of the select boxes being set to percentages. Thanks in advance HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>BLAH BLAH BLAH, WEIRD IE BEHAVIOUR</title> </head> <body id="bodyBODY"> <form name="frmFORM" id="frmFORM"> <table align="center" width="100%" height="800px" border="1"> <tr> <td style="width: 30%; text-align: center; vertical-align: top; height: 90%;"> <div> TITLE 1<br /> </div> <select name="select1" size="2" id="select1" style="height: 90%; width: 100%;"> <option value="00023">00023</option> <option value="04988">04988</option> <option value="05560">05560</option> <option value="05565">05565</option> <option value="05915">05915</option> <option value="05M">05M</option> <option value="06970">06970</option> <option value="07M">07M</option> <option value="09015">09015</option> <option value="09020">09020</option> <option value="09030">09030</option> <option value="09065">09065</option> <option value="09275">09275</option> <option value="09330">09330</option> <option value="09335">09335</option> <option value="09340">09340</option> <option value="09441">09441</option> <option value="09442">09442</option> <option value="09491">09491</option> <option value="09615">09615</option> <option value="09763">09763</option> <option value="09810">09810</option> </select> </td> <td style="width: 30%; text-align: center; vertical-align: top;"> <div> TITLE 2<br /> </div> <select name="select2" id="select2" size="2" style="height: 90%; width: 100%;"> <option value="09330">09330</option> <option value="09335">09335</option> <option value="09340">09340</option> <option value="09441">09441</option> <option value="09442">09442</option> </select> </td> <td style="width: 40%; text-align: center; vertical-align: top;"> <div> TITLE 3<br /> </div> <select name="select3" id="select3" style="height:90%;width:100%;" size="2"> <option value="A-008FXD">A-008FXD</option> <option value="A-1251BOLTE">A-1251BOLTE</option> <option value="A-1251F31">A-1251F31</option> <option value="A-6901RW7">A-6901RW7</option> <option value="A-6901RW8">A-6901RW8</option> <option value="A-6901RW9">A-6901RW9</option> <option value="A-6901SA1">A-6901SA1</option> <option value="A-6901SA2">A-6901SA2</option> <option value="G-813R0070">G-813R0070</option> <option value="G-813R0127">G-813R0127</option> <option value="G-813R0174">G-813R0174</option> <option value="G-813R0192">G-813R0192</option> <option value="G-813R6500">G-813R6500</option> <option value="G-813RDJX">G-813RDJX</option> <option value="G-813RGEL">G-813RGEL</option> <option value="G-813RICM2">G-813RICM2</option> <option value="G-813RLIQD">G-813RLIQD</option> <option value="G-813ROPT">G-813ROPT</option> <option value="G-813RPCC">G-813RPCC</option> <option value="G-813RQTM">G-813RQTM</option> <option value="G-813RTAB">G-813RTAB</option> </select> </td> </tr> </table> </form> </body> </html> Hi, I have a select box with values 1, 2 and 3. When I select '1', I want right next to it 1 inputbox with id A. When I select '2', I want on the same place 2 inputboxes (with other IDs B and C), and so on ... I tried 1) Putting the 3 spans immediately after the select box and switch visibility between hidden and visible accordingly. Problem he all spans take some space. So if I select 2, it shows me correctly the 2 inputboxes B and C, but there is an empty space between the select box and the inputboxes since the first span is there (invisible). I want the boxes immediately next to the select box. 2) Putting 3 spans (span1, span2, span3, containing 1 box, resp. 2 boxes and so on) somewhere invisible. And then using 1 span next to the select box. On change of choice: document.getElementById("span").value = document.getElementById("span2").value; Problem he the boxes are not shown in span, just empty space. Who has a Good solution? Thanks alot can i put a conditional statement in a .css file ? im having trouble with getting my div & or hr to work in every browser i fix something on 1 browser i loose something from another when im coding the site... i want to know if i can put a statement that if browser internet explore execute this set of rules, elseif execute these set of rules... Is it possible to combine ie's conditional if's? I basically want (without the use of js) to be able to send a message to IE5 / 5.0 / 5.5 / 6 users. But i want to keep HTML download to a min.... Therefore can i combine the conditional iff's? Hi I am using a conditional comment on a website to load a css sheet for IE6 and below <!--[if lte IE6]> <link href="expleonardo.css" rel="stylesheet" type="text/css"> <![endif]--> In IE6 it loads the sheet and does what I want it to do but the following: <!--[if lte IE6]> <![endif]--> shows at the top of the page on a white line. The website address is www.errolsimprov.co.uk/leonardo/index.htm Any help would be greatly appreciated. Thanks John Hey, Struck with a problem, how to excute scripts conditionally i have two scripts in one html, but wanna excute only one based on condition or button click <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/2t3ZysHg3Cc&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2t3ZysHg3Cc&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bT_8Dvk5GIQ&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bT_8Dvk5GIQ&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Tips please I made two style sheets for my project. First one is style.css, and the scond one is ie6.css which is intentionally left blank. This latter (ie6.css) is, ofcourse, made specialy for IE6 and in HTML head section I put
Code: <!--[if lt IE 7.0]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> I can't realise what's wrong, since when I preview site in IE6 it acts like conditional statement is not there. It should display page with no style, but still the page is displayed with style.css styling. You can check it out on: http://www.byethost.com/ for page is very simple. Thank's in advance! <![if gt IE 6]></a><![endif]> will not validate. How can i modify this so it will? Is it possible that the inclusion of a script on a page be conditional to the web server that it's on? Example: if(the page is on Web Server 1) { Include Script 1 } else if(the page is on Web Server 2) { Include Script 2 } I'm working on several Google Maps web pages (10-12 at a time). I test the pages on our development web server and then move them to our public web server. The problem is that there is a different Google Maps Key for each web server that must be included on the web page. Right now, I have to comment out one and uncomment the other every time I copy these pages from one server to the other. Example of GM Key on Web Server 1: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADCKg1uyd0NtoV0-TYT13MBROYM5OA_GDIvgonnUJTWljoaMDChT_7EqrLEb8A0mLzFhHNCgkaMCUIw" type="text/javascript"></script> Example of GM Key on Web Server 2: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA2Aa0y9qM0iE5-qtohbB_BBR7Dq-sN_oqy05rIf4WVBwd942bvhSeBq4siSIiJWbTtlmDhuk0aADGRA" type="text/javascript"></script> I have a series of checkboxes and the user can check one or more of them. When I display their submission back to them for verification, I want to display only those which have been checked. I have a form processor (FormProcessorPro) and they tell me that they can't guarantee that PHP code will parse correctly. And they're correct, it isn't parsing correctly - unless I'm missing something. Here's an example of what I'm trying to do: <?php $blmc = "[blmc-gp]"; // [blmc-gp] FPPro's access to field names if ($blmc == "YES") { echo "<tr>"; echo "<td align="right" class="maintext">General Pastor :: </td>"; echo "<td><font size="2">[blmc-gp]</font></td>; echo "</tr>"; } ?> First question, should the above work in suppressing the table row if the checkbox hasn't been checked? Second question, is there a way in pure HTML (no PHP, PERL or JAVA) to accomplish my goal of suppressing any table rows where the checkbox hasn't been checked? Thank you, Roy HTML Code: <!--[if IE]> <div id="header"> <table align="center"><tr> <td align="center"><span class="chosen">< Home</span></td> <td align="center"><a class="nav" href="NewsReviews.html" title="news">< News & Reviews</a></td> <td align="center"><a class="nav" href="Gallery.html" title="Gallery">< Gallery</a></td> <td align="center"><a class="nav" href="http://musichasm.freeforums.org/" title="forums">< Forum</a></td> <td align="center"><a class="nav" href="HelpContact.html" title="contact">< Contact Us</a></td> <td align="center"><a class="nav" href="Underground.html">< Underground</a></td> </tr></table> </div> <![endif]--> <!--[if ! IE]>--> <div id="header"> <span class="chosen">< Home</span> <a class="nav" href="NewsReviews.html" title="news">< News & Reviews</a> <a class="nav" href="Gallery.html" title="Gallery">< Gallery</a> <a class="nav" href="http://musichasm.freeforums.org/" title="forums">< Forum</a> <a class="nav" href="HelpContact.html" title="contact">< Contact Us</a> <a class="nav" href="Underground.html">< Underground</a> </div> <!--<![endif]--> That is my coding for a CSS menu which fixes a 'ghost text' bug in IE 6 and lower... It produces the proper result in IE, FF, and Opera, but the only problem is that dreamweaver sees them both as comments, and does not display it in design view....I just upgraded to CS3, but MX and 8 both showed the menus....any ideas? Hi everyone, just wondering if anyone could help me with a problem I'm having making an HTML form? I have been following directions on this website: http://www.w3schools.com/html/tryit....ryhtml_select2 and learned to make a drop down box to my form. So far, this is it: HTML Code: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br> Artist: <select name="artist"> <option value="the minutemen">The Minutemen</option> <option value="Planet Smashers">Planet Smashers</option> <option value="crass">Crass</option> <option value="Madonna">Madonna</option> <option value="the misfits">The Misfits</option> Album: <select name="album"> <option value="album">album</option> </select> </form> So what I want to do now, is have it so if the user clicks on Madonna under the "artist" drop down box, the "album" drop down box will let the user select one of Madonna's albums, but only hers (not any of the other artists' albums). And if the user clicks "Crass" then the "album" drop down box will change and only show Crass' albums, etc. Is there a way to do this in HTML? I am designing the site using notepad (no dreamweaver or anything) and I am running WinXP. My browser is Firefox. I don't really know anything about forms. Thanks for your time! Is it possible that the inclusion of a script on a page be conditional to the web server that it's on? if(the page is on Web Server 1) { Include Script 1 } else if(the page is on Web Server 2) { Include Script 2 } I'm working on several Google Maps web pages (10-12 at a time). I test the pages on our development web server and then move them to our public web server. The problem is that there is a different Google Maps Key for each web server that must be included on the web page. Right now, I have to comment out one and uncomment the other every time I copy these pages from one server to the other. Example of GM Key on Web Server 1: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADCKg1uyd0NtoV0-TYT13MBROYM5OA_GDIvgonnUJTWljoaMDChT_7EqrLEb8A0mLzFhHNCgkaMCUIw" type="text/javascript"></script> Example of GM Key on Web Server 2: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA2Aa0y9qM0iE5-qtohbB_BBR7Dq-sN_oqy05rIf4WVBwd942bvhSeBq4siSIiJWbTtlmDhuk0aADGRA" type="text/javascript"></script> i have two radio boxes in a jsp using html and i want to make one checked based on a condition. I can do that in php but i don't know how to do that using jsp. Can anyone help me. out.println("<tr><td>Billing Model"); out.print("<tr><td><input type='radio' name='appStatusDescription'value='0' >Prepaid<br>"); out.print("' </td>"); out.print("<td><input type='radio' name='appStatusDescription'value='1'>Postpaid<br>"); out.print("' </td></tr>"); These are the two radio buttons and based on the return value of this i want either one of them checked <%if((app.getBillingModel)==0){%>prepaid checked<%}%> Hi all, I need your help. I have created an HTML web form that's processed by a PHP script. It works absolutely fine but I now need to do add a couple of conditional fields on this in this HTML Form which I don't know how to. The first field in the form is Presenter's Name. Underneath this field, I want to have a checkbox stating "Click here if additional Presenters". As soon as this option is checked off, a new input text field should appear underneath it and at the bottom of the form, a text box should appear for additional presenter's bio. How do I do that? Thanks a trillion in advance for your help. |