We Keep Coding

Trying to create quantity x cost with Javascript

I am creating a merchandise page where I have put the items into separate tables. I want to have it so that when someone selects a quantity, it will display the appropriate price in the field below. Here's the HTML so far:
<table border="1" id="tshirtTable" style="float:left">
<tr>
<th colspan="2">Burundi T-Shirt</th>
</tr>
<tr>
<td colspan="2"><img src="https://rlv.zcache.com/burundi_t_shirt-re5f84ff8b0724bbda7582389e5816a6f_k2g1o_324.jpg" alt="Burundi T-shirt"></td>
</tr>
<tr>
<td id="qty">Quantity</td>
<td>
<select id="tshirt">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td id="price">Price</td>
<td><input type="text" disabled="true"></td>
</tr>
</table>
I'm pretty new to JS so not sure how to have it calculate the price, depending on which quantity is selected. Guessing I'll have to set the price somewhere, but not exactly sure how to get started on it.
Any help is appreciated, thanks!

I've refactored your code. In my example, we have list of products. It doesn't really matter, you can have here one product or as many as you want. For learning purposes it's better do handle table of items.
First of all we won't be using disabled attribute but readonly. It's is very important, because disabled key-value won't be send to the server. If you want to block the input from changing use readonly. Secondly you don't need to pass =true value to your attribute.
<input type="text" disabled="true"> // bad
<input type="text" readonly> // ok
Another thing is that attribute id is unique per document and we can have only one. Read more on MDN.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
No jQuery in my example, you should learn pure javascript first.
To calc, we must change type of our values. Reading them from inputs, their type is String, we must convert them to Number. In our case we use parseInt() function. It's better to use parseFloat(), when we expect floating point number.
Read my comments to have better understanding what is going on. If you have any confusion make sure to ask.
var table = document.getElementById('tshirtTable');
table.addEventListener("change", function(e) {
// If we are not changing these elements we quit
if (e.target.name !== 'quantity' && e.target.name !== 'each-price') {
return;
}
// Let's check what is id of our element
// We store our id in <tr id="..."
// To access tr, we must find tr by using .closest function
var tr = e.target.closest('tr');
var productId = tr.id;
var quantityValue = tr.querySelector('.quantity').value;
var eachPriceValue = tr.querySelector('.each-price').value;
var totalPriceValue = tr.querySelector('.total-price').value;
// Here is important part, we must parse values as type Number, because currently they are type String
tr.querySelector('.total-price').value = ( parseInt(quantityValue) * parseInt(eachPriceValue)).toFixed(2);
});
<table border="1" id="tshirtTable" style="float:left">
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Price / Each</th>
<th>Total Price</th>
</thead>
<tbody>
<tr id="1">
<td>Burundi T-Shirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="15"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="2">
<td>Burundi Skirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="25"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="3">
<td>Burundi Mask</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="30"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
</tbody>
</table>

First you have to add function which have to be call on document ready or as pure javascript document.onload()
Then you have to define a variable name for the price,
Then you have to get the value of your (#tishirt) and multiply it with the price get the result as a value for your text input in which the price display
Here is the script
<script type ="text/javascript">
document.onload=function(){
document.getElementById(#tishirt).onchange=function(){
var price=100 ;//only example price
var total=price*document.getElementById(#tishirt).value;
if (total>0){
document.getElementById(#total).value=total;
}
};
};
</script>
Don't forget to add id to your text box (#total)

validate the dom using jquery

I am trying to validate the DONM using jquery Please look into the fiddle.
My objective is not to select the same country to same room number .
I have two scenarions
scenario 1 (before saving into DB)
The example is working fine
scenario 2 (After saving the data into db )
saved data coming from DB
Available Country RooNumber SelectedPerson
droipdown1 1
dropdown2 2 chennai
WRONG SELECTION
Available Country RooNumber SelectedPerson
chennai 1 chennai
chennai 2 chennai
JSFiddle:
http://jsfiddle.net/bharatgillala/9o1gxa1h/10/
code:
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>
</TR>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
2
<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>

First of all, you're creating n label tags with the id lbl2.
This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.
Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('select'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// initially, we want to change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
// then, we must disable this option in all the other dropdownlists
updateDisabled(ddl);
// so, we add a change event handler
ddl.addEventListener('change', function(e) {
// when the ddl value is changed, we update the label text
lbl.textContent = ddl.value;
// and we disable the option selected in all the other dropdownlists
updateDisabled(ddl);
});
});
function updateDisabled(ddl) {
// to disable all the other dropdownlists
// we loop through all the HTMLOptionElements inside the table
[].forEach.call(table.querySelectorAll('option'), function (opt, j) {
// we look if the current option inside the loop is not the selected one
if (opt.parentNode !== ddl) {
// then, if the option has the same selected value, we disable it, else we enable
opt.disabled = opt.value && opt.value === ddl.value;
}
});
}
});
})(document);
#gridviewInfo td:nth-child(1) {
white-space: nowrap;
text-align: left;
}
<table id="gridviewInfo" runatr="server">
<thead>
<tr>
<th>Available Person</th>
<th>RooNumber</th>
<th>SelectedPerson</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>1</td>
<td>
<label>maxico</label>
</td>
</tr>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>2</td>
<td>
<label>hongkong</label>
</td>
</tr>
</tbody>
</table>
Update
Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/

change dropdown content when checked

