dowp213 Posted January 6, 2011 Share Posted January 6, 2011 hi,Im not to good at javacsript and html..but i know a little bit, need some help,in a html page I place one textbox, and when I enter a data at the textbox and click submit button the data will undergo an if..else operation (I don't know what proper operation is needed) which corresponds to a string, and the string will be displayed underneath the textbox..and i have to display the previous strings.. one after another..for example I entered the value "001" which is equivalent to a "toothpaste" with a price of $1, when i click submit button it will display the toothpaste below..and the same with the soap.. each time i enter a value that corresponds a string, the string will be displayed at the top of the first one.. i think I need a table for the Price and for the string..I need the most simple codes as possible.. Link to comment Share on other sites More sharing options...
jeffman Posted January 6, 2011 Share Posted January 6, 2011 You are describing a series of operations, not just one. Please explain the first step you think you need to do, and what confuses you about it. Do you know what an event handler is? I mean, code that gets attached to an element's onclick or onsubmit event? That may be the place to start, since that is where you're if-else structure will probably be written. Link to comment Share on other sites More sharing options...
dowp213 Posted January 7, 2011 Author Share Posted January 7, 2011 You are describing a series of operations, not just one. Please explain the first step you think you need to do, and what confuses you about it. Do you know what an event handler is? I mean, code that gets attached to an element's onclick or onsubmit event? That may be the place to start, since that is where you're if-else structure will probably be written.i already started a little bit.. i already got a text box and text button,.. didn't have an idea what event handler is so i googled it.. it's like executing the java codes inside of a html, it's outside the "<script>".. am i right?.. I use "<form>" for the html to initiate the java inside its code..<html> <head> <script type="text/javascript"> </script> </head> <body> <form action=""><a href></a> <fieldset> <label><b><font color="000000">Enter Value: </label> <input type="text"> </fieldset> <BR><input type="submit" value="Submit Value"> </form> </body></html> the only problem is the javascript code.. I started a little javascript but discarded it after, because it's not working..already created a thread about the if..else function.. but perhaps i need a wider approach.. maybe it's not about the javacript but rather the whole structure of the application.. Link to comment Share on other sites More sharing options...
jeffman Posted January 7, 2011 Share Posted January 7, 2011 1. You need a function in your script. Let's pretend for now it's called func.2. You need a way to execute the function when the user clicks the button.3. I think you don't want your form to submit, so it might be better to remove the form tags. Form controls will work just fine if they are not in a form.4. I assume you want to do something with the data in your text input. To get that data, the input needs an id. For now, let's just call it txt.So your HTML might look something like this (I've just left out the label and other items. You can certainly keep them): <input type="text" id="txt"><input type="button" value="Submit Value" onclick="func()"> Now, some javascript. This must go inside your script tags: function func () { // notice how the function name matches the function named in your button tag var myInput = document.getElementById("txt"); // notice how the id matches the id in your input tag var myText = myInput.value; alert(myText);} This is the basic way of doing stuff. The alert is just a test. You'll take it out when you know that it works.Give this a try and write back. Link to comment Share on other sites More sharing options...
dowp213 Posted January 8, 2011 Author Share Posted January 8, 2011 1. You need a function in your script. Let's pretend for now it's called func.2. You need a way to execute the function when the user clicks the button.3. I think you don't want your form to submit, so it might be better to remove the form tags. Form controls will work just fine if they are not in a form.4. I assume you want to do something with the data in your text input. To get that data, the input needs an id. For now, let's just call it txt.So your HTML might look something like this (I've just left out the label and other items. You can certainly keep them):<input type="text" id="txt"><input type="button" value="Submit Value" onclick="func()"> Now, some javascript. This must go inside your script tags: function func () { // notice how the function name matches the function named in your button tag var myInput = document.getElementById("txt"); // notice how the id matches the id in your input tag var myText = myInput.value; alert(myText);} This is the basic way of doing stuff. The alert is just a test. You'll take it out when you know that it works.Give this a try and write back. this certainly helps a lot.. i replace my input type with yours.. and paste the javacodes you have provided inside my <script>..and it works very well. but before your reply, I've been searching around the internet of possible function to use.. the "getElementbyId" you used, works at any point, but i've came across some codes which has a 2 textbox and a single button and when you input a value inside the first textbox and click the button, it automatically displays the exact value at the second textbox.. I rewrite the codes and manage it to:*get the input value of the 1st textbox.*undergo an if..else function.*display the if..else statement at the 2nd textbox..and my problem is:how to input multiple value at the 1st textbox and display the output statement at the 2nd textbox as a "list", the output should be listed one after another..here's my unfinished work,this can only process a single input and output..... this is a little confusing cuz im just using a notepad, sorry for that sir..<html><head><title>Barcode Reader</title><script Language="JavaScript">function Getbarcode(){var barcode, display;barcode = document.barcodeform.txtbarcode.value; if (barcode == 001) { // my if.. else functionbarcode="soap"; // my statement is,a change of value to the variable}else if (barcode == 002) {barcode="toothpaste"; }else if (barcode == 003) {barcode="chips";}else if (barcode == 004) {barcode="juice";}else if (barcode == 005) {barcode="waffles";}else {barcode="error";}display = barcode;document.barcodeform.txtdisplay.value = display;}</Script></head><body><h2 font face="Georgia, Garamond, Times New Roman" color="#FF0000">Barcode Reader</h2><form name="barcodeform"><table border="0" cellpadding="0" cellspacing="0"><tr><td width="100">Barcode:</td><td><input type="text" name="txtbarcode" size="14"></td> <// 1st textbox></tr><tr><td width="100"><br><br></td><td><input type="button" value="Submit Barcode" onClick="Getbarcode()"></td> <//button></tr><tr><td width="100">Purchase:</td></tr></table><table border="2" cellpadding="0" cellspacing="0"> <tr><td height="100"><input type="text" name="txtdisplay" size="20"><br> </td> <//2nd textbox></tr> </table></form></body></html> and by the way, this code uses the "form" you have mentioned earlier at your reply, don't know much about it..will this be an advantage or not?.. Link to comment Share on other sites More sharing options...
thescientist Posted January 8, 2011 Share Posted January 8, 2011 The form would only be an advantage if you plan on submitting the data for server side processing, in the event that you need to interact with a database, send out emails, caculate an order, etc. For now the button and inputs alone should be sufficient to carry out the example.In order to process multiple values within an input, with the intent on returning it as a list as a list, you would want to instruct the user to use a comma to separate the values they are inserting into the first input box with a comma, or a semi-colon, so that you know how to distinguish each individual barcode that the user is inputting, using string functions to break up the list in a meaningful way. You might also want to create an object to use as mapping for your barcodes and your items. For example, using your above post as context, this might be a simple example: <html><head><title>Barcode Reader</title><script Language="JavaScript">function Getbarcode(){ var delimiter = ";"; var barcodeInput = ""; var barcodes = []; var returnList = ""; //for each barcode, map an item to it. list can grow as needed var barcodeToItemMap = { 001 : "soap", 002 : "toothpaste", 003 : "chips", 004 : "juice", 005 : "waffles" }; //give the first box an id property within its tags, and reference it by that name, to get the value of it barcodesInput = document.getElementById("barcodeInputBox").value; //use a native string function to break apart the inputs barcodes = barcodesInput.split(delimiter); //create the start of the list returnList = "<ul>"; //use a loop to create the returnText to be displayed on the page for(var i = 0; i < barcodes.length; i++){ var code = barcodes[i].replace(" ",""); //strip any whitespace var code = parseInt(code) //parse each as an integer returnList += "<li>" + barcodeToItemMap[code] + "</li>"; //append an item to returnList by looking it up in the mapping and putting it between list tags }; //close the list returnList += "</ul>"; //insert returnList into a div element on the page for display, after giving it an id property in the HTML document.getElementById("items").innerHTML = returnList; };</script></head><body><h2 font face="Georgia, Garamond, Times New Roman" color="#FF0000">Barcode Reader</h2><form name="barcodeform"><table border="0" cellpadding="0" cellspacing="0"><tr><td width="100">Barcode:</td><td><input type="text" id="barcodeInputBox" name="txtbarcode" size="14"></td> <// 1st textbox></tr><tr><td width="100"><br><br></td><td><input type="button" value="Submit Barcode" onClick="Getbarcode()"></td> <//button></tr><tr><td width="100">Purchase:</td></tr></table><table border="2" cellpadding="0" cellspacing="0"> <tr><td height="100"><div id="items" style="width: 200px;"><div><br> </td></tr> </table></form></body></html> The idea is that the user inputs a bunch of barcodes, separated by a delimiter (in this case I used a ;, but that can be changed to anything you want), gets the value of the first textbox, turns that into an array breaking it up along the delimiter, and then builds an HTML list that you can then set to the value of another textbox. In order for document.getElementById() to work, it must be used in conjunction with elements on the page with an id (if you look at the HTML elements referenced, you will see I added that to them). ID's are unique and can only be used once a page.edit: change the second input to a div so that when inserting HTML code, it will render correctly as a listedit2: Of course there will be the issue of error handling, which should be easy to implement, but let's see how you get on with this. Link to comment Share on other sites More sharing options...
dowp213 Posted January 8, 2011 Author Share Posted January 8, 2011 my plan is to input the value into a chronogical order,but you decided to put a delimeter between them.. the good thing is: a typical barcode (depending on the scanner) has a delimeter before and after the content, It's either "^" or numbers.i was about to complain about the list thing,. quickhands..thanks you very much..and to mr.deirdre's dad.. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.