We Keep Coding

Calculate total amount from different dropdowns selected value

I am trying to calculate the total value of the selected value. In one row I have three options one is to select room that is one only, second is to select any one option and the same with the third column. When I am selecting options, it shows the correct "total Amount". Also on clicking on add room one new row with same options appears and there is no limit to add rows. But now what I am trying to do is When someone select values from different rows, "Total Amount" must show the total selected values.
Suppose, I have selected 1 room, 1st value is 5000 and 2nd value is 4000, then "Total Amount" is showing 9000. When I added one more row, in this again I selected 1 room, the 1st value is 6000 and the 2nd value is 9000. Now the " Total Amount" will show 24000 and this will work continuously on adding rows and selecting values.
Here is my HTML :
<table style="width: 100%;">
<tr style=" color: white;">
<th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
</tr>
</table>
<table id="dataTable" style="width: 100%;">
<tr>
<td >
<select name="links" class="form-control person-3" action="post" id="myselect" onChange="document.getElementById('rooms').innerHTML = this.value;">
<option value="0" selected="selected">--select--</option>
<option value="1">1</option>
</select>
</td>
<td >
<select name="keywords" class="form-control person-1" action="post" id="myselect" onChange="document.getElementById('adults').innerHTML = this.value;">
<option value="0" selected="selected">--select--</option>
<option value="5000">1</option>
<option value="8000">2</option>
</select>
</td>
<td >
<select name="violationtype" class="form-control person-2" action="post" id="myselect" onChange="document.getElementById('extra').innerHTML = this.value;">
<option value="0" selected="selected">No Beds</option>
<option value="4000">Adult</option>
<option value="3000">Child below 12</option>
<option value="2000">Child below 7</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add Rooms" onclick="addRow('dataTable')" class="btn btn-primary" style="margin-top: 15px;" /><br><br>
<div class="row">
<div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
<div class="col-md-6" style="color: white;font-size: 20px;text-align: left;">
<span class="addition"></span>
</div>
</div><br>
Here is my script through which I am calculating the total amount:
var add_1 =0;
var add_2 = 0;
var mul_3 = 0;
function displayValues() {
add_1 = parseInt($('.person-1').val());
add_2 = parseInt($('.person-2').val());
mul_3 = parseInt($('.person-3').val());
$(".addition-1").text(add_1);
$(".addition-2").text(add_2);
$(".multiplication_3").text(mul_3);
$(".addition").text( mul_3 *( add_1 + add_2) );
}
$(document).ready(function(){
$(".person-1").change(displayValues);
$(".person-2").change(displayValues);
$(".person-3").change(displayValues);
});
Here is the code to add rooms:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

Incomplete Code............. and existing has so many errors..
Try to make it work out .but addRow('dataTable'); defination missing.
`https://jsfiddle.net/asimshahiddIT/756tb80f/6/`

It seems you have same ID "myselect" for all select tag. Please give them unique IDs otherwise they'll misbehave.
Then if you are getting values from the class name what will be the case when one more row is added with same class names. Your logic will not work. Please try getting values with dynamic Ids provided to the select tag in each row.

`https://jsfiddle.net/asimshahiddIT/756tb80f/24/`
Please check the above link
Is this what you expected output

