Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

OnClick with <Select> to exec function & return info

Status
Not open for further replies.
victory92

victory92

Programmer
Sep 18, 2002
35
US
Hi

I hope you can help. I'm new at this....

I have a dropdown list containing Products. When the user selects a product - I would like a JS function to execute that will get the index of the product to look up the price in an array.

I have

<select name="SelectProduct1" ONClick=getIndex()>
<option selected>-- Make a Selection --</option>
<option value="FV">Product 1</option>
<option value="AA">Product 2</option>
</select>

I have tried onChange and OnClick. The error I am getting is Oject Expected

I'm sure others have needed to have many fields updated based on a product chosen.

I don't want to have a submit button as I have one already to execute PayPal.

Please HELP!!! I'm open to suggestions

Thanks


 
Sort by date Sort by votes
Use 'onChange' and can you post the function 'getIndex()'.

It might be a simple case that you haven't put quotes round the getIndex() call.
 
Upvote 0 Downvote
Do you already have a getIndex() function ? if not, that's why you are getting the Object Expected error.


Now, let me understand your dilemma.
You have a list of some sort, with product codes and prices, something similar to (FV,200) (AA,23) (XX,YYY)

and you want to show the price depending on what you select from the drop down list.

What do you have so far in Javascript? How are you building that array?

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------
 
Upvote 0 Downvote
The quotes worked... thanks Now if the next problem.

I want to show the price and product number. I have a table. I had a form for the dropdown.


The getIndex function gets the index number of the product name shown in the <select> It then looks up hard-coded arrays that contain the product number and price for the selected product name. I have the price in a variable called pp and the product number in variable called pn

I need to be able to put these values in table...

any Ideas???

Here's the look up of pp and pn...

Anything else you need??

Thanks


function getIndex() {

var sub;
var fld;
fld = "SelectProduct" + sub;
var x=document.getElementById(fld)
z = (x.options[x.selectedIndex].index)

var pp = productprice[z]

var pn = productno[z]
}
 
Upvote 0 Downvote
I'm assuming a value pair for the Product number and Product Price because that way you can always have the information sync. I don't like the idea of using two separate arrays and one index to get the prodcut number and price, I rather have everything in on place where is easy for me to see things.

Each array holds the products and prices for each select.
there is one big array called productTbl where all your products ( categories rather) are saved.

Make sure everything has an Id, on your original code you are calling getElementById however your Select doesn't have an Id property.

Play around see what helps you and what not.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script>
p1=new Array("AF,200","FF,150","RZ,12");
p2=new Array("CD,123","RR,112","TE,23","JU,12","LO,129");
p3=new Array("HG,2","FG,10","LL,422","IO,89");
productTbl=new Array(p1,p2,p3);

function chgPrice(objSelect) {
var selectName=objSelect.name; //Name of the current Select being processed.
var selectNum=selectName.substr("SelectProduct".length); //trailing number of the current select SELECT1 will give us '1';
var theForm=objSelect.form; //the form where the select object is contained
var currentIdx=objSelect.selectedIndex; //the index of the current Option selected
var currentValue=objSelect.options[currentIdx].value; //the value of the the current Option.

	if (currentIdx != 0) { //if you select something other thatn the initial option then.....
	  var prodNumValue=productTbl[selectNum-1][currentIdx-1].split(","); //grab the value pair and break in two parts
	    document.getElementById("txtProd"+selectNum).value=prodNumValue[0]; // first part is the product number
	    document.getElementById("txtPrice"+selectNum).value=prodNumValue[1];//second part is the product price
	}else{
	    document.getElementById("txtPrice"+selectNum).value="";//if you select the initial option again, then clear the boxes.
	    document.getElementById("txtProd"+selectNum).value="";
	}
}
</script>
<body><form name="form1" id="form1" method="post" action="">
<table border="2">
  <tr>
    <th>&nbsp;
   </th>
    <th>Product Code</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Select # 1:
      <select name="SelectProduct1" id="SelectProduct1" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="AF">Product 1</option>
      <option value="FF">Product 2</option>
      <option value="RZ">Product 3</option>
      </select>   </td>
    <td><input type="text" value="" name="txtProd1" id="txtProd1"></td>
    <td><input type="text" value="" name="txtPrice1" id="txtPrice1"></td>
  </tr>
  <tr>
    <td>Select # 2:
      <select name="SelectProduct2" id="SelectProduct2" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="CD">Product 1</option>
      <option value="RR">Product 2</option>
      <option value="TE">Product 3</option>
      <option value="JU">Product 4</option>
      <option value="LO">Product 5</option>	  
      </select>
   </td>
    <td><input type="text" value="" name="txtProd2" id="txtProd2"></td>
    <td><input type="text" value="" name="txtPrice2" id="txtPrice2"></td>
  </tr>
  <tr>
    <td>Select # 3:
      <select name="SelectProduct3" id="SelectProduct3" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="HG">Product 1</option>
      <option value="FG">Product 2</option>
      <option value="LL">Product 3</option>
      <option value="IO">Product 4</option>
      </select>
   </td>
    <td><input type="text" value="" name="txtProd3" id="txtProd3"></td>
    <td><input type="text" value="" name="txtPrice3" id="txtPrice3"></td>
  </tr>
