JavaScript - Calculating A Number Through 4 Drop Down Menus

hi im new to javascript and after hours of trying to figure it out myself and failing, i might as well just ask for help

the problem is really simple...

http://i307.photobucket.com/albums/n...eaker/help.jpg
check the image^

what i want to do is after selecting an item from the drop down menu and clicking "Go" an image underneath the button will show up

ex.(i pick a and click on Go and an image of an airplane shows up, i pick b and click Go and an image of a boat shows up, etc)

help please?

I wish to get the values for the 3rd and 4th cell of each row where these contain drop down menus. I've tried various ways but my code doesn't seem to iterate through rows of a table. I can get the values for the first row, but not the rest. There's isn't a fixed row size for the table as the user will be able to add and delete them.

I've put the values in separate arrays but instead of the array containing say [10, 20] it contains [10, 10] as it just duplicates the first row's values.

Here's my code that I have so far:
Code:

 function calculate(){
        var len = document.getElementById(arguments[1]).rows.length;
        var cMenus = [];
        var gMenus= [];
        for(var j = 1; j<len; j++){
            for(var i = 2; i<arguments.length; i++){
                var c = document.getElementById(arguments[2]);
                var g = document.getElementById(arguments[3]);
						
                cMenus[a] = c.options[c.selectedIndex].value;
                gMenus[a] = g.options[g.selectedIndex].value;	
            }
            a++;
        }

    <button type="button" onclick="calculate('text','course', 'credits', 'grade')">Calculate</button>

HTML Code up to the first dropdown menu:
Code:

 <table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
    <td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>   
    <td>
        <select name="credits" id="credits">
            <option value="10">10</option>
            <option value="20">20</option>
        </select>	
    </td>
    </td>
        <select name=....

I've tried adding j to the arguments or putting it in "[]" but nothing seems to work. I don't think the platform I'm using supports jquery, so help would be really appreciated for using javascript, thanks.

[This is an updated question from my previous thread as I was unable to edit or delete my question]

Hi there. This is my first thread. I'm completely new to javascript. I want to use dreamweaver with javascript to do a litter project in which I want to move value "Saleman" from drop-menu 1 and value "Billy" from drop-down 2 to a list box. The result should be as follows:

dropdown 1
Manager
Salesman (to be selected)
Cleaner

dropdown 2
Billy (to be selected)
Susan
Ivan

--- [Add button]

Listbox
Salesman - Billy


Thank you for your help.

Cheers
Raymond

Hello All,
I'm trying to find a script that would be able to do the following:
The are two drop down boxes, the first one populating the second (state/county --> town)
The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box.
The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county.

I've had a good root around the internet but am rapidly getting confused ...

many thanks in advance.
Si.

Hi,

I have created a global navigation includes document. Unfortunately the drop down menus that are part of the navigation aren't working. They worked fine when they were part of the page, but now that they are separated from the page as includes the drop down menus don't appear in my test site (posted to a web server). All other content in the includes file appears and works. Any ideas?

Thanks for your help.

I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem?

My php mysql query as below:-
mysql_select_db($database_winwin, $winwin);
$query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'";
$rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error());
$row_rsMobile = mysql_fetch_assoc($rsMobile);
$totalRows_rsMobile = mysql_num_rows($rsMobile);

Whereby:-
Product Brand: product_brand
Product price: product_price
Commission: commission
Product name: product_name
Product Thumbnail: thumbnail_url
Product URL: product_url

HTML for filters & sorter:-
<div id="filters">
<form action="" method="post" name="form_filters" id="form_filters">
<table width="750" border="0">
<tr>
<td>Brand:</td>
<td><select name="productBrand" id="productBrand">
<option value="All Brands">All Brands</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select></td>
<td>Price:</td>
<td><select name="priceRange" id="priceRange">
<option value="All Price">All Price</option>
<option value="Below RM1000">Below RM1000</option>
<option value="RM1000-RM1999">RM1000-RM1999</option>
<option value="RM2000 & Above">RM2000 & Above</option>
</select></td>
<td>Sort by:</td>
<td><select name="productSort" id="productSort">
<option value="Sort By Name">Name</option>
<option value="Sort By Price">Price</option>
</select></td>
<td><input name="Apply Filters" type="submit" value="Apply Filters"/></td>
<td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td>
</tr>
</table>
</form>
</div>

Once user click on "Apply Filters" javascript has to sort list the product items.

HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :-

<div id="pager">
No. of items per page:
<select name="NumOfItem" id="NumOfItem">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Total Item:
Pages ...
Next...
Previous
</div>

Javascript has to manage pager column.