does this help?
$(document).ready(function(){
var dd1 =0;
var dd2 =0;
var dd3 =0;
var totalBillAmt = 0;
$("#myselect1").change(function(){ dd1 = Number($(this).val()); updateTotalPrice(); });
$("#myselect2").change(function(){ dd2 = Number($(this).val()); updateTotalPrice(); });
$("#myselect3").change(function(){ dd3 = Number($(this).val()); updateTotalPrice(); });
updateTotalPrice = function (){
totalBillAmt = dd1 + dd2 + dd3;
$("#totalPrice").text("total amount is:" + totalBillAmt);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
<tr style=" color: white;">
<th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
</tr>
</table>
<table id="dataTable" style="width: 100%;">
<tr>
<td >
<select name="links" class="form-control person-3" action="post" id="myselect1" >
<option value="0" >--select--</option>
<option value="100">test option 1</option>
<option value="500">test option 2</option>
</select>
</td>
<td >
<select name="keywords" class="form-control person-1" action="post" id="myselect2" >
<option value="0" >--select--</option>
<option value="5000">another opt 1</option>
<option value="8000">another opt 2</option>
</select>
</td>
<td >
<select name="violationtype" class="form-control person-2" action="post" id="myselect3" >
<option value="0" >No Beds</option>
<option value="4000">Adult</option>
<option value="3000">Child below 12</option>
<option value="2000">Child below 7</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add Rooms" onclick="updateTotalPrice()" class="btn btn-primary" style="margin-top: 15px;" /><br><br>
<div id='totalPrice'></div>
<div class="row">
<div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
<div class="col-md-6" style="color: white;font-size: 20px;text-align: left;">
<span class="addition"></span>
</div>
</div><br>

Invert names of IDs in a form using Javascript

I have the following form:
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="firstcurrency" class="selex" name="firstcurrency" style="float: left;">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="secondcurrency" class="selex" name="secondcurrency" style="float: right;">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<img src="/images/invert.png">Invert select
</form>
When I click on a tag (outside the form), I want it to do two things:
1) invert the values of IDs and names in the 2 select in the form above 2) change float values from left to right in the first select and from right to left in the second select.
After the click on a tag, the form should become:
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="secondcurrency" class="selex1" name="secondcurrency" style="float: right;">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="firstcurrency" class="selex2" name="firstcurrency" style="float: left;">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<img src="/images/invert.png">Invert select
</form>
It should do it again each time I press a tag.
What Javascript code would you use to do that?

Add separate css for the currencies then use this :
$('#invert').click(function(){
var firstCurr = $('#firstcurrency'),
secondCurr = $('#secondcurrency'),
tmpID = secondCurr.attr('id');
secondCurr.attr('id',firstCurr.attr('id'));
secondCurr.attr('name',firstCurr.attr('id'));
firstCurr.attr('id',tmpID);
firstCurr.attr('name',tmpID);
});
#secondcurrency {
float:right;
}
#firstcurrency {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="firstcurrency" class="selex" name="firstcurrency">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="secondcurrency" class="selex" name="secondcurrency">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
</div>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<a id="invert" href="javascript:void(0)"><!--href="convertitore-home"<img src="/images/invert.png">-->Invert select</a>

Html/ javascript form calculation issues

I'm new to coding for websites and am really struggling! I'm trying to add the select values from different select menu options to a total which will then give me a figure I can add to a number entered in a free text box.
I"ve searched extensively on the net and on this site and have found examples that are similar but when I've tried them out it doesn't work with my additions/changes!
Any help would be greatly appreciated!!!! Below is my html and also javascript.
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="example.js"></script>
</head>
<form action="" id="myform" onsubmit="return false;">
<div class="cont_order">
<div data-role="fieldcontain">
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Sport" id="Sport" data-native-menu="false" data-theme="a" onchange="calculateTotal()">
<option value="0">Sport</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
<option value="Soccer">Soccer</option>
<option value="Rugby">Rugby</option>
<option value="Polo">Polo</option>
<option value="Fencing">Fencing</option>
<option value="Swimming">Swimming</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Star Sign" id="SS" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Star Sign</option>
<option value="1.5">Aries</option>
<option value="3">Taurus</option>
<option value="1.5">Gemini</option>
<option value="2">Cancer</option>
<option value="3">Leo</option>
<option value="1.5">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="1.5">Capricorn</option>
<option value="0.5">Aquarius</option>
<option value="0.5">Pisces</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Hobby" id="Hobby" data-native-menu="false" onchange="calculateTotal()">Hobby
<option value="0">Hobby</option>
<option value="A lot">A lot</option>
<option value="Some">Some</option>
<option value="Few">Few</option>
<option value="None">None</option
</select>
</div>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Favourite Colour" id="FC" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Favourite Colour</option>
<option value="1.5">Black</option>
<option value="3">Blue</option>
<option value="1.5">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="1.5">Pink</option>
<option value="2">Purple</option>
<option value="3">Red</option>
<option value="2">Yellow</option>
<option value="1.5">White</option>
<option value="4">Other</option>
</select>
<br/>
<p>
<br/>
<div data-role="fieldcontain">
<label for="Age">
<div align="center">Age
:
</div>
</label>
<div align="center">
<input type="number" name="Age" id="Age" value="" />
</div>
</div>
</form>
<p> </p>
<p> <a href="#" data-role="button"> <input type='submit' id='Submit' value='submit' onclick="calculateTotal()"/>
<br/>
</div>
</form>
</div>
</body>
</html>
// JavaScript Document
var Sport = new Array();
Sport["Tennis"]=1.5;
Sport["Golf"]=3;
Sport["Soccer"]=2;
Sport["Rugby"]=3;
Sport["Polo"]=1.5;
Sport["Fencing"]=2;
Sport["Swimming"]=3;
var SS = new Arr4ay();
Star_Sign["Aries"]=1.5;
Star_Sign["Taurus"]=3;
Star_Sign["Cancer"]=2;
Star_Sign["Leo"]=3;
Star_Sign["Virgo"]=1.5;
Star_Sign["Libra"]=2;
Star_Sign["Scorpio"]=3;
Star_Sign["Sagittarius"]=2;
Star_Sign["Capricorn"]=1.5;
Star_Sign["Aquarius"]=0.5;
Star_Sign["Pisces"]=1.5;
var Hobby = new Array();
Hobby["A lot"]=0.5;
Hobby["Some"]=1;
Hobby["Few"]=1;
Hobby["None"]=2;
var FC = new Array();
Favourite_Colour["Blue"]=3;
Favourite_Colour["Brown"]=1.5;
Favourite_Colour["Green"]=2;
Favourite_Colour["Orange"]=3;
Favourite_Colour["Pink"]=1.5;
Favourite_Colour["Purple"]=2;
Favourite_Colour["Red"]=3;
Favourite_Colour["Yellow"]=2;
Favourite_Colour["White"]=1.5;
Favourite_Colour["Other"]=4;
function calc() {
var Sport = Number(document.getElementsById("Sport").value);
var SS = Number(document.getElementsById("SS").value);
var Hobby = Number(document.getElementsById("Hobby").value);
var FC = Number(document.getElementsById("FC").value);
var Age = Number(document.getElementsById("Age").value);
var total = Sport + SS + Hobby + FC;
var Score = Age = Score
}// JavaScript Document

