Multi select in form? - javascript

I am trying to auto populate two drop down fields in form with two rows of same table.
Getting confused on JavaScript
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option>
</select>
</td>
</tr>
And i want to auto populate select 1000,1001,1002 for Center USA 1003 1004 for Center UK
<tr>
<td><label>Center</label></td>
<td><select name="center">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
Any help pl


Try this:
HTML:
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select id="cardid" name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option></select></td>
</tr>
<tr>
<td><label>Center</label> </td>
<td><select id="center" name="center">
<option value="USA ">USA </option>
<option value="UK "> UK </option>
</select> </td>
</tr>
Javascript:
var usa = "1000,1001,1002";
var uk = "1003,1004";
$(function(){
$('#cardid').change(function(){
if(usa.indexOf($(this).val()) != -1){
// found usa
$('#center').val($('#center > option:first-child').val());
}
else if(uk.indexOf($(this).val()) != -1){
//found uk
$('#center').val($('#center > option:last-child').val());
}
});
});
Here is demo

Related

How to disable an option when selected more than 5 times in dynamically generated rows?

Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.

You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>

Mirror multiple select fields jquery/javascript

I am new to JavaScript and HTML, and I want to achieve the following structure:
[Drop down 1]
[Option 1]
[Option 2]
[Drop down 2]
[Option 1]
[Option 2]
..and so on
Then I want the options reflected in TD's below like:
<td> </td><td class="sel1">Selected option from drop-down 1</td>
<td> </td><td class="sel2">Selected option from drop-down 2</td>
..and so on
UPDATE: Added Jfiddle as per request from Joshua Kisubi: https://jsfiddle.net/2ra5ptk1/1/
td {
font-family: calibri;
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
select,
body {
font-family: calibri;
font-size: 14px;
}
<body>
I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Selection 1:<br>
<select class="selection1">
<option value="choose">[Choose]</option>
<option value="option2">Sel1: Option 1</option>
<option value="option1">Sel1: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection2">
<option value="choose">[Choose]</option>
<option value="option2">Sel2: Option 1</option>
<option value="option1">Sel2: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection3">
<option value="choose">[Choose]</option>
<option value="option2">Sel3: Option 1</option>
<option value="option1">Sel3: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection4">
<option value="choose">[Choose]</option>
<option value="option2">Sel4: Option 1</option>
<option value="option1">Sel4: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection5">
<option value="choose">[Choose]</option>
<option value="option2">Sel5: Option 1</option>
<option value="option1">Sel5: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection6">
<option value="choose">[Choose]</option>
<option value="option2">Sel6: Option 1</option>
<option value="option1">Sel6: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection7">
<option value="choose">[Choose]</option>
<option value="option2">Sel7: Option 1</option>
<option value="option1">Sel7: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection8">
<option value="choose">[Choose]</option>
<option value="option2">Sel8: Option 1</option>
<option value="option1">Sel8: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection9">
<option value="choose">[Choose]</option>
<option value="option2">Sel9: Option 1</option>
<option value="option1">Sel9: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection10">
<option value="choose">[Choose]</option>
<option value="option2">Sel10: Option 1</option>
<option value="option1">Sel10: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection11">
<option value="choose">[Choose]</option>
<option value="option2">Sel11: Option 1</option>
<option value="option1">Sel11: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection12">
<option value="choose">[Choose]</option>
<option value="option2">Sel12: Option 1</option>
<option value="option1">Sel12: Option 2</option>
</select>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Result from selection 1:</td>
<td class="sel1">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 2:</td>
<td class="sel2">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 3:</td>
<td class="sel3">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 4:</td>
<td class="sel4">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 5:</td>
<td class="sel5">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 6:</td>
<td class="sel6">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 7:</td>
<td class="sel7">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 8:</td>
<td class="sel8">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 9:</td>
<td class="sel9">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 10:</td>
<td class="sel10">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 11:</td>
<td class="sel11">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 12:</td>
<td class="sel12">RESULT HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Can anyone give me any tips or resources on how to achieve this result?

You mixed up the usage of id versus classes in your html so it is hard to reference in javascript.
Use id for unique elements on a page and classes for similar ones.
that way you can attach an event handler to select elements at once.
Ofcourse you can have a for loop to attach to select with id 'sel'+ count but that is inefficient.
$(function() {
$('.selection').on('change', function(){
var sel_id = $(this).attr('data-id');
var sel_opt = $(this).val();
$('table td#'+sel_id).text(sel_opt)
})
});
td {
font-family:calibri;
font-size:14px;
border:1px solid rgba(0,0,0,0.2);
}
select, body {
font-family:calibri;
font-size:14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Selection 1:<br>
<select class="selection" data-id="sel1">
<option value="choose">[Choose]</option>
<option value="option2">Sel1: Option 1</option>
<option value="option1">Sel1: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel2">
<option value="choose">[Choose]</option>
<option value="option2">Sel2: Option 1</option>
<option value="option1">Sel2: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel3">
<option value="choose">[Choose]</option>
<option value="option2">Sel3: Option 1</option>
<option value="option1">Sel3: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel4">
<option value="choose">[Choose]</option>
<option value="option2">Sel4: Option 1</option>
<option value="option1">Sel4: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel5">
<option value="choose">[Choose]</option>
<option value="option2">Sel5: Option 1</option>
<option value="option1">Sel5: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel6">
<option value="choose">[Choose]</option>
<option value="option2">Sel6: Option 1</option>
<option value="option1">Sel6: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel7">
<option value="choose">[Choose]</option>
<option value="option2">Sel7: Option 1</option>
<option value="option1">Sel7: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel8">
<option value="choose">[Choose]</option>
<option value="option2">Sel8: Option 1</option>
<option value="option1">Sel8: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel9">
<option value="choose">[Choose]</option>
<option value="option2">Sel9: Option 1</option>
<option value="option1">Sel9: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel10">
<option value="choose">[Choose]</option>
<option value="option2">Sel10: Option 1</option>
<option value="option1">Sel10: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel11">
<option value="choose">[Choose]</option>
<option value="option2">Sel11: Option 1</option>
<option value="option1">Sel11: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel12">
<option value="choose">[Choose]</option>
<option value="option2">Sel12: Option 1</option>
<option value="option1">Sel12: Option 2</option>
</select>
</td><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Result from selection 1:</td><td id="sel1">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 2:</td><td id="sel2">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 3:</td><td id="sel3">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 4:</td><td id="sel4">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 5:</td><td id="sel5">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 6:</td><td id="sel6">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 7:</td><td id="sel7">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 8:</td><td id="sel8">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 9:</td><td id="sel9">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 10:</td><td id="sel10">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 11:</td><td id="sel11">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 12:</td><td id="sel12">RESULT HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Clone all last columns dropdown javascript on button click

I am trying to clone the nth all columns of the html table where as my code converts only the last lows last column Dropdown on click i need all the dropdown of last column to be duplicated
JS Fiddle Demo
Example Present Status :
Day1 Dropdown 1
1 dd
2 dd
3 dd dd
on click
Expected out Put
Day1 Dropdown 1 Dropdown 2
1 dd dd
2 dd dd
3 dd dd
HTML:
<table id='tableID'>
<tbody>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
JS:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$trLast = $tableBody.find("td:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});

You also need to clone the th and add a value. This would work for now -> http://jsfiddle.net/kQpfE/248/
$("#clone").on("click", function () {
var newHeader = $('#tableID thead tr').append('<th></th>');
$('#tableID').find('th:last()').append('Dropdown' + ($('#tableID thead tr th').length - 1));
$.each($('#tableID tbody').find('tr'), function (i, v) {
$(v).append($(v).find('td:last()').clone());
});
});
Edit: Forgot to mention your use of the same ID Multiple times as well as your TH being in the Tbody, perhaps clean up your HTML first.
Edit2: After a screensharing session adapted the code to add the th and increment.

Change your html for this, cuz you were not using thead:
<table id='tableID'>
<thead>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
And your script for this:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$tableHead = $('#tableID').find("thead"),
$trLast = $tableBody.find("td:last");
$tableHead.find("tr").each(function(){ $(this).append($("<th>Dropdown "+ $tableHead.find("th").size() - 1 +"</th>")); });
$tableBody.find("tr").each(function(){ $(this).append($trLast.clone()); });
});

php script is not receiving data param of Javascript load() method

thank you in advance for your help on this matter. I'm trying to implement a dynamic drop down menu. The region menu is created dynamically upon a selection of a country. The problem is that the country value is not reaching the php script, and so I am unable to create the proper sql statment. I have used a "select col from table" query to verify the dynamic list is indeed being created (just not one based on user's country selection). I am not sure why the "choice" isn't making it over. I'm thinking it may be a problem with my javascript syntax? Any guidance is much appreciated!
FILE: cargo.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#product_country").click(function()
{
$("#product_region").load("../scripts/find_region.php?choice=" + $("#product_country").val());
});
});
html of cargo.php
<table id="menuSelectors" width="850" cellpadding="2">
<form action="cargo.php" method="POST">
<tr>
<td>varietal</td>
<td>type</td>
<td>style</td>
<td>color</td>
<td>country</td>
<td>region</td>
<td>price</td>
<tr>
<td>
<select name="product_varietal" class="selector">
<option value="" selected="selected"></option>
<option value="merlot">merlot</option>
<option value="pinot gris">pinot gris</option>
<option value="chardonnay">chardonnay</option>
</select>
</td>
<td>
<select name="product_type" class="selector">
<option value="" selected="selected"></option>
<option value="sparkling">sparkling</option>
<option value="still">still</option>
<option value="still">effervescent</option>
</select>
</td>
<td>
<select name="product_style" class="selector">
<option value="" selected="selected"></option>
<option value="dry">dry</option>
<option value="sweet">sweet</option>
<option value="semi-sweet">semi-sweet</option>
</select>
</td>
<td>
<select name="product_color" class="selector">
<option value="" selected="selected"></option>
<option value="red">red</option>
<option value="white">white</option>
</select>
</td>
<td>
<select id="product_country" name="product_country" class="selector">
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="united states">United States</option>
</select>
</td>
<td>
<select id="product_region" name="product_region" class="selector">
<option value="" selected="selected">Select Country First</option>
</select>
</td>
<td>
<select name="product_price" class="selector">
<option value="" selected="selected"></option>
<option value="BETWEEN 0 AND 10"> under $10</option>
<option value="BETWEEN 10 AND 20">$10 - $20</option>
<option value="BETWEEN 20 AND 30">$20 - $30</option>
<option value="BETWEEN 40 AND 50">$40 - $50</option>
<option value="BETWEEN 50 AND 100">$50 - $100</option>
<option value="BETWEEN 100 AND 500">$100 over</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="submit" class="submit" value="SUBMIT" /></td>
</tr>
</form>
</table>
File: find_region.php
<?php
//CONNECT
require_once 'connect.php';
$country = mysqli_real_escape_string($_GET['choice']);
$region_result = mysqli_query($con,"SELECT product_region FROM product");
//$region_result = mysqli_query($con,"SELECT wine_region FROM wine_regions WHERE wine_country = '$country'");
if (!$region_result)
{
printf("Error: %s\n", mysqli_error($con));
}
else
{
while ($row = mysqli_fetch_array($region_result))
{
echo "<option>" . $row{'product_region'} . "</option>";
//echo "<option>" . $row{'wine_region'} . "</option>";
}
}
?>