HTML for Product display:-
<div id="product">
<div id="Thumbnail">
Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL".
</div>
<div id="Price">
Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL".
</div>
<div id="Commission">
Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL".
</div>
</div>

Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column

Hello,

I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this?

Any help would be greatly appreciated,
Thanks

Here is the link:

http://www.patagonia.com/web/us/home

I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function:

1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100.

Does any one know how to code this in my function below in javascript:

Code:

function insertQuestion(form) 
    {   
    
         var row = document.createElement("tr");
         var cell, input;
    
    cell = document.createElement("td");
         cell.className = "weight";
         input = document.createElement("input");
         input.name = "weight_" + qnum;
         input.onkeypress = "return isNumberKey(event)";
         cell.appendChild(input);
         row.appendChild(cell);
    }

I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?

When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string!
15.23689 .toFixed ( 2 ) ==> "15.24"
So does it convert the number into string?

I now have the calculation, topic can be closed!

thanks

Hi,

There are two text boxes in a HTML form. The first text box takes the time when the user starts to work on a project. The second box takes the time when the user stops working on that project.

Now, I would like to calculate the total time worked on that project for that user. That is (stop time - start time). I tried few things without success.

Any help will be appreciated.

to be honest I have no idea where to start, i have a table, with 2 numeric values at the minute, if the checkbox is selected I want the total price to be shown?

Any help to get me started would be great!

this is the form I have with the numeric values

Code:

<form id="calculation" action="#" method="post">

100 <input type="checkbox" name="check1" value="100" onClick='total_cost()'/>

120 <input type="checkbox" name="check2" value="200" onClick='total_cost()'/>

Total cost<input type="text" name="total" id="total" readonly="readonly" />

onClick='total_cost()' is referring to the javascript function where I just don't know where to start?

Hello everyone. Below is code I have developed for a simple spreadsheet. The issue I am having is that when I total a row or column using "=sum(a1:a5)" and then I try and total another row and add the sum of the two totals together I am not getting a valid response back. All I am presented with is a "0" in the column cell. Here is the code in two files and have also included an attachment of the whole project:

tablepage.js
Code:

// JavaScript Document

var tblRows = 20;
var tblColumns = 10;
var tblArray = new Array(tblRows);
var p = window.parent;

// Initial page event handler
function initPage() 
{
    p.refAssignCellFromTextbox = assignCellFromTextbox;

    for (var i = 0; i < tblArray.length; i++) 
	{
        tblArray[i] = new Array(tblColumns);
        for (var j = 0; j < tblArray[i].length; j++)
            tblArray[i][j] = "0";
    }

    recalculate();
}

// Recalculate cell values
function recalculate() 
{
    for (var i = 0; i < tblRows; i++) 
	{
        for (var j = 0; j < tblColumns; j++) 
		{
            if (tblArray[i][j].indexOf("=SUM") != -1) 
			{
                calculateCell(i, j);            
            }
        }
    }
}

// Click cell event handler
function clickCell(cellRef) 
{
    thisRef = cellRef;
	
    var cellID = cellRef.id;

    var row = parseFloat(cellID.substr(0, 3)) - 1;
    var column = parseFloat(cellID.substr(3, 2)) - 1;

    var cellValue = tblArray[row][column];
    var tokenArray = getFormula(cellValue);

    if (tokenArray != null)
        p.assignTextboxFromArray(cellValue);
    else
        p.assignTextboxFromCell(cellRef);
}

// Update cell from textbox
function assignCellFromTextbox(tblValue) 
{
    if (thisRef != undefined) 
	{
        if (tblValue == "") 
		{
            tblValue = "0";
        }
        var tokenArray = getFormula(tblValue);

        if (tokenArray != null) 
		{
            assignArray(thisRef.id, tblValue.toUpperCase());
        }
        else 
		{
            if (!isFloat(tblValue)) 
			{
                    parseValue = tblValue.replace(/[^0-9]/g, '');
                    tblValue = parseValue;
            }
            assignArray(thisRef.id, tblValue);
            if (tblValue == "0")
                thisRef.innerText = "";
            else
                thisRef.innerText = tblValue;
        }
		
        recalculate();
    }
}

// Determines if a user entered a formula
function getFormula(tblValue) 
{
    var pattern = /[:|\(|\)]/;
    var ar = tblValue.split(pattern);
    var sum = ar[0].toUpperCase();

    if (ar.length < 3)
        return null;
    else if (sum != "=SUM") 
	{
        return null;
    }
    else 
	{
        return ar;
    }
}

function assignArray(cellID, tblValue) 
{
    var row = parseFloat(cellID.substr(0, 3));
    var column = parseFloat(cellID.substr(3, 2));

    tblArray[row - 1][column - 1] = tblValue;
}