In your function calc replace Number with either parseInt if you always expect an integer from your value or parseFloat otherwise.

Unless I am misunderstanding what you're after you could just use the Array.reduce function:
Array.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
So for you:
function calc() {
new tempAry = [
Number(parseInt (document.getElementsById("Sport").value),10),
Number(parseInt (document.getElementsById("SS").value),10),
Number(parseInt (document.getElementsById("Hobby").value),10),
Number(parseInt (document.getElementsById("FC").value),10)
];
var total = tempAry.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
//No idea what these are for
//var Age = Number(document.getElementsById("Age").value);
//var Score = Age = Score
}
Not sure exactly what you're after, nor what `Score is meant for, but total should equal the total number.

IE showing two div instead of one

I made a button which is showing and hiding div on click by using jQuery. But IE showing another extra div and rest of the browsers showing it properly.
<div class="hide-search-button">
<div class="l-f-w" id="locate">
<h1> Location </h1>
<input type="hidden" value="" id="loc_hidden"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h1>State</h1></td>
<td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
<option value="Choose">Choose</option>
<?php
//connect with database
$sqlCountry="select DISTINCT state from sheet1
order by state asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
while($rowCountry=mysql_fetch_array($resCountry)){
?>
<option value="<?php echo $rowCountry['state']?>">
<?php echo $rowCountry['state']?>
</option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td><h1>Region</h1></td>
<td><select id="region_name" name="region_name"
onchange="selectState(this.options[this.selectedIndex].value)">
<option value="Choose">Choose</option>
</select>
</td>
</tr>
<!--<tr>
<td><h1>Suburb</h1></td>
<td><select id="suburb_name" name="suburb_name">
<option value="Choose">Choose</option>
</select></td>
</tr>-->
<tr>
<td><h1>Pin Code</h1></td>
<td> <input type="text"value=" " name="pin" id="pin"></td>
</tr>
</table>
<input type="hidden" value="2" name="searchform" />
<script>
function span_go()
{
//var locate = document.getElementById("menuSelection").innerHTML;
var service = document.getElementById("sertype").innerHTML;
//document.getElementById("locatetext").value = locate;
document.getElementById("servicetext").value = service;
//alert (service);
}
</script>
<input type="hidden" value="" id="servicetext" name="servicetext"/>
<?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>
</div> <!-- location field wrapper ends here -->
<div class="service_type_wrap s-t-w">
<h1> Service Type </h1>
<select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">
<option value="Long Day Care">Long Day Care</option>
<option value="Occasional Care">Occasional Care</option>
<option value="In Home Care">In Home Care</option>
<option value="Before School Care">Before School Care</option>
<option value="After School Care">After School Care</option>
<option value="Vacation">Vacation Care</option>
<option value="Special Care">Special Care</option>
<option value="Permanent / Contract">Permanent / Contract</option>
<option value="Part time">Part time</option>
</select>
</div> <!-- service type wrapper ends here -->
<div class="f-r-w" style="margin-left:10px;">
<h1> Filter Results </h1>
<select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">
<option value="title">Sort by job title</option>
<option value="date">Sort by date</option>
</select>
</div> <!-- filter results wrapper ends here -->
<div class="go_button_wrap">
<input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
</div> <!-- go button ends here -->
</form>
</div>
JS:
$(document).ready(function() {
$("#button").toggle(function() {
//$(this).text('Hide Advance Search');
}, function() {
//$(this).text('Show Advance Search');
}).click(function(){
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
});
Screenshot shown below:

Try to change click part of your code. You need to pass event object into the handler. In IE actually there is window.event object. Maybe it causes the issue:
.click(function(event) {
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});

Form button that populates textbox is not working in Internet Explorer

My button OnClick event uses Javascript to populate two wide textboxes with the selected options from multiple select boxes.
Everything works perfect in Firefox and Chrome but nothing happens when you click the button in Internet Explorer. I would appreciate any help.
<!DOCTYPE html>
<html>
<script type="text/javascript">
function addbutton1() {
var box1 = document.getElementById('dropdown1').options[document.getElementById('dropdown1').selectedIndex].text;
var box2 = document.getElementById('dropdown2').options[document.getElementById('dropdown2').selectedIndex].text;
var box3 = document.getElementById('dropdown3').options[document.getElementById('dropdown3').selectedIndex].text;
var box4 = document.getElementById('dropdown4').options[document.getElementById('dropdown4').selectedIndex].text;
var box5 = document.getElementById('dropdown5').options[document.getElementById('dropdown5').selectedIndex].text;
var box6 = document.getElementById('dropdown6').options[document.getElementById('dropdown6').selectedIndex].text;
textbox1.value = box1 + ', ' + box2 + ', ' + box3 + ', ' + box4;
textbox2.value = box5 + ', ' + box6;
}
</script>
<body>
<form name="customform" id="wstForm_Custom" action="%wstx.formmailerurl%" method="post" labelID="formLabel_CustomForm">
<style>
#wstForm_Custom {background-color:transparent;} .specialEmailField {display: none;visibility:hidden;height:0px;} .emailDisplay {display: none;visibility:hidden;height:0px;}
</style>
<table>
<tr><td style="font-family:Arial; text-align: left; font-size: 10pt;">Row 1:</td>
<td><select style="width: 150px" id="dropdown1">
<option value='0'>Select</option>
<option value='100.00'>Option 1a</option>
<option value='100.00'>Option 1b</option>
</select></td>
<td><select style="width: 150px" id="dropdown2">
<option>Select</option>
<option>Option 2a</option>
<option>Option 2b</option>
</select></td></tr>
<tr><td style="font-family:Arial; text-align: left; font-size: 10pt;">Row 2:</td>
<td><select style="width: 150px" id="dropdown3">
<option>Select</option>
<option>option 3a</option>
<option>Option 3b</option>
</select></td>
<td><select style="width: 150px" id="dropdown4">
<option>Select</option>
<option>Option 4a</option>
<option>Option 4b</option>
</select></td>
<tr><td style="font-family:Arial; text-align: left; font-size: 10pt;">Row 3:</td>
<td><select style="width: 150px" id="dropdown5">
<option value='0'>Select</option>
<option value='0'>Option 5a</option>
<option value='0'>Option 5b</option>
</select></td></tr>
<tr><td style="font-family:Arial; text-align: left; font-size: 10pt;">Row 4:</td>
<td><select style="width: 150px" id="dropdown6">
<option value='0'>Select</option>
<option value='100.00'>Option 6a</option>
<option value='100.00'>Option 6b</option>
</select></td>
</table>
<button type="button" onclick="addbutton1(this.form)">Add Options to Textboxes</button>
<table style="width: 700px">
<tr>
<input style="width:480px" name="First Textbox" id="textbox1" type="text" AUTOCOMPLETE="OFF"/></td>
</tr>
<tr>
<input style="width:480px" name="Second Textbox" id="textbox2" type="text" AUTOCOMPLETE="OFF"/></td>
</tr>
</table>
<p style="width: 740px; text-align: center">
<input style="width:100px;" title="Submit" id="wstForm_Custom_Submit" onclick="return wstxSubmitForm(this);" type="submit" value="Submit"/>
<input style="width:50px;" title="Reset Form" id="wstForm_Custom_Reset" type="reset" value="Reset"/>
</p>
</form>
</body>

You should use document.getElementById('textbox1').value not simple textbox1.value.
Here is an example: http://jsfiddle.net/WbTmf/1/