JavaScript - Validates Against Multiple Dropdown Menus

I have 9 select menus that are populated by a php for loop. Each has a numeric value that is displayed base on the selection (which I have working).

I can not figure out how to sum all of these values and display them in a <div> tag. Any help will be greatly appreciated.

what I have thus far:
PHP Code:
// Part of a function that creates drop down boxes 
<select name="$name" onchange="document.getElementById('cost_$name').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('cost_$name')"> 

// option is generated in a for loop $i is a number and $cost is a different number 
<option value="$i" cost_$name="$cost">$i</option> 

// <div> tag for output of cost_$name where cost_$name is output 
<div align="center" id="cost_$name">0</div> 

/* 
the above is working fine.. it will display the correct output when an option is selected from the drop downs 
*/ 

//At the bottom of the table I want to total the values of the cost_$name 's 
// So far I came up with this to do the addition, what I don't know is how to 
// get the values into the 
// getValues() function and output them in a <div> tag. 
<script language="javascript"> 
function getValues(){ 

    var numVal1=parseInt(document.getElementById("cost_body").value); 
    var numVal2=parseInt(document.getElementById("cost_agility").value); 
    var numVal3=parseInt(document.getElementById("cost_reaction").value); 
    var numVal4=parseInt(document.getElementById("cost_strength").value); 
    var numVal5=parseInt(document.getElementById("cost_charisma").value); 
    var numVal6=parseInt(document.getElementById("cost_intuition").value); 
    var numVal7=parseInt(document.getElementById("cost_logic").value); 
    var numVal8=parseInt(document.getElementById("cost_willpower").value); 
    var numVal9=parseInt(document.getElementById("cost_edge").value); 

    var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9; 

    document.getElementById("cost_total").value = totalValue; 
} 
</script> 

Is it possible to pull multiple variables from a single dropdown menu selection?

example:
I have this:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value='.926'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value='1.050'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value='.958'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I'd like to have multiple option values:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value1='.926', option value2='.005-.008'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value1='1.050', option value2='.005-.008'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value1='.958', option value2='.005-.008'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I plan to use the first value in some math formulas to determine weights and the rest of the values will just be shown as data for the user and/or possibly a link to the datasheet for the material selected.

Is this possible or am I reaching here?

Hi all,

I am building a custom validator. I don't want any suggestions on using a jQuery framework, i just want to ask a few question on how best to continue.

Code:

<script type="text/javascript">
			//Validator Strings And Expressions.
			var Letters      =  /^[A-Za-z]+$/;
			var Numbers      =  /^[0-9]+$/;
			var Alphanumeric =  /^[A-Za-z0-9]+$/;
			var Email        =  /^[a-z0-9][a-z0-9~_\-]*(\.[a-z][a-z0-9~_\-]*)*@(([a-z0-9][a-z0-9_\-]*\.)+[a-z]{2,4}|[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})$/i;
			var Telephone    =  "0123456789- +()";
			
			document.onkeyup = function(event){
				//IE doesn't pass in the event object
				var event = event || window.event;

				//IE uses srcElement as the target
				var target = event.target || event.srcElement;

				var strId = target.id

				switch(target.id){
					case "M_FIRSTNAME":
					   validEmpty(strId,"* Please enter your 'First Name'.");
						validChars(strId,Letters,"* Your 'First Name' contains invalid characters.");
					   break;
					case "M_LASTNAME":
						validEmpty(strId,"* Please enter your 'Last Name'.");
						validChars(strId,Letters,"* Your 'Last Name' contains invalid characters.");
						break;
					case "M_EMAIL":
						validEmpty(strId,"* Please enter your 'E-mail Address'.");
						validChars(strId,Email,"* Your 'E-mail Address' should be in the format you@email.com.");
						break;
					case "M_EMAIL_CONF":
						validEmpty(strId,"* Please confirm your 'E-mail Address'.");
						validMatch(strId,"M_EMAIL","Your 'E-mail Address' does not match.")
						break;
					case "M_USERNAME":
						validEmpty(strId,"* Please enter your 'Username'.");
						validChars(strId,Alphanumeric,"* Your 'Username' contains invalid characters.");
						validRange(strId,6,12,"* Your 'Username' should be between 6-12 characters.");
						OnCheckAvailability(strId);
						break;
					case "M_PASSWORD":
						validEmpty(strId,"* Please enter your 'Password'.");
						validChars(strId,Alphanumeric,"* Your 'Password' contains invalid characters.");
						validRange(strId,6,12,"* Your 'Password' should be between 6-12 characters.");
						break;
					case "M_PASSWORD_CONF":
						validEmpty(strId,"* Please confirm your 'Password'.");
						validMatch(strId,"M_PASSWORD","Your 'Password does not match.'")
						break;
				}
				//document.write(return true);
			};

			document.onclick = function(event){
				//IE doesn't pass in the event object
				var event = event || window.event;
            
				//IE uses srcElement as the target
				var target = event.target || event.srcElement;
            
				var strId = target.id
         
				switch(target.id){
					case "M_TERMS":
					   validCheck(strId,"* Please accept our Terms and Conditions.");
					   break;
				}
			};
		</script>

