JavaScript - Filling Text Fields With Drop Lists.
Hi to everyone,
I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list. But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists. This is how it would looks like : Machine-Name : __________ (empty text field) Drop-List1 : abc (the user selected the string "abc" from the list.) Machine-Name : abc- Drop-List 2 : zxy(the user selected the string "zxy" from the list.) Machine-Name : abc-zxy- I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial. So, in words, how would you guys proceed to achieve this goal? Similar TutorialsThanks for all the help Old Pedant. You're nice enough to lend people a hand when you don't have to, and this makes the second or third time you've helped me solve a problem I've had with my website. Thanks so much. So I'm making a page where when someone clicks on the second drop list, then it carrys out a function first, and it calculates it based on what the first droplist is picked. Here's the code I have: Code: <html> <head> <title></title> <script type="text/javascript"> function first() { var gold = 4; var green = 6; var red = 30; var blue = 0; var total = 100; if (calculate.color.GetElementById('gold').select) { var depends = gold/total }; if (calculate.color.GetElementById('green').select) { var depends = green/total }; if (calculate.color.GetElementById('red').select) { var depends = red/total }; if (calculate.color.GetElementById('blue').select) { var depends = blue/total }; if (calculate.choice1.GetElementById('first').select) { calculate.results.value = 1 * calculate.howmany.value * depends; } } </script> </head> <body> <form name="calculate"> <table> <td> I need: <input type="text" name="howmany" /> <br /> My choice is: </td> <td> <select name="color"> <option selected id="gold">Gold</option> <option id="green">Green</option> <option id="red">Red</option> <option id="blue">Blue Charms</option> </select> <br /> <select name="choice1"> <option id="first" onClick="first()"> First </option> </select> </td> </tr> <tr> <td colspan="2" align="center" valign="top"> You will need <input type="text" name="results" /> </td> </tr> </table> </form> </body> </html> Any help is well appreciated. Thanks. Hey, I've tried w3schools, tizag, and google, but haven't found exactly what I need. I need some way of easily figuring out which option in a drop down menu is checked, through the use of javascript, like how you can use document.formname.elementname[i].checked to find out which checkbox/radio button is checked. Anything that would return something that allows me to figure out which option has been chosen. I will need to have a function with 3 if statements, one for each option.
Hi On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code Code: function fillCategory(){ addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", ""); addOption(document.drop_list.Category, "berkshire", "Berkshire", ""); addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", ""); addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", ""); I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc Hi Guys, I am after populating a HTML box (or another language if html wont do) with a number of different files pdfs, exe's etc for customer to download. The content of this box will depend on the choices from two drop down lists. I have got two drop down lists setup filtering off each other... I have thought about tagging each document and then pulling up a file off the choices selected? Not sure the best way to go about this. Regards Heres the code so far.... Code: <HTML> <HEAD><TITLE>prototype CP</Title> <style type="text/css"> .style1 { text-align: center; } .style2 { font-size: small; color: #FFFFFF; } .style3 { font-size: small; } </style> </Head> <BODY OnLoad="BuildContacts(0);" style="background-color: #336699; background-image: url('back.jpeg')"> <FORM Name="myForm"> <div class="style1"> <span class="style2">I have a </span> <font color="#000000"> <SELECT Name="SalesNames" OnChange="BuildContacts(this.selectedIndex);" class="style3"> <OPTION Value=""> <OPTION Value="nexgen">nexgen <OPTION Value="zimbra">zimbraCS <OPTION Value="exchange">exchange </Select></font><span class="style2"> mailbox and I want to set it up on: </span> <font color="#000000"> <SELECT Name="SalesContacts" class="style3"> <OPTION Value="">-------- </Select> </font> </div> </Form> </Body> </Html> <SCRIPT Language="JavaScript"><!-- //Build arrays for each mailbox type Contacts=new Array(4); Contacts[0]=new Array(3); Contacts[1]=new Array(2); Contacts[2]=new Array(5); Contacts[3]=new Array(4); //Nexgen Contacts[0][0]=""; Contacts[0][1]="Outlook"; Contacts[0][2]="mac mail"; Contacts[0][3]="entourage"; Contacts[0][4]="iPhone"; Contacts[0][5]="Blackberry"; Contacts[0][6]="other mobile phone"; //Zimbra Contacts[1][0]="Outlook"; Contacts[1][1]="mac mail"; Contacts[1][2]="entourage"; Contacts[1][3]="iPhone"; Contacts[1][4]="Blackberry"; Contacts[1][5]="other mobile phone"; //Exchange Contacts[2][0]="Outlook"; Contacts[2][1]="mac mail"; Contacts[2][2]="entourage"; Contacts[2][3]="iPhone"; Contacts[2][4]="Blackberry"; Contacts[2][5]="other mobile phone"; //Call this to build the Contact list for the specified Salesperson function BuildContacts(num) { //Select the first Contact document.myForm.SalesContacts.selectedIndex=0; //For every contact in the array for this person, add a new option for(ctr=0;ctr<Contacts[num].length;ctr++) { document.myForm.SalesContacts.options[ctr]=new Option(Contacts[num][ctr],Contacts[num][ctr]); } //Set the length of the select list document.myForm.SalesContacts.length=Contacts[num].length; } //--></Script> Hi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help I am in need of some help. I have a request from a client to have four text fields added together as soon as they input the number. They want the numbers to add together with out having to hit a submit button or have the page change. I have seen and been able to get two out of the four to add together but i can't get the rest. I am pretty new to JS so please be gentle. But any help is greatly appreciated. this is the code i have been trying to work with: [CODE] function calc(A,B,SUM) { var one = Number(A); if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } var two = Number(document.getElementById(B).value); if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } document.getElementById(SUM).value = one + two; } <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" /> and another number: <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" /> Their sum is: <input name="sum" value="" id="result" readonly style="border:0px;"> [CODE] Several posts here are almost what I need, but I can't put it all together.... thank you for your help, this is for a pet rescue charity! When selecting "mini" option, my form should should only allow typing in 6 out of 10 text input fields (the first 3 on the front, and the first 3 on the back too if its selected). Other sizes would allow typing in all 10. The NAME must be the same due to the shoppingcart used, but ID can be different. Also, if mini the maxlength of each should be 14, other sizes each maxlength is different. I will try to put the relevant code below, but one entire form is he http://wooftags.com/bone-iframe.html Code: <select name="product1[]"> <option value="mini">mini</option> <option value="small">small</option> <option value="medium">medium</option> <option value="large">large</option> </SELECT> <input type="text" name="product1[]2" size="14" maxlength="14" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" /> <br /> <input type="text" name="product1[]2" size="18" maxlength="18" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" /> <br /> <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" /> <br /> <input type="text" name="product1[]2" size="25" maxlength="25" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" /> <br /> <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" /> <INPUT TYPE="HIDDEN" NAME="price2" VALUE="1"> <input id="back1" type="text" name="product2[]2" size=14 maxlength=14 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/> <br /> <input id="back2" type="text" name="product2[]2" size=18 maxlength=18 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/> <br /> <input id="back3" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/> <br /> <input id="back4" type="text" name="product2[]2" size=25 maxlength=25 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/> <br /> <input id="back5" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/> Hi all, Please forgive me if this is a dumb question. Is it possible to highlight the contents of all text and/or textareas within one form simultaneously? I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking. Any help would be appreciated. Code: <html> <head> <script type="text/javascript"> function SelectText(){ var fields = document.getElementsByTagName("input"); for (var i = 0; i < fields.length; i++){ var node = fields[i]; if (node.getAttribute('type') == "text"){ node.focus(); node.select(); } } } </script> </head> <body> <form id="form1" action=""> <p></p> <input type="text" id="one" style="width:500px;"> <p></p> <input type="text" id="two" style="width:500px;"> <p></p> <input type="button" value="Select Text" onclick="javascript:SelectText();"> </form> </body> </html> Hi. I need to fo a form and the content be sent to a database but i'm stuck... I knwo hot to do forms and also how to send data to mysql using php. But now i need something a bit more complex and i'm stuck. I need to make a form lets say with "parent name, age, child name, child age" Some people has 1 child some people has 2 3 4...and i need to have it separated and not just write like "joe, bob, jack" in the same line. How can i do this? And how should the database be structured? i can't put "id, parent, age, c_name, c_age" because some ppl will need to have more than 1 child in the database. Don't know what to do Hello, I need your help. I am using the code below to attempt to get the text or label value of the drop down box, however, what I am not liking is that it is returning a number of the selected item, as opposed to the text value. Code: document.getElementById('status').value How can I get just the text value of the selected item in question? Much thanks and appreciation for all your help. Cheers, J Hi all, I'm currently developing a drag on drag editor at work. I have a list of fields on the right which I drag onto a form and it adds the input object onto the form. I also have editable divs which I using to add text as a kind of very scaled down RTE. Rather than dragging a field the form, I could use the field as display only so I would like to embed this into the editable div as part the text. I'm thinking I could do something like facebook does where if I type a "@" then I could create a auto suggest to embed a field value into text but what i would like to do is drag the field into the text. So my question is this, is it possible to know the positon in the text of where I performed the drop, I suppose that would be where the mouseup occurs? Any thoughts much appericated, Thanks, Dale I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript"> <!-- //Add more fields dynamically. function addField(area,field,limit) { if(!document.getElementById) return; //Prevent older browsers from getting any further. var field_area = document.getElementById(area); var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. //Find the count of the last element of the list. It will be in the format '<field><number>'. If the // field given in the argument is 'friend_' the last id will be 'friend_4'. var last_item = all_inputs.length - 1; var last = all_inputs[last_item].id; var count = Number(last.split("_")[1]) + 1; //If the maximum number of elements have been reached, exit the function. // If the given limit is lower than 0, infinite number of fields can be created. if(count > limit && limit > 0) return; //Older Method field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>"; } //--> </script> <ol id="steps_area"><li> <textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /> </li> </ol> <input type="button" value="Add" onclick="addField('steps_area','',15);"/> The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) { // count existing boxes to find out next number to use. // ? if (addwhat == 'addresses') { fieldid = 'addressesdiv'; } if (addwhat == 'namesnumbers') { fieldid = 'namesdiv'; } var dv = document.getElementById(fieldid).innerHTML; var lines = dv.match(/<br>/ig).length; if (addwhat == 'addresses') { document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>'; } if (addwhat == 'namesnumbers') { document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>'; document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>'; } } PHP Code: <? if ($_POST['Submit'] == 'Submit') { echo("sent<br>"); for ($c = 1; $c <= (count($_POST)-1)/2; $c++) { echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>"); } } $customer_id = "11"; // get existing data. // if not yet sent get data from databases $ok = "no"; if ($_POST['Submit'] != "Submit") { echo("<br>not sent<br>"); $res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'"); $maincount = mysql_num_rows($res); echo("<br>number of clients = ".$maincount."<br>"); for ($c = 1; $c <= $maincount; $c++) { $_POST['name'.$c] = mysql_result($res, $c-1, "client_name"); $_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile"); echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>"); } } else { // display last posted info echo("<br>sent<br>"); $ok = "yes"; // check if info was entrted correctly or not. for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) { if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") { echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>"); $ok = "no"; $maincount ++; } if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") { echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>"); $ok = "no"; $maincount ++; } } } if ($ok == "no") { ?> <form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>"> <div style="width: 850px;"> <div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br> <? } } ?> </div> <div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br> <? } } ?> </div> </div> <br style="clear: both;"> <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> <input type="hidden" name="customer_id" value="<?=$customer_id;?>"> <input type="submit" name="Submit" value="Submit"> </form> <? } ?> Hello, I'm a javascript beginner and need some help with a form that has 1 dropdown and two text boxes. when an item is selected in the dropdown it will autofill a number into the first text box that will be the highest number allowed. i.e. it may put a 30 so the range would be 1-30. and when a number is filled there it will do a simillar function for the second text box. also I need the script to make sure the number input is within the range when it leaves focus so it doesn't cause problems if the user types in a number larger than the range allows. I can't even seem to get the auto fill part to work so any help on it and/or the check part of the script would be awesome
Hi guys, I have this drag and drop script: 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>JavaScript Drag and Drop Tutorial</title> </head> <body> <div style="position:absolute; left:0%; top:0%; "> <style type="text/css"> .drag { position: absolute; } </style> <div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" > <input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me"> <pre id="debug"> </pre> </div> <script language="JavaScript" type="text/javascript"> <!-- function $(id){ return document.getElementById(id); } var _startX = 0; // mouse starting positions var _startY = 0; var _offsetX = 0; // current element offset var _offsetY = 0; var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove var _oldZIndex = 0; // we temporarily increase the z-index during drag var _debug = $('debug'); // makes life easier InitDragDrop(); function InitDragDrop() { document.onmousedown = OnMouseDown; document.onmouseup = OnMouseUp; } function OnMouseDown(e){ if (e == null) e = window.event; var target = e.target != null ? e.target : e.srcElement; if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') { _startX = e.clientX; _startY = e.clientY; _offsetX = ExtractNumber(target.style.left); _offsetY = ExtractNumber(target.style.top); _oldZIndex = target.style.zIndex; target.style.zIndex = 10000; _dragElement = target; document.onmousemove = OnMouseMove; document.body.focus(); document.onselectstart = function () { return false; }; target.ondragstart = function() { return false; }; return false; } } function ExtractNumber(value) { var n = parseInt(value); return n == null || isNaN(n) ? 0 : n; } function OnMouseMove(e) { if (e == null) var e = window.event; // this is the actual "drag code" _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px'; } function OnMouseUp(e) { if (_dragElement != null) { _dragElement.style.zIndex = _oldZIndex; // we're done with these events until the next OnMouseDown document.onmousemove = null; document.onselectstart = null; _dragElement.ondragstart = null; // this is how we know we're not dragging _dragElement = null; } } </script> </div> </body> </html> Is there a way to drag and drop text field? To set the stage I'm working on a set of D&D tools. I have a players list that is "draggable" with jQuery and an encounter list that is "droppable." The idea is to drag the players over to the encounter list as I need them. Now, the players list looks like this: Code: <ul id="players"> <li class="ui-state-default" style="list-style: none; margin-left: -40px; padding: 0px;"> <table width="700px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 150px;"> <input type="text" style="width: 145px;"> </td> <td style="text-align: center; width: 35px;"> <input type="text" style="width: 20px;"> </td> <td style="text-align: center; width: 35px;"> <input type="text" style="width: 20px;"> </td> <td style="text-align: center; width: 35px;"> <input type="text" style="width: 20px;"> </td> <td style="text-align: center; width: 35px;"> <input type="text" style="width: 20px;"> </td> <td> <input type="text" style="width: 98%"> </td> </tr> </table> </li> </ul> The players list is comprised entirely of text boxes. How do I go about setting it up so that when I drop a player on the encounter list, it actually displays the players data that was dragged. Curious about the following issue. I currently have a dynamic drop-down based on the value of each option.. If selection in top drop-down is B it will show all options with a B contained in the second/resulting drop-down. Now - I also want to evaluate the options by having the script check for a few keywords.. Example - have it evaluate the drop-down on page load for options with text containing 'blah123' (ex. <option value="0323G">Qwerty - blah123</option>). And if any of the options have that text the script will generate an additional drop-down menu allowing you to select blah123 or other specified text. Say another thing I'd like to search each text string for is 'abump'. If there is 'blah123' and 'abump' contained within the drop-down, a third drop-down menu will be generated (as said before) with only blah123 and abump as options. Whichever of these is selected will narrow down the options available in the final drop-down menu. If any clarification is needed I would be more than happy to make this more clear. Any ideas? Hi all, I have been working on a map, which now works and highlights and shows the location name on mouseover. I am having problems with how to go about getting users to be able to click on a region of the map, and depending on which region is clicked, to populate a drop down list which will appear on the same page. Then, the option which is chosen from the drop down list, would populate a blank field for the user- eg. preferences 1 - 4. The next location, would populate another drop down list, and the chosen option would populate the next blank field, if the previous one is already filled. This is what I have for the drop down lists, where the drop down is only populated from "location" array and need to somehow incorporate other array lists "locationsSouth" , "LocationsEast" and others if they were chosen. Code: <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <html> <head> <title>Drop down box</title> <script language="javascript"> function addOption(selectbox,text,value ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } function addOption_list(selectbox){ var location = new Array("location1","location2","location3"); var locationsSouth = new Array("location1.1","location2.1","location3.1") var locationsEast = new Array ("location1.2","location2.2","location3.2") for (var i=0; i < location.length;++i){ // addOption(document.drop_list.Location_list, location[i], location[i]); // } } </script> </head> <body onLoad="addOption_list()";> Preferences <br><br> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Location_list"> <Option value="" >Far North</option> </SELECT> </form> </td></tr></table><div> </body> </html> This is the format of the areas of the map Code: <AREA onmouseover=changeImage(pic12); onmouseout=changeImage(pic13); shape=POLY target=_self alt="Mid North" COORDS="276,203, 284,214, 289,217, 285,267, 274,267, 257,265, 254,263, 241,291, 222,293, 229,284, 238,280, 245,249, 250,236, 253,230, 253,210, 266,201" href="section.asp?regionID=12"> I hope this made sense; I'm still trying to think about how to tackle the problem myself. Hi I'm trying to fill out a form on this site using JavaScript: http://pacesalsa.promotionexpert.com...2/register.jsp However, the fields do not have input IDs; they only have span IDs. I've tried using the span IDs, but it doesnsn't work. Here is the code I'm trying to use: Code: document.getElementById('fn'). value='" FName "'; Where FName is the value I want filled into the field. Could someone please tell me how to use JavaScript to fill in the fields of this form (and check those pesky check boxes)? Thanks. |