|
JavaScript - Auto Complete Text Boxes Based On Value Entered
Hello! I need some help here. I need to pre-populate a name and a phone number box based on what's entered in the employee id box.
By entering in the employee id - EMPLOYEE ID: [JOHN R] It automatically fills in - Employee Name: [John Roberts] Employee Phone: [1234567890] Thanks. Similar TutorialsHi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! I have used the following script to make provide matching value suggestions for any text typed in the text box and user can select any value by clicking it this works fine in firefox, crome but not in IE. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Auto Suggest</title> <!--http://www.nodstrum.com/2007/09/19/autocompleter/ --> <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("rpc.asp?inputString="+inputString+"", {}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); boxhide(); } function boxhide() { setTimeout("$('#suggestions').hide();", 200); } </script> <style type="text/css"> body { font-family: Helvetica; font-size: 11px; color: #000; } h3 { margin: 0px; padding: 0px; } .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } </style> </head> <body> <div> <form> <div> Type your county: <br /> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="boxhide();" /> </div> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </form> </div> </body> </html> rpc.asp returns values matching the inputstring passed <li id='suggestedValue' onclick=""fill('Matchvalue');"">Matchvalue</li> Any help? Hi All I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a perl script the working JavaScript code looks like this: var CustomArray=new Array('an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'); Now the new code is: var CustomArray=new Array(Autocomplete); And the Perl script is sending back the data to the browser looking like this: var Autocomplete = 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' I cant seem to get it to work rite full HTML code is below any help is appreciated. HTML: <html> <head> <script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script> <script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script> <script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script> <script> var CustomArray=new Array(Autocomplete); </script> </head> <body> <input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/> <script> var obj = actb(document.getElementById('ACOMP'),CustomArray); </script> </body> </html> As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! I would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Formstub</title>
</head>
<body>
<form id="theform" id="theform" action="formstub.html" method="post">
<table width="90%" border = "1
" style="margin-left:40px; font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
<tr style="height:3em">
<td width="2em"><input type="checkbox" name="skipperReg" id="skipperReg" value="30" /></td>
<td width="12em">Registration Fee</td>
<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
<td width ="20em"> </td>
</tr>
<tr>
<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
<td> # Guests <input type="text" name="guestQty" id="guestQty" size="2" /></td>
</tr>
<tr>
<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
<td> List details <input type="text" name="miscDetails" size="35" /></td>
</tr>
<tr style="height:2em"><td > </td>
<td>Total</td><td>$<input type="text" id="total" name="total" size ="2" style="text-align:right" ></td>
</tr>
</table>
</form>
</body>
</html>
The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked. Hi, How can I auto populate the data by dropdown selected? and my dropdown result already appear as well, the code as following: PHP Code: <?php echo '<tr> <td>'.$customer_data.'</td> <td><select name="customer_id">'; foreach ($customers as $customer) { if ($customer['customer_id'] == $customer_id) { echo '<option value="'.$customer['customer_id'].'" selected="selected">'.$customer['name'].'</option>'; } else { echo '<option value="'.$customer['customer_id'].'">'.$customer['name'].'</option>'; } } echo '</select> </td> </tr>'; ?> and the result of dropdown above listed as admin customer1 FREE loaded from following db PHP Code: INSERT INTO `my_customer` (`customer_id`, `name`, `firstname`, `lastname`) VALUES (8, 'admin', '', ''), (6, 'customer1', 'ok', ''), (7, 'FREE', 'marj', 'om'); so whenever dropdown selected i want the all data below: PHP Code: <tr> <td><?php echo $firstname; ?></td> <td><?php echo $lastname; ?></td> </tr> also auto populate, it seem need javascript/ajax/jquery to fixed it, I was Wondering if someone could help me, and thanks in advance Hi all, I am trying to find out if it's possible to auto populate a text input based on the value of another. e.g. there is an input called name.. the user completes this and enters something like John, then in the same form there is another input called username. Once the person enters John in the name field, the username automatically displays John. I'm not sure how doable this is, I'm not very familar with Javascript, so any advice would be greatly appreciated. Many thanks, Greens85 I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate. Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. I've looked all over google but can't seem to find this out. How do you make it so you have 2 text boxes beside each other where you type (for example) 1 character in the first, and it flows into the next (without the need for pressing tab or whatever) I'm talking about the sort of thing you get when entering a software key Hi, I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look. <html> <!-- esp.html Nick Bravante --> <!-- C --> <!-- ======================= --> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; number = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guessOne + " My number was " + number + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 1" onclick="PickNumber();" /> <br /> <input type="text" id="messageBox" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBoxTwo { var number; numberTwo = RandomInt(1, 4); document.getElementById('messageBoxTwo').value= "You guessed " + guessTwo + " My number was " + numberTwo + "."; } </script> </head> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberThree = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guess + " My number was " + numberThree + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 2" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxTwo" size="90" /> </p> </body> </br> <body> Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 3" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxThree" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberFour = RandomInt(1, 4); document.getElementById('messageBoxFour').value= "You guessed " + guessFour + " My number was " + numberFour + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 4" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxFour" size="90" /> </p> </body> </html> Hi, I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list. I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages. Is this possible. Thanks figured out, sorry
hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value;
var allElements = document.form1.product;
var len=allElements.length;
if(allElements.length){
for (i = 0; i < len; i++){
allElements[i].value = price;
}
I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help I am doing a website project and I am currently designing product page. I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page. I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line. I know the values of the text boxes can be saved using php in the backend. But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php? I am trying to pass data from one form to another form using the url i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes. being trying it in javascript and asp even php would like to keep it to javascript but am open minded to just get it to work I have been using just basic text lately and now convert them to smiles when it is ECHO'd on the page later on when the page is viewed again. but with to know how to insert them by clicking the images.
Hi guys, I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted. Is this possible with Javascript? Here is what it looks like so far - Code: <FORM><table id='table_columns'>
<tr>
<td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns"> 4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
<td align="right"><p>Column 1</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 2</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 3</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 4</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
</table>
<br />
<input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>
If 3 Columns, WIDTH4 is not viewed and defaults to "0". If 4 Columns, all are visible and the number is then optional. Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer. Hello all, I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box. In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well. SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box. I am writing this program in perl CGI. Thanks, Vaibhav |
|||||||