This is the "on page" validation. This, as you can see calls functions held in an included file onkeyup. This all works well, also the username check ajax call works great. However I have 2 questions that I need to sort before this will work correctly.

1. Using M_USERNAME form as an example. If I start typing in there it will begin validating, which is great, However, if i typed in "matt_thomas" based on the validations, Empty:Pass, ValidChars:Fail, Range:Pass, Check:Pass.

So I know that it isn't empty, it's the correct length and it's not already in the DB. But it fails because of the "_". This should mean that I receive the error i have setup for that failure. But I don't. Because I don't stop on a Fail, I receive the success message of the last function.

So my question is; How Can I stop running any more functions when one fails?

2. Looking at the above code, How can I make sure that a submit will only work when ALL fields validate correctly?

Is this possible? I'm sure it is, but Can't see the woods for the trees right now

Thanks for any advice you can give. Even if you can just suggest something to look for.

Also sorry in advance but I don't understand alot of "tech" jargon lol, so please keep it simple.

Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.

Here's what I'm trying to do.

I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated.

S

Hi.

I am having trouble getting my code to validate for my speed/distance calculator. I have 2 input prompts: 1 for hours and 1 for minutes. The issue is I can put a number for hours (e.g 7) and W for minutes and the result will display distance is NaN, whereas I am expecting it to alert user to input a valid number. The same issue applies if I switch the order of isNan(hours) and isNaN(mins)

If you have even the slightest idea of what I have done wrong, or what I am missing I will truly appreciate the input. Thanks!

Code:

<html>
	<head>	
	<title>Sound Travel Calculator</title>
	<script type="text/javascript">
	
	// ??????????????????????????????????????????????????????????????????????????????????????????????????????????????
	// the program works pretty well except if i put, lets say 7 hours and w mins then it will say the distance traveled is NaN. but it should be re-prompting to enter hours and mins. It doesn't matter if I switch the order of isNan(hours) and isNaN(mins)
	// ??????????????????????????????????????????????????????????????????????????????????????????????????????????????
	
	
	
	// Setting our variables based on user input
	var hours = 0;
	var mins = 0;
	var m_per_secs = 340;
	
	alert("Speed of Sound \n\nAt Sea Level Sound Travels At 340 Metres Per Second \n\nIf You Would Like To Know How many Kilometres sound Will Travel In A Given Time, Click OK");
	hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)");
	mins = prompt("Please Enter Minutes");
	
	// Validating input for a number less than zero or an not a number
	while ((isNaN(hours)) || (isNaN(mins)) && (hours < 0) || (mins < 0)) 
		{
		alert("Please enter a numeric value, zero or greater");
		hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)");
		mins = prompt("Please Enter Minutes");
		}
	
	// if there is no input, the value is set to zero
	if (hours =="") 
		{
		hours = 0;
		}
	if (mins =="") 
		{
		mins = 0;
		}
		
	// Calculations
	dist = (((parseFloat(hours)) * 60 * 60) + (parseFloat(mins * 60)) * parseFloat(m_per_secs) / 1000)
	
	// Output our calculation
	alert("The Distance of Sound Travelled is " + (dist) + " Kilometres");
	//end program
	</script>
	</head>
	<body>
	</body>
</html>

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

Dependable dropdown lists (4 level)

1 Level dropdown list
2 Level dropdown list
3 Level dropdown list
4 Level dropdown list

Every dropdown list is depends on another dropdown list

For example if I select a value from 1 dropdown list then 2 dropdown list will appear. And then I select a value from 2 dropdown list then 3 dropdown list will appear. And if I select a value from 3 dropdown list then 4 dropdown list

Multiple selection will be enable. It means every dropdown list may have hundreds of values. Thus, In this situation of multiple selection of values I analyze that, use of dropdown isn't suitable because if a dropdown value has 500 related values then these 500 values disturb the page design. So, is there any other better solution for it?

Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted.

[code]
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>603 products page</title>
<link rel="stylesheet" type="text/css" href="css/603.css" />

<script type="text/javascript">
<!-- <![CDATA[
function changeImage(filename)
{
mainimage.src = filename;
}
// ]]> -->
</script>

</head>

<body>
<div id="frame">
<div id="logoheader">
</div>
<div id="navigation">
<table align="center" cellpadding="0" cellspacing="0"border="0">
<tr>
<th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th>

<th><img src="images/buttons/productsup.png" border="0" alt="products"/></th>
<th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th>
<!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>-->
<th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th>
</tr>
</table>
<!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>-->
</div>
<div id="contentproducts">

<div id="tablediv">
<table align="center" cellpadding="0" border="0">
<tr>
<th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th>

<th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th>
</tr>
</table>
<!--START-->
<div id="largeimage">
<img name="mainimage" src="images/blank.jpg" alt="main image"/>
</div>

<!--END-->

</div>
</div>
<div id="footer">
<img src="images/copyright.png" border="0" alt="footer logo"/>
</div>
</div>

</body>

</html>
[code]

I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that.

Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly.

Any help is greatly appreciated. thank you

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

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>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

hey guys
The first dropdown has some options as :
abc(a)
bcd(a)
cde(b)
def(b)
efg(c)
fgh(c)
The second dropdown has :
a
b
c
On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance.

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe