Learn VBA & Macros in 1 Week!

JavaScript - Extracting Values From Select Boxes And Summing The Result

Full Excel VBA Course - Beginner to Expert

Extracting Values From Select Boxes And Summing The Result	View Content

Hello,

I'm working on a project that involves extracting values from a series of select boxes and then working out the result.

The select boxes contain the following:
Code:

<select name="select_Col1_Row1">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<select name="select_Col1_Row2">
<option value="blue" selected="selected">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<input type="text" name="RedSum">
<input type="text" name="BlueSum">
<input type="text" name="GreenSum">
</select>

As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements...

Code:

<script type="text/javascript">
function getElements()
  {
  var table = document.getElementById("x");   
  var x = table.getElementsByTagName("option");
  for (var i = 0; i < x.length; i++) {   
    var status = x[i].getAttribute("selected");
	alert(status);
    if (status == "selected") {
      var statushcap = x[i].getAttribute("id");
      var statusvalue =x[i].getAttribute("value");
      if (statusvalue == "blue") {
        alert(statusvalue);
      }
    }

  }
  
  alert(x.length);
  }
</script>

If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice.

Best,

John

Full Excel VBA Course - Beginner to Expert

Getting Values Through Getelementbyclass Then Summing Them Up

Similar Tutorials

View Content

I'm new to js and have been going crazy trying to get this to work. I need the script to pull the values in the class selected, then spit out the sum of them. It can't be that hard! This is what I have and it just won't run. I'm working in a intra environment, so I'm not too worried about cross-browser compatibility. Any help would be appreciated. Thank you.

<html>
<head>
<script>
function findTheOddOnes() {
var theOddOnes = document.getElementsByClassName("odd");

for(var i=0; i<theOddOnes.length; i++){
sum += theOddOnes[i].textContent;
alert(sum);
}
}
</script>
</head>
<body>
<h1>getElementsByClassName Test</h1>
<p class="odd">1000</p>
<p>This is an even para.</p>
<p class="odd">1000</p>
<p>This one is not odd.</p>
<form>
<input type="button" value="Find the odd ones..." onclick="findTheOddOnes()">
</form>
</body>
</html>

Change 2nd Select Values Based On 1st Select

Similar Tutorials

View Content

Hi JS Experts,

I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data

1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table)
2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103).

How can I accomplish the above?

Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2.

For Example:
If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100.
If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200

Any help would be really appreciated. Thanks

Vinny

Javascript Select Boxes

Similar Tutorials

View Content

Calculating quiz answers?

Code:

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }

I Want To Add Values From 5 Drop Down Boxes

Similar Tutorials

View Content

Hi guys, i'm trying to develop a code for my sister, i would like to use javascript
to finish off the following task:

1. I want to be able to select marks from 0 to 30, from 5 drop down boxes.
2. and as marks are selected, it should upgrade the total.
3. and then show me the total marks when finished.

i've got up to creating the drop down boxes, now it's just adding the values once selected.

Thanks! anyhelp would be welcome

Need Help. Javascript Select Boxes Using Arrays

Similar Tutorials

View Content

I'm trying to do this using numerical arrays for an assignment:

Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale.

I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated?

<html>

<head>
<script type="text/javascript">

</script>
</head>

<body>

<form>
<select id="theSport" onChange="fillTeams()">
<option>Choose a Sport</option>
<option>Basketball</option>
<option> Baseball </option>
</select>
<select id="theTeams" onChange="fillPlayers()">
<option>................</option>
<option></option>
<option></option>
</select>
<select id="thePlayers" size="3">
<option> ...............</option>
<option></option>
<option></option>
</select>
</form>

</body>

</html>

Customizing Dynamic Select Boxes

Similar Tutorials

View Content

Hi all,
I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent.

You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html

In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries.

I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded?

Ie9 Breaks Dynamic Select Boxes

Similar Tutorials

View Content

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

Thank you in advance for any help provided.

Save The Text Boxes Values

Similar Tutorials

View Content

I am doing a website project and I am currently designing product page.

I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page.

I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line.

I know the values of the text boxes can be saved using php in the backend.

But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php?

Adding Values From Selection Boxes

Similar Tutorials

View Content

Hello,

I am extremely new to JS so please bear with me. Any help is very much appreciated.

Currently I am trying to take the values of 2 or more select boxes, add them together and then update a text field each time a selection in one of the select boxes is made. Basically, I am trying to keep a running total.

Currently I have it set up so that onchange it grabs the selected value. The problem is that it is being processed as a string I believe. For instance, if there are two variables, a=111 and b=222, the output in the text field reads 111222. I tried using parseInt, but that just returns NaN (not a number?...just a guess).

I have seen this solved with if statements, grabbing the selected index # and then assigning an integer, but I am hoping there is an easier way.

Again, your help is appreciated.

Javascript Select Boxes, Onchange Event Help

Similar Tutorials

View Content

Hello,

I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms.

So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event.

Here is my code (this is a proof of concept and highly stripped down):
Code:

