Billing Software for Shops using Html and Java Script | Know About

Billing Software for Shops using Html and Java Script.

Do you want to know how to get value of a selected item in java script ?

If you want to know how to get the value of a selected item from a multiple choice list you are in the correct place to learn. You must have to read the post at least once. Value has been collected from the form using elements. To know further, continue reading. Have a nice day.

Create Menu Item

<form name="f1"><h3>SELECT MENU ITEMS OF YOUR CHOICE</h3><br/> <table><tr> <td>MAJOR DISHES<br> <select name="s1" MULTIPLE onclick="pick()"> <option value="MC BURGER=>80">MC BURGER</option> <option value="FISH FILLETS=>70">FISH FILLETS</option> <option value="CHICKEN BURGER=>65">CHICKEN BURGER</option> <option value="MC CHICKEN=>75">CHICKEN BURGER</option> <option value="GRILLED CHICKEN DELUXE=>90">CHICKEN BURGER</option> </select></td> <td>STARTERS<br> <select name="s2" MULTIPLE onclick="pick()"> <option value="FRENCH FRIES=>40">FRENCH FRIES</option> <option value="NUGGETS=>50">NUGGETS</option> <option value="HASH BROWNS=>50">HASH BROWNS</option> <option value="SALADS=>30">SALADS</option> <option value="LOADED FRIES=>45">LOADED FRIES</option> </select></td> <td>MISCELLANEOUS<br> <select name="s3" onclick="pick()"> <option value=" ">Select</option> <option value="MILK SHAKES=>35">MILK SHAKES</option> <option value="SOFT DRINKS=>40">SOFT DRINKS</option> <option value="COFFEE AND TEA=>30">COFFEE AND TEA</option> <option value="ALCOHOLIC BEVARAGES=>50">ALCOHOLIC BEVARAGES</option> </select></td> </tr> </table> </form>
You have to create a form inside that you can use whatever type like checkboxes or radio buttons or any other you want, here I am using select tag choice list for both Multiple and single options. When you use Multiple in the select tag you can select Multiple options and the default one is to select a single option. Onclick event pick() is to show the selected options from the menu. For that you have to create a text view to show the selected list of Items.

Create Text Area

The Items Selected From Menu Are <br/> <textarea name="ta" rows="10" cols="50"/><br/> <input name="b1" type="button" value="TOTAL COST" onclick="cal()"/> <input name="b2" type="button" value="CLEAR" onclick="clr()"/>
Text area has been created using textarea tag widely used to get information from users like plain text and Total Cost button is to trigger the event cal() to calculate the total amount of Item purchased from the menu and Clear button is used to clear the text area box using onclick event clr().

Pick Items From Menu

function pick() { var z=" "; for(i=0;i<3;i++) { for(j=0;j<f1.elements[i].length;j++) { if(f1.elements[i][j].selected) { var y=f1.elements[i].options[j].value; z=z+"\n"+y; f1.elements[3].value=z; } } } }
Pick function is used to show the selected Items from the Menu in the textarea. Variable z has been created to store the value selected from the menu and add menu items. Here f1 is the form name and elements[] which is used to select a particular field from the form and always elements start from 0. Here select tag named "s1" = element zero, select tag named "s2" = first element, select tag named "s3" = second element, textarea = 3rd one and the total cost and clear button are the 4th and 5th elements. First for loop is to get the selected items from the first 3 elements and the Second for loop is to know how many items are there in each element. For Example To know how many options are there in the first select tag. And the if is used to check whether the option is selected, if true it will get the value from that element and stored or added to the z. Atlast you have to show the selected options in the textarea with elements, As I mentioned earlier the 3rd element is textarea.

Calculate Total Amount

function cal() { var d=0; for(j=0;j<3;j++) { for(i=0;i<f1.elements[j].length;i++) { if(f1.elements[j][i].selected) { var y=f1.elements[j].options[i].value; s=new String(y) var a=s.indexOf(">"); var b=s.substring(a+1,a+3) c=parseInt(b); d=d+c; } } } p="Total Cost Of Selected Items="+d; m=m+"\n"+p; f1.elements[3].value=m; }
You have to get the value of each selected Item from the menu using the same procedure as above in the pick() function. Once you get the values of the selected Items you can get the position of Greater than(>) symbol before the price using indexOf method, it will get the position of the string. From that you can extract the price using the substring method, it always starts from the given number and ends before the ending number. After that you have converted the String into Integer. Here m is a global variable that stores the value of z.

Clear Textbox and Reset Form

function clr() { f1.elements[3].value=" "; f1.reset(); }
As I mentioned earlier textarea is the 3rd element in the form. Once the clear button is clicked textarea and other form fields will be cleared.

Program

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script language="javascript"> var m; function pick() { var z=" "; for(i=0;i<3;i++) { for(j=0;j<f1.elements[i].length;j++) { if(f1.elements[i][j].selected) { var y=f1.elements[i].options[j].value; z=z+"\n"+y; f1.elements[3].value=z; } } } m=z; } function cal() { var d=0; for(j=0;j<3;j++) { for(i=0;i<f1.elements[j].length;i++) { if(f1.elements[j][i].selected) { var y=f1.elements[j].options[i].value; s=new String(y) var a=s.indexOf(">"); var b=s.substring(a+1,a+3) c=parseInt(b); d=d+c; } } } p="Total Cost Of Selected Items="+d; m=m+"\n"+p; f1.elements[3].value=m; } function clr() { f1.elements[3].value=" "; f1.reset(); } </script> </head> <body> <h2><center>Welcome To McDonalds</center></h2><br/> <form name="f1"><h3>SELECT MENU ITEMS OF YOUR CHOICE</h3><br/> <table><tr> <td>MAJOR DISHES<br> <select name="s1" MULTIPLE onclick="pick()"> <option value="MC BURGER=>80">MC BURGER</option> <option value="FISH FILLETS=>70">FISH FILLETS</option> <option value="CHICKEN BURGER=>65">CHICKEN BURGER</option> <option value="MC CHICKEN=>75">MC CHICKEN</option> <option value="GRILLED CHICKEN DELUXE=>90">GRILLED CHICKEN DELUXE</option> </select></td> <td>STARTERS<br> <select name="s2" MULTIPLE onclick="pick()"> <option value="FRENCH FRIES=>40">FRENCH FRIES</option> <option value="NUGGETS=>50">NUGGETS</option> <option value="HASH BROWNS=>50">HASH BROWNS</option> <option value="SALADS=>30">SALADS</option> <option value="LOADED FRIES=>45">LOADED FRIES</option> </select></td> <td>MISCELLANEOUS<br> <select name="s3" onclick="pick()"> <option value=" ">Select</option> <option value="MILK SHAKES=>35">MILK SHAKES</option> <option value="SOFT DRINKS=>40">SOFT DRINKS</option> <option value="COFFEE AND TEA=>30">COFFEE AND TEA</option> <option value="ALCOHOLIC BEVARAGES=>50">ALCOHOLIC BEVARAGES</option> </select></td> </tr> </table><br/><br/> The Items Selected From Menu Are <br/> <textarea name="ta" rows="10" cols="50"/><br/> <input name="b1" type="button" value="TOTAL COST" onclick="cal()"/> <input name="b2" type="button" value="CLEAR" onclick="clr()"/> </form> </body> </html>

Here is the link for Mark Sheet Result Page using Html and Css.