setting form values

  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

I'm creating a form using Dreamweaver MX. I have drop down menus to select items and am using a yaromat extension to calculate the total cost of the items. The only part i'm missing is adding the prices in.

What I want to do is pick an item from a drop down list and then have the corresponding price appear automatically (from a predefined list) in a text box beside this. These text boxes are then added up using the extension.

Does anyone either know how to get form values to change by selecting others, or do you know of an extension which would do this for me?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Without seeing the "predefined list" and how the "yaromat extension" collects form data, all I can do is show a brief example :)

Code: [ Select ]
<html>
<head>
<script language="javascript">

priceArray = new Array("3.55","1.44","2.99");

function update(form){
    form.price.value = priceArray[form.from.selectedIndex];
}
</script>
</head>

<body>

<form name="form">

<select id="from" onChange="update(this.form)">
<option>test</option>
<option>test2</option>
<option>test3</option>
</select>

<input type="text" id="price">

</form>

</body>
</html>
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. priceArray = new Array("3.55","1.44","2.99");
  5. function update(form){
  6.     form.price.value = priceArray[form.from.selectedIndex];
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <form name="form">
  12. <select id="from" onChange="update(this.form)">
  13. <option>test</option>
  14. <option>test2</option>
  15. <option>test3</option>
  16. </select>
  17. <input type="text" id="price">
  18. </form>
  19. </body>
  20. </html>
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

thats it exactly.

Thanks
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

ok. I've done some comparing with the two scripts.

Here is my form at the moment:

Code: [ Select ]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function YY_CalculateForm() { //v3.01
//copyright (c)1999-2000 Yaromat.com
 var args=YY_CalculateForm.arguments;
 var myResult=""; var myField="0";
 if (document.all){eval("args[0]=args[0].replace(/.layers/gi, '.all');");}
 for (var i=3; i<args.length; i++){
  if(args[i].charAt(0)!="#"){
   myResult=myResult+args[i];
  }else{
   myField=eval(args[0]+'.'+ args[i].substring(1)+'.value'); if(myField=="")myField="0";
   myResult=myResult+myField;
  }
 }
 with (Math) {
  var myExpo = pow(10, args[2]);
  var myStr = round(myExpo*eval(myResult))/myExpo;
 }
 eval(args[0]+'.'+args[1]+'.value='+myStr);
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="" onpropertychange="YY_CalculateForm('document.form1','total','2','#textfield2','+','#textfield3','+','#textfield4')">
 <p>item 1
  <select name="select">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" name="textfield2">
 </p>
 <p>item 2
  <select name="select2">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" name="textfield3">
 </p>
 <p>item
  3
  <select name="select3">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" name="textfield4">
 </p>
 <p>Total
  <input type="text" name="total">
 </p>
 <p>&nbsp;</p>
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script language="JavaScript">
  6. <!--
  7. function YY_CalculateForm() { //v3.01
  8. //copyright (c)1999-2000 Yaromat.com
  9.  var args=YY_CalculateForm.arguments;
  10.  var myResult=""; var myField="0";
  11.  if (document.all){eval("args[0]=args[0].replace(/.layers/gi, '.all');");}
  12.  for (var i=3; i<args.length; i++){
  13.   if(args[i].charAt(0)!="#"){
  14.    myResult=myResult+args[i];
  15.   }else{
  16.    myField=eval(args[0]+'.'+ args[i].substring(1)+'.value'); if(myField=="")myField="0";
  17.    myResult=myResult+myField;
  18.   }
  19.  }
  20.  with (Math) {
  21.   var myExpo = pow(10, args[2]);
  22.   var myStr = round(myExpo*eval(myResult))/myExpo;
  23.  }
  24.  eval(args[0]+'.'+args[1]+'.value='+myStr);
  25. }
  26. //-->
  27. </script>
  28. </head>
  29. <body bgcolor="#FFFFFF" text="#000000">
  30. <form name="form1" method="post" action="" onpropertychange="YY_CalculateForm('document.form1','total','2','#textfield2','+','#textfield3','+','#textfield4')">
  31.  <p>item 1
  32.   <select name="select">
  33.    <option>item 1</option>
  34.    <option>item 2</option>
  35.    <option>item 3</option>
  36.   </select>
  37.   cost
  38.   <input type="text" name="textfield2">
  39.  </p>
  40.  <p>item 2
  41.   <select name="select2">
  42.    <option>item 1</option>
  43.    <option>item 2</option>
  44.    <option>item 3</option>
  45.   </select>
  46.   cost
  47.   <input type="text" name="textfield3">
  48.  </p>
  49.  <p>item
  50.   3
  51.   <select name="select3">
  52.    <option>item 1</option>
  53.    <option>item 2</option>
  54.    <option>item 3</option>
  55.   </select>
  56.   cost
  57.   <input type="text" name="textfield4">
  58.  </p>
  59.  <p>Total
  60.   <input type="text" name="total">
  61.  </p>
  62.  <p>&nbsp;</p>
  63. </form>
  64. </body>
  65. </html>


How would I use your script to work with more than one drop down list?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I still don't know what your "Pre-Defined list" looks like :wink: so I used a multi-dimensional array for this example.

We have multiple dropdown boxes so we can probably sort different prices into corosponding lists. Here's the javascript that we need.
Note that the calculate function was moved from the FORM declaration to inside our new function to be done only after a box has been updated.
Quote:
// Price arrays
// Main array to contain and provide numerical reference to each list.
priceArray = new Array();

// List for box 0
priceArray[0] = new Array("3.55","1.44","2.99");

// List for box 1
priceArray[1] = new Array("13.55","11.44","12.99");

// List for box 2
priceArray[2] = new Array("23.55","21.44","22.99");

// Price box update function
function update(form,indexx,n){
form.box[n].value = priceArray[n][indexx];
YY_CalculateForm('document.form1','total','2','#textfield2','+','#textfield3','+','#textfield4');
}


Now in the form we have a few changes to apply.

To each textbox we add this,
Quote:
id="box"
Making them look like this,
<input type="text" id="box" name="textfield2">
<input type="text" id="box" name="textfield3">

Not box0,box1 and so on, just "box". Giving them all the same ID makes them accessable through a numerical index like box[n] which makes it MUCH easier to reference them.

To each select tag we add this, where N is the index of the textbox that the select updates to starting with 0 (zero)
Code: [ Select ]
onChange="update(this.form,this.selectedIndex,N)"

// Making it look like this,
<select name="select" onChange="update(this.form,this.selectedIndex,0)">
  1. onChange="update(this.form,this.selectedIndex,N)"
  2. // Making it look like this,
  3. <select name="select" onChange="update(this.form,this.selectedIndex,0)">

The parameters this.form and this.selectedIndex take care of themselves, the only parameter you need to worry about is N. N is the numerical index of the textbox that the select refers to. When you add it to the first select N will be 0 (zero) and each one after increments by one.

I think I explained everything but in conclusion here is a revised version of the form to examine just in case :wink:
Code: [ Select ]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function YY_CalculateForm() { //v3.01
//copyright (c)1999-2000 Yaromat.com
 var args=YY_CalculateForm.arguments;
 var myResult=""; var myField="0";
 if (document.all){eval("args[0]=args[0].replace(/.layers/gi, '.all');");}
 for (var i=3; i<args.length; i++){
  if(args[i].charAt(0)!="#"){
   myResult=myResult+args[i];
  }else{
   myField=eval(args[0]+'.'+ args[i].substring(1)+'.value'); if(myField=="")myField="0";
   myResult=myResult+myField;
  }
 }
 with (Math) {
  var myExpo = pow(10, args[2]);
  var myStr = round(myExpo*eval(myResult))/myExpo;
 }
 eval(args[0]+'.'+args[1]+'.value='+myStr);
}

// Price arrays
priceArray = new Array();
priceArray[0] = new Array("3.55","1.44","2.99");
priceArray[1] = new Array("13.55","11.44","12.99");
priceArray[2] = new Array("23.55","21.44","22.99");

// Price update function
function update(form,indexx,n){
     form.box[n].value = priceArray[n][indexx];
    YY_CalculateForm('document.form1','total','2','#textfield2','+','#textfield3','+','#textfield4');
}

//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
 <p>item 1
  <select name="select" onChange="update(this.form,this.selectedIndex,0)">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" id="box" name="textfield2">
 </p>
 <p>item 2
  <select name="select2" onChange="update(this.form,this.selectedIndex,1)">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" id="box" name="textfield3">
 </p>
 <p>item
  3
  <select name="select3" onChange="update(this.form,this.selectedIndex,2)">
   <option>item 1</option>
   <option>item 2</option>
   <option>item 3</option>
  </select>
  cost
  <input type="text" id="box" name="textfield4">
 </p>
 <p>Total
  <input type="text" name="total">
 </p>
 <p>&nbsp;</p>
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script language="JavaScript">
  6. <!--
  7. function YY_CalculateForm() { //v3.01
  8. //copyright (c)1999-2000 Yaromat.com
  9.  var args=YY_CalculateForm.arguments;
  10.  var myResult=""; var myField="0";
  11.  if (document.all){eval("args[0]=args[0].replace(/.layers/gi, '.all');");}
  12.  for (var i=3; i<args.length; i++){
  13.   if(args[i].charAt(0)!="#"){
  14.    myResult=myResult+args[i];
  15.   }else{
  16.    myField=eval(args[0]+'.'+ args[i].substring(1)+'.value'); if(myField=="")myField="0";
  17.    myResult=myResult+myField;
  18.   }
  19.  }
  20.  with (Math) {
  21.   var myExpo = pow(10, args[2]);
  22.   var myStr = round(myExpo*eval(myResult))/myExpo;
  23.  }
  24.  eval(args[0]+'.'+args[1]+'.value='+myStr);
  25. }
  26. // Price arrays
  27. priceArray = new Array();
  28. priceArray[0] = new Array("3.55","1.44","2.99");
  29. priceArray[1] = new Array("13.55","11.44","12.99");
  30. priceArray[2] = new Array("23.55","21.44","22.99");
  31. // Price update function
  32. function update(form,indexx,n){
  33.      form.box[n].value = priceArray[n][indexx];
  34.     YY_CalculateForm('document.form1','total','2','#textfield2','+','#textfield3','+','#textfield4');
  35. }
  36. //-->
  37. </script>
  38. </head>
  39. <body bgcolor="#FFFFFF" text="#000000">
  40. <form name="form1" method="post" action="">
  41.  <p>item 1
  42.   <select name="select" onChange="update(this.form,this.selectedIndex,0)">
  43.    <option>item 1</option>
  44.    <option>item 2</option>
  45.    <option>item 3</option>
  46.   </select>
  47.   cost
  48.   <input type="text" id="box" name="textfield2">
  49.  </p>
  50.  <p>item 2
  51.   <select name="select2" onChange="update(this.form,this.selectedIndex,1)">
  52.    <option>item 1</option>
  53.    <option>item 2</option>
  54.    <option>item 3</option>
  55.   </select>
  56.   cost
  57.   <input type="text" id="box" name="textfield3">
  58.  </p>
  59.  <p>item
  60.   3
  61.   <select name="select3" onChange="update(this.form,this.selectedIndex,2)">
  62.    <option>item 1</option>
  63.    <option>item 2</option>
  64.    <option>item 3</option>
  65.   </select>
  66.   cost
  67.   <input type="text" id="box" name="textfield4">
  68.  </p>
  69.  <p>Total
  70.   <input type="text" name="total">
  71.  </p>
  72.  <p>&nbsp;</p>
  73. </form>
  74. </body>
  75. </html>
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

Brilliant. Thanks very much for your help!
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

No Problem :D
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

It sounds like you have some idea of what you're doing. So, I'm not gonna shove my code down your throat. The easiest way to assign the values of a drop down to a text box is:

Example:

Code: [ Select ]
form.textboxID.value = form.dropdownID.value


Although if it were me, I'd use a label instead of a textbox. For simplicity sake.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

s15199d wrote:
It sounds like you have some idea of what you're doing. So, I'm not gonna shove my code down your throat. The easiest way to assign the values of a drop down to a text box is:
Example:
Code:
form.textboxID.value = form.dropdownID.value
Although if it were me, I'd use a label instead of a textbox. For simplicity sake.


Reason # 1 I did it the way I did,
fional24 wrote:
What I want to do is pick an item from a drop down list and then have the corresponding price appear automatically (from a predefined list) in a text box beside this.


Reason # 2,
joebert wrote:
I still don't know what your "Pre-Defined list" looks like so I used a multi-dimensional array for this example.


Reason # 3,
Price lists are not somthing you want to dig out of form element attributes to update, this array list can be made external and //commented for easy updates.

Reason # 4 & 5, ( & perhaps the most important of all )
fional24 wrote:
thats it exactly.
Thanks

fional24 wrote:
Brilliant. Thanks very much for your help!


That's the way they wanted it :wink:

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 83 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.