<html>
<head>
</head>
<body>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    var array = [ 'name', 'age', 'year'];

    function init(sel_val){
        for (var i = 0; i < array.length; i++){
            document.write(i + " " + array[i] + "<br />");
        }

        for (var i = 0; i< array.length; i++){
            document.product.id_type.options[i] = new Option(i + array[i], i);
        }
    }


    function OnChange(sel_val) {
//         for(i = document.product.id_style.length - 1; i > 0; i--)
//                document.product.id_style.options[i]    = null;
//        document.product.id_style.options[0] = new Option("something else", 15);
          alert("pressed" + " " + sel_val + "<br />");
    }

    </script>


<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>

        <select name="id_style" size="5" style="width: 150px;" ></select>
    </form>
    <script>
            init();
    </script>



</body>
</html>

I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy.

I understand that sel_val is not being set, but I'm not sure how it should (or could) be set.

I would like to use a hash instead of integer values for `i`

document.product.id_type.options[i] = new Option(i + array[i], i);

becomes

document.product.id_type.options[i] = new Option(hash[key], key);

Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist.

2 Select Boxes In 1 Form With Onchange Display

Similar Tutorials

View Content

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

Problem Multiplying 2 Values From Input Boxes

Similar Tutorials

View Content

I am working on a job calculator. I have 2 txt input boxes titled "project_rate_field" and "project_time_field" as well as a third box .. "project_pay_total_field" for output..

I need to multiply the rate field and the time field and output the total into the third box.

I've never really used javascript before so I dont know much about it or how to write it but im trying to learn.

Here is my .js file ...

Code:

function project_pay_details()
{
	var rate = document.getElementById("project_rate_field").value;
	var time = document.getElementById("project_time_field").value;

	var total = (rate * time);

	project_pay_total_field.value = "$" + total;
}

And here is my .html file

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript" href="functions.js" />