I have made a way to present a droplist to end user and by default containing 4 items (value=a,value=b,value=c,value=d). When a user click on a checkbox the content of the droplist changes to only 2 items (value=a,value=b) IF unchecked returned to default state.
I achieve this way below using hiding div but wondering if a better different way using Jquery, I have searched and cant figure it out using let say if checked present these options else present default. Currently I have to work with 2 different dropdown which is awkward when passing values in a form.
THE CHECKBOX
<label for="optionChoice"><input class="optionChoice" type="checkbox" id="optionChoice" name="optionChoice" value="YES" onClick="if(this.c.........
IN MY PHP PAGE I HAVE 2 DIV WHERE ONE IS VISIBLE AND THE OTHER IS NOT ALL DEPENDS ON IF CHECKBOX CLICKED THEN MAKE ONE VISIBLE AND THE OTHER INVISIBLE VISVERSA.
<div id="test">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType" id="serviceType">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
<option value="C" label="C">C</option>
<option value="D" label="D">D</option>
</select>
</td>
</tr>
</table>
</div>
<div id="test2">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType2">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType2" id="serviceType2">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
</select>
</td>
</tr>
</table>
</div>
script
$(function() {
enable_cbChoice();
$("#optionChoice").click(enable_cbChoice);
});
function enable_cbChoice() {
if (this.checked) {
$("#test").hide();
$("#test2").show();
}
else{
$("#test").show();
$("#test2").hide();
}
}

Try to just have one dropdown (id="serviceType") and then add or remove the options based on the state of the checkbox:
var detached;
$('#optionChoice').on('change', function() {
var $el = $(this);
if( $el.prop('checked') ) {
detached = $('option[value="C"], option[value="D"]').detach();
} else {
$('#serviceType').append(detached);
}
});
Working Fiddle: http://jsfiddle.net/jhummel/D43fh/

You can achieve this by detecting the state of the checkbox using javascript. I can show you the method using jquery. Then you can use the remove and append function of jquery to add and remove values from the dropdown. To achieve your problem, you can do something like this.
$('input[type="checkbox"]').click(function() {
if( $(this).is(':checked') ) {
$("#selectBox option[value='C']").remove();
$("#selectBox option[value='D']").remove();
} else {
$('#selectBox').append('<option value="C">C</option>');
$('#selectBox').append('<option value="D">D</option>');
}
});

menu change page information

I'm trying to have multiple dropbox menu's on the same page that will change the information on the next page after submitting their selection.
so the user can make different and multipule selections from the menus then click "submit" and different information will be on the next page and not the same page like the script below.
this is the closest thing ive found but trying to get the information on the next page instead is proving tricky.
<form>
<table>
<tr>
<td>Person 1</td>
<td>Information</td>
<td>
<select id="choice1" onchange="changeText('choice1', 'display1')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Person 2</td>
<td>Information</td>
<td>
<select id="choice2" onchange="changeText('choice2', 'display2')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
</tr>
</table>
<p> </p>
<table>
<tr>
<td><div id="display1">Select an option</div></td>
</tr>
<tr>
<td><div id="display2">Select an option</div></td>
</tr>
</table>
<p> </p>
</form>
<script>
var textBlocks = [
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description'
];
function changeText(elemid, displayId) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById(displayId).innerHTML = textBlocks[ind];
}
</script>
</body>
</html>

POST data is sent to the server and not returned to the client. This means that your JavaScript code will never see what was submitted.
You either need to do whatever you want server-sided (i.e., in PHP) or you need to change the way you send and read data (i.e., via hash part of the URL, via cookies,...). Using a server-side language is most likely a better option, although it does depend on what you are trying to achieve.

Why is my jQuery hide and show function on the Form Select element only working in firefox?

I have created this form with several select menu and a couple of jQuery hide and show functions. The way the form is supposed to work is that, when you click on the options from the main select menu it sould autimatically show you the corresponding select submenu.
Here is my code:
jQuery:
$("#mankleding").bind("click",menclothes);
$("#manschoen").bind("click",menshoes);
$("#manaccessoires").bind("click",menaccessoires);
function menclothes(evt){
$("#subkledingheren").show("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menshoes(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").show("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menaccessoires(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").show("fast");
}
HTML:
<tr>
<td> Artikel hoofd-categorie: </td> <td> <select id="manhoofd">
<option>HEREN</option>
<option id="mankleding">KLEDING</option>
<option id="manschoen">SCHOENEN</option>
<option id="manaccessoires">ACCESSOIRES</option>
</select>
</td>
</tr>
<tr>
<td> Artikel sub-categorie: </td> <td id="subcategorie"> <select id="subkledingheren">
<option>HEREN-KLEDING</option>
<option>Broeken & Jeans</option>
<option>Jassen</option>
<option>Sweaters & Hoodies</option>
<option>Zwemkleding</option>
</select>
<select id="subschoenenheren">
<option>HEREN-SCHOENEN</option>
<option>Sneakers / Casual</option>
<option>Slippers & Sandalen</option>
<option>Instappers</option>
</select>
<select id="subsaccessoiresheren">
<option>HEREN-ACCESSOIRES</option>
<option>Horloges</option>
<option>Brillen & Zonnebrillen</option>
<option>Stropdassen</option>
</select>
</td>
</tr>

Try using change event:
$('#manhoofd').change(function(){
var i = $('option:selected', this).text();
$('select(:not(:first))').hide();
$('select:contains('+i+')').show()
})
DEMO