function calculateCell(row, column)
{
    var tokenArray = getFormula(tblArray[row][column]);

    if (tokenArray != null) 
	{
        var fromColumn = tokenArray[1].substr(0, 1);
        var fromRow = tokenArray[1].substr(1, tokenArray[1].length - 1);

        var toColumn = tokenArray[2].substr(0, 1);
        var toRow = tokenArray[2].substr(1, tokenArray[2].length - 1);

        var fromRowIndex = parseFloat(fromRow) - 1;
        var fromColIndex = fromColumn.charCodeAt(0) - 65;

        var toRowIndex = parseFloat(toRow) - 1;
        var toColIndex = toColumn.charCodeAt(0) - 65;

        var sumTotal = 0;

        for (var i = fromRowIndex; i <= toRowIndex; i++) 
		{
            for (var j = fromColIndex; j <= toColIndex; j++) 
			{
                if (isFloat(tblArray[i][j]))
                    sumTotal += parseFloat(tblArray[i][j]);
            }
        }

        var cellID = fillField((row + 1).toString(), 3) + fillField((column + 1).toString(), 2);
        document.getElementById(cellID).innerText = sumTotal;
    }
}

function isFloat(s) 
{
    var ch = "";
    var justFloat = "0123456789.";

    for (var i = 0; i < s.length; i++) 
	{
        ch = s.substr(i, 1);
        if (justFloat.indexOf(ch) == -1)
            return false;
    }
    return true;
}

function fillField(s,n)
{
    var zeros = "0000000000";
    return zeros.substring(0, n - s.length) + s;
}

spreadsheet.js
Code:

// JavaScript Document

var refAssignCellFromTextbox;
var nCharsAllowed = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.=(): ";


// Event Handler
function initPage() 
{
    document.getElementById("TableFrame").style.top = "50px";
    document.getElementById("TableFrame").src = "tablepage.html";
}

// Updates text field when a user clicks on a particular field from with the spreadsheet
function assignTextboxFromCell(cValue) 
{
    document.getElementById("fieldEntry").value = cValue.innerText;
    document.getElementById("fieldEntry").focus();
}

// Assists tablepage.js with updating a value from a 2D array
function assignTextboxFromArray(aValue) 
{
    document.getElementById("fieldEntry").value = aValue;
    document.getElementById("fieldEntry").focus();
}

// Used when a user presses a key to update text field
function filterText() 
{
    if (window.event.keyCode != 13) 
	{
        if (!nCharOK(window.event.keyCode))
            window.event.keyCode = null;
    }
    else 
	{
        window.event.keyCode = null;
        refAssignCellFromTextbox(document.getElementById("fieldEntry").value);
    }
}

// Checks to see if character entered falls within our preset
function nCharOK(c) 
{
    var ch = (String.fromCharCode(c));
    ch = ch.toUpperCase();

    if (nCharsAllowed.indexOf(ch) != -1)
        return true;
    else
        return false;
}

// Clears all data from the screen
function clearPage() 
{
    initPage();
    document.getElementById("fieldEntry").value = "";
}

// Add a row to the table
function addRow(frmTable) 
{
	var table = document.getElementById(frmTable);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	var cell1 = row.insertCell(0);
	// cell2.innerHTML = rowCount + 1;
	// Unless this is going to be completely dynamic
	// the rest of the table code would have had to be 
	// entered in statically. Not happening.
}

// Delete a row from the table
function deleteRow(frmTable) 
{
	try 
	{
		var table = document.getElementById(frmTable);
		var rowCount = table.rows.length;

		for(var i=0; i<rowCount; i++) 
		{
			var row = table.rows[i];
			var chkbox = row.cells[0].childNodes[0];
			if(null != chkbox && true == chkbox.checked) 
			{
				table.deleteRow(i);
				rowCount--;
				i--;
			}
		}
	}
	catch(e) 
	{
		alert(e);
	}
}

Hi,

I am trying to write a script that will take a date of birth and another date and, if the person was over 75 years old on the createdDate, return "true" (otherwise return "false").

Unfortunately my code doesn't seem to return either 'true' or 'false'! Any help would be grately appreciated.

The code is:

Code:

var dateofBirth="30/10/1982";
var createdDate="01/12/2010";
var sd = dateofBirth.split('/');
var dob = new Date(sd[2],sd[1],sd[0]);
sd = createdDate.split('/');
var submit = new Date(sd[2],sd[1],sd[0]);
var age=submit-dob;
var ageYears=Math.floor((((age/3600000)/24)+1)/365.25); 
if(ageYears>75) document.write("true") else document.write("false") ;