Calculation Percentage Remainder

I am trying to auto calculate the remainder percentage from 4 dropdown select option. This is the code I have so far, but I can't seem to get it to work. After the calculation, the undeveloped percentage should be the total percentage added up minus 100%. For example, if each of the 4 had 10% used, the Undeveloped would be 60%. Any help is much appreciated.
<html>
<head>
<title>Calculation</title>
<script language="javascript" type="text/javascript">
function calcPercentUseSum(){
var Percent1 = document.getElementsByName("SingleFamilyUsePercent");
var strUser = Percent1.options[Percent1.selectedIndex].value;
var Percent2 = document.getElementsByName("MultifamilyUsePercent");
var strUser = Percent2.options[Percent2.selectedIndex].value;
var Percent3 = document.getElementsByName("CommericalUsePercent");
var strUser = Percent3.options[Percent3.selectedIndex].value;
var Percent4 = document.getElementsByName("IndustrialUsePercent");
var strUser = Percent4.options[Percent4.selectedIndex].value;
document.getElementsByName("Undeveloped").value = Percent1
+ Percent2
+ Percent3
+ Percent4;
}
</script>
</head>
<body>
<form method="post" action>
<table width="640">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<th rowspan="3" colspan="3" valign="bottom" align="left"> Present Use:</th>
</tr>
<tr>
<td style="height: 21px"> </td>
<td style="height: 21px"></td>
</tr>
<tr>
<th colspan="3" align="left" style="height: 18px"> </th>
</tr>
<tr>
<td style="height: 25px"> </td>
<td colspan="2" style="height: 25px"> </td>
<td style="height: 25px">Single Family</td>
<td style="height: 25px"><select size="1" name="SingleFamilyUsePercent"
onchange="calcPercentUseSum" value="Single Family" tabindex="92">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Multifamily</td>
<td><select size="1" name="MultifamilyUsePercent" onchange="calcPercentUseSum"
value="Multifamily" tabindex="93">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Commericial</td>
<td><select size="1" name="CommericalUsePercent" onchange="calcPercentUseSum"
value="Commericial" tabindex="94">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Industrial</td>
<td><b>
<select size="1" name="IndustrialUsePercent" onchange="calcPercentUseSum"
value="Industrial" tabindex="95" style="height: 21px">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></b></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Undeveloped</td>
<td><input name="Undeveloped" readonly="readonly" type="text" /></td>
</tr>
</table><br />
<input type="submit" value="Save Form" name="tbSubmit" tabindex="253" />
</form>
</body>
</html>