<style>
	.wrap { float: right; }
	#project_pay { float: left; margin-right: 15px; line-height: 38px; font: 10px Arial, Helvetica, sans-serif; color: #bbb; }
	#project_pay_details { border-top: 1px dotted #ddd; padding-bottom: 10px; margin-top: 10px; float: right; width: 100%; }
	.field { border: none; line-height: 38px; font: 20px Arial, Helvetica, sans-serif; color: #666; width: 100px; font-weight: bold; margin-top: 6px; }
</style>

</head>

<body>
<form id="project_pay_details" name="form1" method="post" action="" class="editable">
	<div class="wrap">
	<div id="project_pay">Pay Rate<input type="text" name="project_rate_field" id="project_rate_field" class="field" value="10" />/ hr</div>
    <div id="project_pay">Total Hours<input type="text" name="project_time_field" id="project_time_field" class="field" value="0" /></div>
	<div id="project_pay">Project Total<input type="text" name="project_pay_total_field" id="project_pay_total_field" class="field" readonly="readonly" value="0" /></div>
	<input name="project_pay_details_refresh" type="button" value="Refresh" onClick="project_pay_details()" /></input>
    </div>
</form>
</body>
</html>

I need to know what im doing wrong because this obviously doesnt work.

Chained Select Boxes Issue On Back Button

Similar Tutorials

View Content

Hello to all and thank you for any help beforehand.

I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct.

I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script.

Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select

Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js

test.html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

Here's the content of getCities.php
Code:

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

Program In Javascript To Select Multiple Text Boxes

Similar Tutorials

View Content

hi ! i would like to write the code for multiple text box select as shown in the link below:

http://www.downloadplex.com/Mobile/I...ne_284120.html

please see the screen shot 3

Need Help Summing If Statements

Similar Tutorials

View Content

The issue I am having is with my sumAll function:

Code:

<script type="text/javascript">
/* <![CDATA[ */
   function addNumbers()
 {
   a = parseInt(document.getElementById('txtFirst').value);
   b = parseInt(document.getElementById('txtSecond').value);
   c = parseInt(document.getElementById('txtThird').value);
   d = parseInt(document.getElementById('txtFourth').value);
   ansE = document.getElementById("Sum");
   ansE.value = '$' + (a + b + c + d);

   x = (a + b + c + d);


   if ( x >= 100000) {
     document.getElementById('Bonus').value = '$' + 1200; }
   
   else if ( x > 50000 && x<100000) {
     document.getElementById('Bonus').value = '$' + 800; }

   else {
     document.getElementById('Bonus').value = '$' + 0; }


   
   if (document.getElementById('Blue').checked == true && document.getElementById('Gala').checked == true) {
     document.getElementById('Committee').value = '$' + 800; }

   else if (document.getElementById('Blue').checked == true && document.getElementById('Gala').checked == false) {
     document.getElementById('Committee').value = '$' + 350; }

   else if (document.getElementById('Blue').checked == false && document.getElementById('Gala').checked == true) {
     document.getElementById('Committee').value = '$' + 450; }

   else {
     document.getElementById('Committee').value = '$' + 0; }     
}

   function sumAll()
 {
   y = parseInt(document.getElementById('Bonus').value);
   z = parseInt(document.getElementById('Committee').value);
   total = document.getElementById("Total");
   total.value = (y + z);
}


   function funcCalc()
 {
   addNumbers();
   sumAll();
}


/* ]]> */
</script>

I'm really new to this and I'm trying to figure out how to sum the two values from if statements. ParseInt is returning NaN. Before that, it was adding my results together as strings. Is there an easy way to add these together without creating a very complicated if statement to total these up?

Thanks!

Summing Numbers Problem

Similar Tutorials

View Content

I have trouble with summing variable zbroj, it is summed like it is string, and i dont have any idea why. Help please!
Code:

function zbrojibode()
{
var i=0;
var zbroj=new Number(0);
while((document.getElementById('bodtxt5'+i).value)){
if((document.getElementById('bodtxt5'+i).value!="") || (document.getElementById('bodtxt5'+i).value!="NaN"))
zbroj+=parseFloat(document.getElementById('bodtxt5'+i).value).toFixed(2);
i++;
}
document.getElementById('ukupno').value=zbroj;
}

Summing Textboxes With A Max Allowed

Similar Tutorials

View Content

i have a form with several headings, then for each heading i have a list of items with a select box filled with numbers.
For each heading a maximum of items is allowed, so the user should change the values in the dropdowns and not be allowed to continue until they are less than or equal to their maximum limit.
To complicate this, there will be more than one headings on the page, but each one with a different name/id.

Eg: Heading 1
Title 1 DROPDOWN1
Title 2 DROPDOWN2
Title 3 DROPDOWN3

So here the max is 10, so the values cannot exceed 10

Heading 2
Title 1a DROPDOWN1
Title 2a DROPDOWN2
Title 3a DROPDOWN3
Title 4a DROPDOWN4
So here the max is 10, so the values cannot exceed 14

thanks

Adding Textbox Numbers Summing Problem

Similar Tutorials

View Content

Below is the script and form fields I am working with. What I want to do is sum the two textbox fields and have the result show in the total textbox. The code works fine and the total textbox is updated with the value of form1.basic. The problem occurs when I add the "+ parseInt(document.form2.supporter.value)" code in the script section. What am I doing wrong? Thank you for your time and help.

Code:

<script type="text/javascript"><!--
function updatesum() {
document.frmtotal.total.value = parseInt(document.form1.basic.value) + parseInt(document.form2.supporter.value)}
//--></script>

<tr> 
   <td width="111"><form id="form1" name="form1" method="post" action="">
      <label for="basic">$</label>
      <input name="basic" type="text" id="basic" size="7" maxlength="7" onchange="updatesum(this.form)" />
    </form></td>
  </tr>

  <tr>
     <td><form id="form2" name="supporter" method="post" action="">
      <label for="supporter">$</label>
      <input name="supporter" type="text" id="supporter" size="7" maxlength="7" onchange="updatesum(this.form)" />
    </form>

Building A Dynamic Select Menu From Values Selected In Other Fields

Similar Tutorials

View Content

How To Set Form Text Values Based On Select Value With Javascript And Plsql

Similar Tutorials

View Content

I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated.

cursor:
Quote:
cursor bldglistc
is
select stvbldg_code,
stvbldg_desc,
slbbldg_street_line1,
slbbldg_city,
slbbldg_stat_code,
slbbldg_zip
from stvbldg, slbbldg
where stvbldg_code = slbbldg_bldg_code (+)
and stvbldg_desc not like 'DNU%'
and stvbldg_desc not like 'Online%'
order by slbbldg_bldg_code;

bldg_record bldglistc%ROWTYPE;
Javascript in package:
Quote:
htp.p('
<SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript">
function UpdateNextField(which1,which2,fld1,fld2) {
document.getElementById(fld1).value = which1.value;
document.getElementById(fld2).value = which2.value;
}

</SCRIPT>
');
Form code from package:
Quote:
HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post');
twbkfrmt.P_FormHidden ('atyp', atyp);
twbkfrmt.P_FormHidden ('seqno', seqno);

twbkfrmt.p_tableopen (
'DATAENTRY',
cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."')
);
twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5');
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'),
idname => 'street_line1_input_id'
)
);
twbkfrmt.p_tabledataopen (ccolspan => '5');
HTP.formselectopen (
'str1',
'',
1,
cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"'
);

OPEN bldglistc;

LOOP
FETCH bldglistc INTO bldg_record;

IF bldglistc%NOTFOUND
THEN
EXIT;
END IF;

IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1
THEN
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1,
'selected'
);
ELSE
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1
);
END IF;
END LOOP;

CLOSE bldglistc;

HTP.formselectclose;
twbkfrmt.p_tabledataclose;
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'),
idname => 'street_line2_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'str2',
70,
75,
address_rec.spraddr_street_line2,
cattributes => 'ID="street_line2_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'),
idname => 'zip_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'zip',
NULL,
30,
address_rec.spraddr_zip,
cattributes => 'ID="zip_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tableclose;
HTP.para;
--
HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit'));
HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset'));
HTP.formclose;