</table> </form>
</body>
</html>

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------
 
Upvote 0 Downvote
Thank you so much for your response! This will work.

Is there a way I can lock the txtProd & txtPrice fields so the user cannot change them. Can labels be used?

 
Upvote 0 Downvote
<td><input type="text" value="" name="txtProd3" id="txtProd3" [red]onFocus="this.blur();"[/red]></td>
<td><input type="text" value="" name="txtPrice3" id="txtPrice3" [red]onFocus="this.blur();"[/red]></td>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
I don't know if you want to pass the code and the price back to the database, since the value on the Select is also the Product Code, however you could use CSS for display purposes only.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script>
p1=new Array("AF,200","FF,150","RZ,12");
p2=new Array("CD,123","RR,112","TE,23","JU,12","LO,129");
p3=new Array("HG,2","FG,10","LL,422","IO,89");
productTbl=new Array(p1,p2,p3);

function chgPrice(objSelect) {
var selectName=objSelect.name; //Name of the current Select being processed.
var selectNum=selectName.substr("SelectProduct".length); //trailing number of the current select SELECT1 will give us '1';
var theForm=objSelect.form; //the form where the select object is contained
var currentIdx=objSelect.selectedIndex; //the index of the current Option selected
var currentValue=objSelect.options[currentIdx].value; //the value of the the current Option.

	if (currentIdx != 0) { //if you select something other thatn the initial option then.....
	  var prodNumValue=productTbl[selectNum-1][currentIdx-1].split(","); //grab the value pair and break in two parts
	    document.getElementById("txtProd"+selectNum).innerHTML=prodNumValue[0]; // first part is the product number
	    document.getElementById("txtPrice"+selectNum).innerHTML=prodNumValue[1];//second part is the product price
	}else{
	    document.getElementById("txtPrice"+selectNum).innerHTML="&nbsp;";//if you select the initial option again, then clear the boxes.
	    document.getElementById("txtProd"+selectNum).innerHTML="&nbsp;";
	}
}
</script>
<style>
.productCode{
border:thin dotted black;
text-align:center;
width:200px;
}
.productPrice{
font-weight:bold;
text-align:right;
background-color:#3300CC;
color:#FFFFFF;
width:150px;
}
</style>
<body><form name="form1" id="form1" method="post" action="action.cfm">
<table border="2">
  <tr>
    <th>&nbsp;
   </th>
    <th>Product Code</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Select # 1:
      <select name="SelectProduct1" id="SelectProduct1" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="AF">Product 1</option>
      <option value="FF">Product 2</option>
      <option value="RZ">Product 3</option>
      </select>   </td>
    <td><div id="txtProd1" class="productCode">&nbsp;</div></td>
    <td><div id="txtPrice1" class="productPrice">&nbsp;</div></td>
  </tr>
  <tr>
    <td>Select # 2:
      <select name="SelectProduct2" id="SelectProduct2" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="CD">Product 1</option>
      <option value="RR">Product 2</option>
      <option value="TE">Product 3</option>
      <option value="JU">Product 4</option>
      <option value="LO">Product 5</option>	  
      </select>
   </td>
    <td><div id="txtProd2" class="productCode">&nbsp;</div></td>
    <td><div id="txtPrice2" class="productPrice">&nbsp;</div></td>
  </tr>
  <tr>
    <td>Select # 3:
      <select name="SelectProduct3" id="SelectProduct3" onChange="chgPrice(this)">
	  <option value="">-- Make a Selection --</option>
	  <option value="HG">Product 1</option>
      <option value="FG">Product 2</option>
      <option value="LL">Product 3</option>
      <option value="IO">Product 4</option>
      </select>
   </td>
    <td><div id="txtProd3" class="productCode">&nbsp;</div></td>
    <td><div id="txtPrice3" class="productPrice">&nbsp;</div></td>
  </tr>
</table> 
<p>
   <input type="submit" name="Submit" value="Submit" />
</p>
</form>
</body>
</html>

The solution chessbot provided is simple and it will work for you if you need the values in the boxes passed back to the server.




grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
536
lexer
lexer
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
964
ggriffit
ggriffit
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
497
coldbohemia
coldbohemia
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
629
Kennelbloke
Kennelbloke
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
146
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top