HTML - Enabling/disableing Form Elements With Javascript
I am trying to set up a contact form for a website I am building. We will be posting a couple of the messages we recieve on different pages on the site. To avoid having too many contact forms, we've lumped them all together into one, using a Drop Down Form Element. I am trying to set it up so that when certian elements are selected from the "Who would you like to contact?" dropdown menu, a check box will come up saying wheather or not they mind us posting their message on the site. I'm attempting to do this using Java Script and this is the code i've been using...
PHP Code: <script language="javascript"> function enableaccept() { var who = document.theForm.elements['who'] var accept = document.theForm.elements['accept'] if (who.value=="N") { accept.disabled = true } else { accept.disabled = false } } </script> and in the dropdown menu, this is how i have set it up to work... PHP Code: Who would you like to contact?<br> <select size="1" name="Who"> <option></option> <option value='n' onClick="enableaccept()">__________</option> <option value='y' onClick="enableaccept()">Testimonials</option> <option value='y' onClick="enableaccept()">Praise Reports</option> <option value='y' onClick="enableaccept()">Request Prayer</option> <option value='n' onClick="enableaccept()">Booking Information</option> <option value='n' onClick="enableaccept()">Technical Support</option> </select> (The _________ is where a name should go that I chose not to put out on the forums, no offense to anyone...) For some reason, the check box is still enabled no matter what, and I'm so utterly confused...I'm still rather new to Javascript, so there may be something wrong with my coding, but it all seems that it would make sense...if you could help me out, that would be greatly appreciated In Christ Alone, Fire Fall D0wn Similar Tutorialshello.. so i want to make a website that has the same features as THIS ONE where you have to click on all the links that are on there before entering the site. if click ENTER it wont let you continue unless you have clicked on all the ADD images. thats the only example i found. how do you do that??? thank you for your help! Hey All! Am new to this HTML code been a VB programer for a while now!!! I am trying to enable radio buttons depending on what a use selects from a drop down combo box!!!!! help please here is what have already done!!! But this done not work!!!! <div> <select name="printer" size="1" id="printer" class="combo_box_txt"><?php /* onChange="ticket_print.submit(); */ ?> <option value="">Select Printer</option> <option value="KESW_LABELS2">ASM Printer</option> <option value="KESW_LABELS6">Buyers Printer</option> <option value="KESW_LABELS7">Reciving Printer</option> </select> </div> <?php if ( $printer == "") { ?> <strong>Select your ticket Size :</strong> <div> <input type="radio" name="size_ticket" id="size_ticket" value="_lge" disabled>Large <input type="radio" name="size_ticket" id="size_ticket" value="_med" disabled>Medium </div> <div class="submit"> <button style="font-size:20px; ; color:white; background-color:#FF0000; height:40px; width:120px;" name="publish_id" value="PRINT" type="submit" disabled>PRINT</button> <button style="font-size:20px; font-weight:bold; color:white; background-color:#FF0000; height:40px; width:120px;" name="publish_id" value="PDF" type="submit">PDF</button> </div> <?php } else { ?> </div> <strong>Select your ticket Size :</strong> <div> <input type="radio" name="size_ticket" id="size_ticket" value="_lge" checked>Large <input type="radio" name="size_ticket" id="size_ticket" value="_med" >Medium </div> <div class="submit"> <button style="font-size:20px; ; color:white; background-color:#FF0000; height:40px; width:120px;" name="publish_id" value="PRINT" type="submit" >PRINT</button> <button style="font-size:20px; font-weight:bold; color:white; background-color:#FF0000; height:40px; width:120px;" name="publish_id" value="PDF" type="submit">PDF</button> </div> <?php } ?> thanks in advance!!! I created a form with html. At the end of the form there are two buttons, the button "entry", and the button "reset". When clicking on "entry" button i want to print the form's elements. How can i do it? Hi, I have a form that has a bunch of cascading drop downs - something like Country->State->City->. Each subsequent drop down is populated based on what is selected on the preceding one. What I am having trouble with is the positioning of the labels for these dropdowns. For ex., I want the word 'Country' written exactly above the Country dropdown, the word 'State' above the State dropdown and so on. Unfortunately, anything I try doesn't seem to work. I have used every CSS property I thought would help - margin, position, padding etc., but nothing works. The problem is when I resize the window the labels and the dropdowns are thrown out of whack and it becomes difficult to figure out just by looking which label belongs to which dropdown box. How do I fix this and align the form with their respective labels and make it independent of the size of the window? Thanks! if you go to my website, http://www.freewebs.com/rollingdice/index.htm, you'll see that there is a single rss feed from googles Sci/Tech section. I also have an rss feed from HackADay.com but for some reason i can't get it to display correctly when i try to position it. I've tried everything from making a div around the javascript element to giving it an id and setting positioning in a css file. If i dont have the id or div around it the hackaday rss would just display under the google rss in a very slopy way. Can anyone help me out? Hi, I have a page that uses AJAX to set a variable, the variable is either true or false. On the page there is a form with a text input, i would like the variable to dictate whether the element is read only or not. So instead of: <input name="cd" value="title" readonly="readonly" /> I would rather something like: <input name="cd" value="title" readonly="$lock" /> Note: I am aware that $lock is PHP but I am not familiar with the syntax in this instance. Thanks in advance, Tom Hi: I would like the freedom to position <input> elements of a form to specific places on my page. What is the proper way to do that please ?? Thanks, -Mel Smith I have a form where a select list can be updated by clicking 'update' next to it. When this is clicked I would ideally like just that to be updated, but I do not think this is possible. I was thinking of having two form actions, one that submits the form as usuall, but one that submits the form somewhere else, depending on which submit button is clicked. If I could have two submit buttons, I could use one to submit the form back to the same script, with the script re-filling the form elements that where filled out, and the select box would then update. So, my main question is...... Is there a javascript submit function that can change the destination of the form? Perhaps this should be in the javascript section! I have created a nice Newsletter Registration form, but I would really like to modify the form so that instead of displaying the browsers default images for text fields, checkboxes, etc, I want it to display my images that I have created. Is this possible without stepping into flash? Thanks Guys! -NH I have a form but a text field and a hidden field don't come in form elements.I am alerting all form elements in a javascript function which is invoked on press of a button and these two form elements don't come. Any idea why that will happen. JS function which alerts the form elements is as follows :- function populateSubmitProfile() { var i =0; alert("Number of forms "+document.forms.length) ; for( i = 0 ; i < document.forms[0].elements.length ; i++) { alert("Name of the elements :"+document.forms[0].elements[i].name) ; } } How do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. Is it possible to add some form code to this javascript HTML Code: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Contact</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="imagetoolbar" content="false"> <meta name="generator" content="LMSOFT Web Creator Pro, Version:4.0.0.4"> <META NAME="KEYWORDS" CONTENT="Cleaning Contractor Cleaner Coronet Macquarie Park North Ryde Nth Ryde Epping Beecroft Carlingford Parramatta Silverwater Rose Hill"> <META NAME="DESCRIPTION" CONTENT="Coronet Cleaning Services provide a professional cleaning service for Offices, Real Estate, Clubs and Office Buildings in and around Sydney.Areas North Ryde,Maquarie Park,Epping,Beecroft,Carlingford,Parramatta,Silverwater,Rose Hill"> <META NAME="AUTHOR" CONTENT=""> <META NAME="CREATION_DATE" CONTENT=""> <META HTTP-EQUIV="CONTENT-LANGAGE" CONTENT=""> </head> <script type="text/javascript" src="./lmpres70.js"></script><noscript><br></noscript> <script type="text/javascript" src="./menumodel002.js"></script><noscript><br></noscript> <body onresize=PosPage(2,5,1.000000,1.000000); bgcolor="#ffffff" > <DIV STYLE="position:absolute; visibility:hidden; left:0; top:0; width:0; height:0;"> [<a href='./index.html'>./index.html</a>]<br> [<a href='./company.html'>./company.html</a>]<br> [<a href='./about_us.html'>./about_us.html</a>]<br> [<a href='./contact.html'>./contact.html</a>]<br> [<a href='http://www.lmsoft.com/'>Web Creator</a>] [<a href='http://www.lmsoft.com/'>LMSOFT</a>] </DIV> <DIV id=lmwcbackpanel style="visibility:visible;position:absolute;left:0;top:0;width:1280;height:800;clip:rect(0,1280,800,0);"> <DIV id=Page style="visibility:visible;overflow:hidden;position:absolute;z-index:1;left:0;top:0;"> <a name=#anchor_Page></a><IMG id=LMImagePage src="./lmimginv.gif" style="width:1280;height:800;border:0;"> </DIV> <DIV id=Img7 style="visibility:visible;overflow:hidden;position:absolute;z-index:2;left:0;top:-1;"> <a name=#anchor_Img7></a> <IMG id=LMImageImg7 src="./images/~gen_img7_10.jpg" style="width:1280;height:600;border:0;"></DIV> <DIV id=Img2 style="visibility:visible;overflow:hidden;position:absolute;z-index:3;left:71;top:90;"> <a name=#anchor_Img2></a> <IMG id=LMImageImg2 src="./images/~gen_img2_00.jpg" style="width:820;height:620;border:0;"></DIV> <DIV id=GBackground style="visibility:visible;overflow:hidden;position:absolute;z-index:4;left:0;top:0;width:0;height:0;"> <a name=#anchor_GBackground></a> </DIV> <DIV id=GLeft style="visibility:visible;overflow:hidden;position:absolute;z-index:5;left:0;top:0;width:0;height:0;"> <a name=#anchor_GLeft></a> </DIV> <DIV id=Img6 style="visibility:visible;overflow:hidden;position:absolute;z-index:6;left:86;top:118;"> <a name=#anchor_Img6></a> <IMG id=LMImageImg6 src="./images/~gen_img2_20.jpg" style="width:780;height:30;border:0;"></DIV> <DIV id=Img9 style="visibility:visible;overflow:hidden;position:absolute;z-index:8;left:524;top:118;"> <a name=#anchor_Img9></a> <IMG id=LMImageImg9 src="./images/~gen_img9_00.jpg" style="width:1;height:30;border:0;"></DIV> <DIV id=Img5 style="visibility:visible;overflow:hidden;position:absolute;z-index:9;left:306;top:118;"> <a name=#anchor_Img5></a> <IMG id=LMImageImg5 src="./images/~gen_img9_00.jpg" style="width:1;height:30;border:0;"></DIV> <DIV id=Img21 style="visibility:visible;overflow:hidden;position:absolute;z-index:10;left:195;top:118;"> <a name=#anchor_Img21></a> <IMG id=LMImageImg21 src="./images/~gen_img9_00.jpg" style="width:1;height:30;border:0;"></DIV> <DIV id=Img22 style="visibility:visible;overflow:hidden;position:absolute;z-index:11;left:415;top:118;"> <a name=#anchor_Img22></a> <IMG id=LMImageImg22 src="./images/~gen_img9_00.jpg" style="width:1;height:30;border:0;"></DIV> <DIV id=GMenu style="visibility:visible;overflow:hidden;position:absolute;z-index:12;left:0;top:0;width:0;height:0;"> <a name=#anchor_GMenu></a> </DIV> <DIV id=Text17 style="visibility:hidden;position:absolute;z-index:13;left:495;top:175;"> <a name=#anchor_Text17></a> <DIV id=LMTxtText17 style="visibility:inherit;position:relative;left:5;top:5;width:186;height:57;"> <font face='Arial'> <div align="left"><font face="Times New Roman" color="#ffffff" size="4"><span style=" font-size:14pt"><b><br /> </b></span></font></div> <div align="left"><font face="Arial" color="#ffffff" size="5"><span style=" font-size:20pt"><b> </b></span></font><font face="Arial" color="#808080" size="5"><span style=" font-size:20pt"><b>Contact</b></span></font></div> </font> </DIV> </DIV> <DIV id=Img4 style="visibility:visible;overflow:hidden;position:absolute;z-index:14;left:454;top:234;"> <a name=#anchor_Img4></a> <IMG id=LMImageImg4 src="./images/~gen_img3_00.jpg" style="width:400;height:1;border:0;"></DIV> <DIV id=GCenter style="visibility:visible;overflow:hidden;position:absolute;z-index:15;left:0;top:0;width:0;height:0;"> <a name=#anchor_GCenter></a> </DIV> <DIV id=GForm style="visibility:visible;overflow:hidden;position:absolute;z-index:16;left:0;top:0;width:0;height:0;"> <a name=#anchor_GForm></a> </DIV> <DIV id=Text1 style="visibility:hidden;position:absolute;z-index:17;left:527;top:92;"> <a name=#anchor_Text1></a> <DIV id=LMTxtText1 style="visibility:inherit;position:relative;left:15;top:15;width:349;height:53;"> <font face='Arial'> <p style="margin-left:0mm; margin-right:0mm; text-indent:0mm; margin-top:1.76mm; margin-bottom:1.76mm;"><font face="Verdana" color="#ffffff"><span style=" font-size:12pt">Call</span></font><font face="Verdana"><span style=" font-size:12pt"> </span></font><font face="Verdana" size="5"><span style=" font-size:20pt"> </span></font><font face="Arial" size="2"><span style=" font-size:10pt"> </span></font><font face="Times New Roman" color="#ffffff" size="4"><span style=" font-size:14pt">0411 590 735 or 0421 641 653</span></font></p> <div align="left"> </div> </font> </DIV> </DIV> <DIV id=Img8 style="visibility:visible;overflow:hidden;position:absolute;z-index:18;left:86;top:166;"> <a name=#anchor_Img8></a> <IMG id=LMImageImg8 src="./images/cc4.jpg" style="width:352;height:71;border:0;"></DIV> <DIV id=Img10 style="visibility:visible;overflow:hidden;position:absolute;z-index:19;left:471;top:208;"> <a name=#anchor_Img10></a> <IMG id=LMImageImg10 src="./images/cc1.jpg" style="width:31;height:17;border:0;"></DIV> <script type="text/javascript"> //LMSOFT Web Creator Pro, Version:4.0.0.4 //LMSOFT Kernel 70 var LMObjects = new Array(); var pub_home = "./index.html" var objindex=0; var Stretch=2; var Position=5; var ScaleW=1.000000; var ScaleH=1.000000; var fontbase=96.; var isdisplay=false; //--------------------------------------------------------------------------------------------- try { if(isValideBrowser(7.00,5.00)) { InitResources(); //--------------------------------------------------------------------------------------------- LMObjects[objindex++] = LMPage("Page",null,null,null,0); LMObjects[objindex++] = LMImage("Img7",1,0,null,0,null,null,null,null,0); LMObjects[objindex++] = LMImage("Img2",1,0,null,0,null,null,null,null,0); objlist = new Array(); objlist[0] = "Img7"; objlist[1] = "Img2"; LMObjects[objindex++] = LMGroup("GBackground",1,objlist); objlist = new Array(); LMObjects[objindex++] = LMGroup("GLeft",1,objlist); LMObjects[objindex++] = LMImage("Img6",1,0,null,0,null,null,null,null,0); menumodel002Show(86, 118, "GMenu2"); LMObjects[objindex++] = LMImage("Img9",1,0,null,0,null,null,null,null,0); LMObjects[objindex++] = LMImage("Img5",1,0,null,0,null,null,null,null,0); LMObjects[objindex++] = LMImage("Img21",1,0,null,0,null,null,null,null,0); LMObjects[objindex++] = LMImage("Img22",1,0,null,0,null,null,null,null,0); objlist = new Array(); objlist[0] = "Img6"; objlist[1] = "GMenu2"; objlist[2] = "Img9"; objlist[3] = "Img5"; objlist[4] = "Img21"; objlist[5] = "Img22"; LMObjects[objindex++] = LMGroup("GMenu",1,objlist); branchlist = new Array(); LMObjects[objindex++] = LMText("Text17",1,0,null,0,null,branchlist,null,null,5,5,5,5); LMObjects[objindex++] = LMImage("Img4",1,0,null,0,null,null,null,null,0); objlist = new Array(); objlist[0] = "Text17"; objlist[1] = "Img4"; LMObjects[objindex++] = LMGroup("GCenter",1,objlist); objlist = new Array(); LMObjects[objindex++] = LMGroup("GForm",1,objlist); branchlist = new Array(); LMObjects[objindex++] = LMText("Text1",1,0,null,0,null,branchlist,null,null,15,15,15,15); LMObjects[objindex++] = LMImage("Img8",1,0,null,0,null,null,null,null,0); LMObjects[objindex++] = LMImage("Img10",1,0,null,0,null,null,null,null,0); //--------------------------------------------------------------------------------------------- } }catch(e) { alert(e.message); } SetBaseColor(0x3f0,0x3f0,0x7a); if(isdisplay==true) GetDisplayInfo("","",0,"","./"); else LMObjectAnimate(Stretch,Position,ScaleW,ScaleH); </script><noscript><br></noscript> </DIV> </body> </html> have a form.. has certain input fileds like - sptn, rptn, mps, mpr etc am trying to validate all entries to be entirely numeric and within range if (sptn>0 && sptn<65535 && rp>0 && rp<65535 && rptn>0 && rptn<65535 && mps>0 && mps<65535 && mpr>0 && mpr<65535) alert("all values ok"); problem is => this works even if i enter any of the values as =-=-=- or ./,/.,-= or any other junk characters but this snippet works fine if (spn>99 && spn<=999 && rpn>99 && rpn<=999) alert("ok"); please advise Why is this not working? (when i search hiscores it works, but not Google) Quote: <html> <head> <title></title> <script type="text/javascript"> function action( inStr ){ var a = "http://hiscore.runescape.com/hiscorepersonal.ws?user1="; var b = "http://www.google.com/search?q="; var c = document.sform; if( inStr == "h" ){ c.action = a; }else if( inStr == "g" ){ c.action = b; }else{ alert("I don't know where you want to go!!!"); } c.submit(); return true; } </script> </head> <body> <form method="get" action="#" target="_blank" name="sform"> <input name="user1" size="12" maxlength="12" value="" style="font-size: 10px;" type="text"> </form> <br> <input type="button" name="btnH" value="Hiscores" style="font-size: 10px;" onclick="action('h');"> <input type="button" name="btnG" value="Google" style="font-size:10px" onclick="action('g');"> </body> </html> Hi, I need some help. I am using a script which breaks down the cookie information to retrieve a cookie ID. This ID is then displaying using the following function: Code: <script type="text/javascript">var gac = new gaCookies(); document.write(gac.getUniqueId());</script> I have a form which my site visitors can fill in. On the form there is a text field called CookieID. What i am after, is getting the output of the code above to become the 'value' of the field... I am using the following javascript to populate the filed when the page loads: Code: function initForm(){ document.getElementById("Field110").setAttribute("value", "text_to_display"); } However, this function can only be used to display 'text' not html or a script. Does anyone have any insight as to how this could be done? Any help appreciated! I want to have the user enter text, then click a "Save" button of some sort, and JavaScript save the text as a variable. I for the life of me can't figure out how. HELP!!! does any 1 know if it is possible to have a function in scripts which opens a new window form of width=250,height=400' i want it to open but i want to use a script so that onclick returns that functon does any1 know how to make that script please helpppppppp i want it to open new window from using script please helpppp So I've been trying to set up a search box to blank out its default text when clicked, and reappear when it goes away (if empty). The script works fine--I know that much. However, when using it inside a table inside a form, it seems to fail every single time. Even "this.value=' ' " falls flat on its face. I'm relatively new to HTML, so please bear with me. Below is the script, a text box it does work in, and then the box I'm trying to make it work in. Quote: <script type="text/javascript"> function clickIn(field){ if (field.value==field.defaultValue){ field.value=''; } } function clickOut(field){ if (field.value==''){ field.value=field.defaultValue; } } </script> <form> <input type="text" name="text" id="test" value="test" onfocus="clickIn(this)" onblur="clickOut(this)"/> </form> <form> <tr> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--Search Box Dimensions--> <input type="text" title="Search Terms" name="lookfor" id="search" value="Search the Catalog" onfocus: "clickIn(this)" onblur="clickOut(this)" style="width:300px; border:0px solid; height:50px; padding:0px 3px; position:relative;"/> </td> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--The search button--> <input type="image" value="Go" src="Search Button.jpg" style="border-style: none; width: 50px; height: 50px;"/> </td> </tr> </table> </form> I'm trying to understand the need for <div> elements, couldnt we do the same things with a <p> element. I understand the <span> element because it allows you to have box models for inline elements. Is <div> mostly to keep things organized and easy to read? This is my first project using CSS and anything other than basic HTML and it's been going good so far. The page I'm designing is for my new guild on World of Warcraft (yes I'm addicted) and my problem is with the Content DIV i created. The site is http://twilightsdawn.50webs.com/index.html In the code, I nested DIV elements containing the actual news posts themselves within the actual Content DIV, and by not specifying a height I had hoped the element would resize and simply tack on extra DIVS below one another. This seems to be the case with Banner and Content Text DIVs but the second set simply overwrite the previous and all my attempts to force the second "news post" below the first have failed or resulted in bizarre alignments. I am at a loss and would appreciate any design suggestions and/or feedback on the code. Thanks |