JavaScript - Urgent Help Needed - Menu Populates Based On Select Field Entry
Hi Guys,
Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option. Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed. So here's the framework. Option 1 = fruit or vegitables of which fruit is selected is selected by the user Option 2 = Apples, Grapes, and pears of which apples is then selected Option 3 = Red, Green and Yellow of which Green is selected. Once green is selected, I need a description about the green aple to be displayed. Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated. Thanks. Similar TutorialsI am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript"> <!-- function build() { document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ; //print example: http://www.widget.com/content/ELM-VOC return true; } --> </script> <form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();"> <input type="hidden" name="redirect" value=""> <table class="elqFormTable" border="0" cellspacing="2" cellpadding="2"> <tr> <td valign="top">Grade:</td> <td> <select name="grade"> <option value="ELM">Elementary</option> <option value="MID">Middle School</option> <option value="HIG">High School</option> </select> </td> </tr> <tr > <td valign="top">Solution:</td> <td> <select name="solution"> <option value="VOC">Vocabulary</option> <option value="WRI">Writing</option> <option value="ELD">ELD</option> </select> <!--truncated code --> hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help I want to insert image instead of those empty boxes.......can someone help me please...... <script type="text/javascript"> document.write("<html><head><title>My PhotoCollage</title></head><body>"); function makeDiv() { var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var wh = 25 + Math.floor(Math.random()*444); var lr = (Math.random()<.5) ? "top":"right"; var bw = 1 + Math.floor(Math.random()*12); var bs = (Math.random()<.5) ? " solid":"dotted"; var dc = (Math.random()<.5) ? "Dog" : "Cat"; var Img = Math.floor(Math.random()*256); document.write("<div style=\"float: "+lr+";"+ "width: "+wh+"px;"+ "height: "+wh+"px;"+ "border: rgb(" + g + "," + b + "," + r + ") "+bw+"px "+bs+";"+ "background-color: rgb(" + r + "," + g + "," + b + ");"+ "image: "\">"+dc+ "</div>"); } var i; var count = Math.floor(Math.random()*100) + 5; for (i=0; i<count; i++) makeDiv(); document.write("</body></html>"); </script> Hi I'm trying to download the security image from this site (at the bottom): http://pacesalsa.promotionexpert.com...2/register.jsp However, every time one refreshes the image, the image changes (obviously). So, I'm trying to figure out how to download the current image on the page to a jpg or png (or any image file type). Could someone please tell me how to do this? Thanks. I have been trying for hours to do the following: - Change the background of a div by clicking a link from another div tag. - It also needs to change back when clicked again. I know there are alot of experienced coders out there and I'm eager to learn... help would be appreciated! I have an options list that is generated from a database. It currently has ~125 options in it. I've received the request that the user be able to either enter the corresponding number or select the option from the list. How can I update the "selected" attribute in the options list based on a number that may be entered in another text entry box? I tried to write the variable my_var into a text file but it only shows null after executing the code. Can anybody help pls?? Below is my code <html> <head> <script language="javascript"> var my_var function WriteToFile() { my_var = 123; document.write(<?php $file="file.txt"; $fh = fopen($file, 'w') or die("can't open file"); ?>; document.write(<?php $stringData = my_var ?>; document.write(<?php fwrite($fh, $stringData); ?>; document.write(<?php fclose($fh); ?>; } </script> </head> <body onLoad="WriteToFile();"> <p>Hello World</p> </body> </html> I need some help for University cousework that has been sent and I hope someone here can help. I need to create a cookie (easy enough) and then populate that cookie with a word that is selected when you click a certain image. Imagine you have image1.jpg and image2.jpg when a user selects image1.jpg the cookie needs to store image1 and load page2.html If the user selects image2, then page2.html still needs to load but store the word image2 in the cookie. On the next page, the cookie is loaded and the page needs to load the css file associated with that word example: image1 = firstcss.css image2 = secondcss.css Is this possible? Thank you for all your help I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code: function createOption(OptionText, OptionValue){ var temp = document.captcha_form("option"); temp.innerHTML = OptionText; temp.value = OptionValue; return temp; } function valChange(){ var firstList = document.getElementById("emailaddress"); var secondList = document.getElementById("subject"); while(secondList.hasChildNodes()) secondList.removeChild(secondList.childNodes[0]); switch(firstList.value){ case "1":{ secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues)); secondList.appendChild(createOption("Report Page Errors", Report Page Errors)); secondList.appendChild(createOption("Other", Other)); break; } case "2":{ secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game)); secondList.appendChild(createOption("Report Spam", Report Spam)); secondList.appendChild(createOption("Report Harassment", Report Harassment)); secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities)); secondList.appendChild(createOption("Request Account Removal", Request Account Removal)); break; } // .... default:{ secondList.appendChild(createOption("Please select from the first list", "")); break; } } } window.onload = valChange; this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ I wish to have my form update a text field when a 'add' link or button is clicked, allow for more entries to be added without having the page refresh. but i need to be able to have both the friends name and their number added to the field like so if friends name is say 'jason' and their number is '0987654321' then it will add to the textarea like so. jason [0987654321] this way i should be able to get the data and split it up when the form is send so i can add them in the DB. the part i am stuck on is how to get both fields in the textarea. allowing for more to be added without a refresh. can anyone suggest how they might do this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="AddUser" action="" method="post"> <div> <div class="formspacer">Username: <input type="text" name="username" id="username" value=""></div> <div class="formspacer">Contact Telephone Number: <input type="text" name="phone" id="phone" value=""></div> <div class="formspacer">Your Email address: <input type="text" name="email" id="email" value=""></div> <br /> <div class="formspacer"><strong>Enter each entry and click ADD to insert.</strong></div> <div class="formspacer">Friend name: <input type="text" name="friendname" id="friendname" value="" size="40"></div> <div class="formspacer">Friend`s mobile: <input type="text" name="friendmob" id="friendmob" value="" size="20"> <br />ADD<br /> <textarea disabled name="MULTIfriend" id="MULTIfriend" cols=20 rows=10></textarea></div> </div> <input type="submit" name="AddUser" value="Add User"> </form> </body> </html> Hi everyone, im no expert in coding but i manage to get this bit of code together using some free source stuff and put in the links to my images ect, the problem now is i need each picture to be different sizes and each one to have a clickable link but i am completely stumped heres the code Code: <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="http://gohelp.org.uk/wp-content/uploads/2011/05/Charity-Rallies-World.png" var image2=new Image() image2.src="http://gohelp.org.uk/wp-content/uploads/2011/05/ROTW-logo.jpg" var image3=new Image() image3.src="http://gohelp.org.uk/wp-content/uploads/2011/05/Mongolia-Charity-Rally-Logo-Transparent.png" //--> </script> </head> <body> <center><img src="http://gohelp.org.uk/wp-content/uploads/2011/05/Charity-Rallies-World.png" name="slide" width="150" height="68" /></center> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Friends i'm in a dire situation only have wednesday to submit ..so heres the problem....i have a course work assigment where i have to hardwire Hardware items and their item codes description and prices and ask the user to input their name address the itemCode and quantity nad then creat an invoice which looks like this HARDWARE ITEMS CODE DESCRIPTION UNIT PRICE K16 Wood screws, brass, 20mm, pack of 50 $ 7.75 D24 Wood glue, clear, 1 litre $ 5.50 M93 Sandpaper, medium grade, 100 sheets $10.25 M94 Sandpaper, fine grade, 100 sheets $14.75 PLACE YOUR ORDER! NAME: Bill Silic ADDRESS-1: Apt 23 ADDRESS-2: Building 8 ADDRESS-3: Winchester POST CODE: 89763 ENTER CODE (XX to Stop): CODE: D24 QUANTITY: 2 CODE: K16 QUANTITY: 1 CODE:XX INVOICE FOR ORDER Bill Silic Apt 23 Building 8 Winchester POST CODE: 89763 D24 Wood glue, clear, 1 litre 2 @ $ 5.50 $ 11.00 K16 Wood screws, brass, 20mm, pack of 50 1 @ $ 7.75 $ 7.75 TOTAL: $ 18.75 Shipping: 2 items @ 1.00 2.00 TOTAL INCL. SHIPPING: 20.75 VAT at 20% 4.15 TOTAL TO PAY: 24.90 I HAVE ALREADY COMPLETED THIS BY MYSELF AND GOT IT WORKING WITH NO PROBLEM ..But my problem is that the teacher wants us to TEST FOR NULL ENTRY meaning if the user enters the wrong Itemcode or no ItemCode at all and give an sensible output for that case ..... she wants us to put it in a method after main and then call it in main using a do while loop so my method looks something like this Code: public static boolean isSomethingCorrect(String itemCode){ if(itemCode.equals("")||itemCode.equals(null)){ System.out.println("A sensible output"); return true; }//close if return false; } } // and i have to implement it where i ask the user for input using a Do while loop in this area Code: //a do while loop to test null code entry do{ System.out.println("Please select a code from the list"); String itemCode= br.readLine(); System.out.println("Please enter quantity of items " +itemCode); String itemQuantity= br.readLine(); int quantity= Integer.parseInt(itemQuantity); // I Will be forever grateful for any help on this program because i have tryed for hours upon hours and i just cant get it and i need to submit the day after tomorrow Hi I have been trying to create a form using Django for a very long time but have not been able to get it to look the way I want. Someone suggested to me that I should use Javascript (Jquery) to do this. Here's what I want to do. For the form I want, there are certain statuses at the bottom, like "Done", "Incomplete" and etc. When the form is filled in, the person will click on one of these statuses. What I want this button to do is to save the page/form and also to generate a few new links relating to the status selected. For example, if the person selects "Done" this should save the form and generate two new buttons. One that says "Close" which would take you to the home page, and one that says "Continue" which would take you to the next form. My problem is that I'm new to Django and have no experience with Javascript. So if anyone could help or give me hints that would be greatly appreciated. hi i am trying to populate a textarea with the selections like checkboxes radiobuttons textbox combobox but i cant seem to do so. i am naive to the field of programing, and found a few code snippets to do so i tried but it did no good... help needed this is my code " <html> <head> <style type="text/css"> .minitext { font: normal 0.7em Arial, sans-serif; color: Black; } .disable { background-color: #CF110C; color: #fff; font-weight: bold; padding: 5px; } </style> <script language="Javascript" type="text/javascript"> function populateTextArea(){ var output = new Array(); var fieldID = 1; while (fieldObj = document.MyForm['iid'+fieldID]) { if (fieldObj.length) { for (var j=0; j<fieldObj.length; j++) { if (fieldObj[j].checked) { output[output.length] = fieldObj[j].value;} }//end of for } //end of if else { if (fieldObj.checked) { output[output.length] = fieldObj.value; } }//end of else fieldID++; }// end of while document.getElementById('targetarea').value = output.join(', '); //document.MyForm.targetarea.value = document.MyForm.ip1.value + '\n' + document.MyForm.ip2.value + '\n' + document.MyForm.ip3.value ; } </script> </head> <body> <br> <br> <form name="MyForm" method="POST" action="#"> String 1: <input type="text" name="ip1" value=""><br> String 2: <input type="text" name="ip2" value=""><br> String 3: <input type="text" name="ip3" value=""><br><br> <input type="checkbox" name="iid1" id="pe_item2" value="Text string 1"> Text string <input type="checkbox" name="iid1" id="pe_item2" value="Text string 12"> Text string 1<br><br><br> <input type="radio" name="iid2" id="pe_item4" value="Text string 2">Text string 2 <input type="radio" name="iid2" id="pe_item6" value="Text string 3">Text string 3<br> <input type="radio" name="iid3" id="pe_item8" value="Text string 4">Text string 4 <input type="radio" name="iid3" id="pe_item10" value="Text string 5">Text string 5<br> <input type="radio" name="iid4" id="pe_item12" value="Text string 6">Text string 6 <input type="radio" name="iid4" id="pe_item14" value="Text string 7">Text string 7<br> <br> <br> <a href="#" onClick="document.MyForm.targetarea.value = document.MyForm.ip1.value + '\n' + document.MyForm.ip2.value + '\n' + document.MyForm.ip3.value + populateTextArea();" >Populate</a><br> <br> <INPUT TYPE=BUTTON VALUE="Co" ONCLICK= populateTextArea(); > <br> <textarea id="targetarea" name ="targetarea" cols="50" rows="5"></textarea> </form> </body> </html> " help need this done urgently Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny I have two drop down fields. When I select any value in the first drop down i want the second dropdown to automatically populate the value related to the first one. For e.g i have the first field as name and the second field as measured in. If I select 'Potato' in the first dropdown then the second drop down should populate 'kg'. Please help.
Hi Experts, I have designed an online registration system for a non profit in ASP/SQL. After the members register for classes they are automatically redirected to an invoice page with class fees. At the bottom of the page I have a Total Fees field of all the classes. The member is supposed to pay this amount to our organization. Question: We decided to do an online payment this year and would like to calculate a 2% additional amount on the Total Fees. This amount is paid to the Payment Merchant site. We cannot afford to lose the 2% since we are a non profit. Would really appreciate if someone can tell me how to 1) Add a new field under the Total field 2) And calculate the 2% additional fees and do a Grand Total. Thanks in advance. I am trying to calculate age based on the date of birth input into a text field. the date field should allow users to enter a one or two digit month, one or two digit date and a two or four digit year. Users should be able to enter any of the following date formats: 11-2-10, 1-25-2010, or 01/25/2010. On some days it works and others it wont, like 11-1-91 returns that the user is under 18. Code: function checkAge(){ var stDate = document.getElementById("birth").value; var dayPartToDate = parseInt(stDate.substring(0,2),10); var monPartToDate = parseInt(stDate.substring(3,5),10); var yearPartToDate = parseInt(stDate.substring(6,10),10); var dtTo = new Date(yearPartToDate, monPartToDate-1, dayPartToDate); var mydate = new Date(); mydate.setDate(mydate.getDate()); var bday = dtTo - mydate if (bday < 18){ window.alert("You must be 18 to rent equipment."); document.getElementById("birth").value = ""; } } |