Take a look at your function. You're fetching the proper value from each of the <select> options, but then you're storing the result in a variable called strUser which you've [re]declared 4 times. You're overwriting the value, and then not even using it.
You're trying to sum (using +) the actual HTML <select> elements, rather than the selected values you're (trying) to pull out.
Assign the values to separate variables, and then cast them to integers. I would remove the "%" sign off the value attributes in your HTML so they're easier to work with. Once you've done that then you essentially just have to do
var Percent1 = document.getElementsByName("SingleFamilyUsePercent")[0];
var Value1 = Percent1.options[Percent1.selectedIndex].value;
var Percent2 = document.getElementsByName("MultifamilyUsePercent")[0];
var Value2 = Percent2.options[Percent2.selectedIndex].value;
...
var Total = parseInt(Value1) + parseInt(Value2);
var Remainder = 100 - Total;
document.getElementsByName("Undeveloped")[0].value = Remainder;
I put [0]s on there because (I'm pretty sure) getElementsByName returns a list of elements, rather than a single one. Really, you should prefer to give your inputs ID attributes and then use getElementById instead.

Here is a working example that builds on some of the suggestions mentioned in previous answers:
http://jsfiddle.net/wdqgF/
JavaScript
calcPercentUseSum = function () {
var Use1 = document.getElementById("SingleFamilyUsePercent"),
Use2 = document.getElementById("MultifamilyUsePercent"),
Use3 = document.getElementById("CommericalUsePercent"),
Use4 = document.getElementById("IndustrialUsePercent");
var Perc1 = Use1.options[Use1.selectedIndex].value,
Perc2 = Use2.options[Use2.selectedIndex].value,
Perc3 = Use3.options[Use3.selectedIndex].value,
Perc4 = Use4.options[Use4.selectedIndex].value;
function cleanVal(n) {
// You do not want to call parseInt on an empty string "".
// parseInt("") will return NaN,
// and NaN plus a number will return NaN.
// e.g., "NaN + 5 + 10 + 20" returns NaN. Avoid this.
if (n === "") {
return 0;
} else {
return parseInt(n, 10);
}
}
var sumPerc = cleanVal(Perc1) + cleanVal(Perc2) + cleanVal(Perc3) + cleanVal(Perc4);
var Total = function () {
if ( Perc1 === "" && Perc2 === "" && Perc3 === "" && Perc4 === "" ) {
// To cover the scenario where the user selects item(s),
// but then reverts all items back to their first/empty option
return "";
} else if ( sumPerc > 100 ) {
// To cover the case where the Present Use Totals exceed 100%.
return "0%";
} else {
return (100 - sumPerc) + "%";
}
};
document.getElementById("Undeveloped").value = Total();
};
Note how in each <select>, an id is now present.
sample from altered HTML
<select size="1" name="SingleFamilyUsePercent" id="SingleFamilyUsePercent"
onchange="calcPercentUseSum()" value="Single Family" tabindex="92">
<option value=""></option>
<option value="0">0%</option>
...

Categories

Resources