adding in javascript...

**JLAudioFan** · 01-11-2006, 08:23 PM

I have a simple task i'm trying to complete, and javascript is making me want to put my head through my monitor... here's the code:

Code:

<script language="javascript">
function doRetail(){
var a=document.form1.WholePrice.value * .4;
a+=document.form1.WholePrice.value;
document.form1.RetailPrice.value = a;
}
</script>

I have 2 form fields.
One is WholePrice (text box, where you'd put a wholesale price for a product)
other one is RetailPrice ( i want to mark up the WholePrice by 40 % and set this field equal to that value)

The problem is, javascript sees my variables as strings and not integers (so if i put 100 in wholesale, i end up with 40100 instead of 140)

Help is GREATLY appreciated. PHP is more my language, javascript is just such a pain

Then again, it's been a few years since i've done any web design. Prolly a simple mistake.

**jscheuer1** · 01-11-2006, 10:14 PM

You need to assure that you are working with a number, not a string. Sometimes simply doing arithmatic operations on a string that could be a number is enough:

Code:

<script language="javascript">
function doRetail(){
var a=document.form1.WholePrice.value * .4;
a+=(document.form1.WholePrice.value * 1);
document.form1.RetailPrice.value = a;
}
</script>

Otherwise, Math.abs may serve:

Code:

<script language="javascript">
function doRetail(){
var a=document.form1.WholePrice.value * .4;
a+=Math.abs(document.form1.WholePrice.value);
document.form1.RetailPrice.value = a;
}
</script>

This still might not be enough, then you may need:

Code:

<script language="javascript">
function doRetail(){
var a=document.form1.WholePrice.value * .4;
a=Math.abs(document.form1.WholePrice.value)+Math.abs(a);
document.form1.RetailPrice.value = a;
}
</script>

**JLAudioFan** · 01-11-2006, 10:58 PM

Great, thanks a ton John!

I didn't know about the Math.abs function, looks like that's what I needed.

Once again, thanks. That was driving me crazy!

**JLAudioFan** · 01-12-2006, 06:50 PM

Question for whoever would like to answer:

Let's say I had multiple form items on this page, named WholePrice1, WholePrice2, etc (generated with PHP). Could I change my function to this??

Code:

<script language="javascript">
function doRetail(x){
var a=document.form1.WholePrice[x].value * .4;
a=Math.abs(document.form1.WholePrice[x].value)+Math.abs(a);
document.form1.RetailPrice[x].value = a;
}
</script>

I've tried it, and it doesn't work. Does Javascript have a different method of dealing with arrays? I figured if i passed "x" thru with the function, I could use it.

**jscheuer1** · 01-12-2006, 10:53 PM

With code like that, it would depend upon what your HTML markup looks like and upon what browser you are using. Cross browser code and markup can be written to do that. Javascript does do arrays like that but, will not recognize arrays unless they are constructed following the rules of both javascript and (more importantly, in this case) the HTML parsing rules of the browser (if applicable, as they likely are here). To save time and guesswork on my part, could you supply the HTML markup you are trying this with?

**mwinter** · 01-13-2006, 01:34 AM

Originally Posted by JLAudioFan

The language attribute has been deprecated in favour of the type attribute for a long time now:

HTML Code:

<script type="text/javascript">

function doRetail(){
var a=document.form1.WholePrice.value * .4;
a+=document.form1.WholePrice.value;

If this price is entered by a user, the first thing you should consider is validating that input:

Code:

function doRetail() {
  var controls  = document.forms.form1.elements,
      wholesale = controls.WholePrice.value;

  if(!/^\d+$/.test(wholesale) && ((wholesale = +wholesale) > 0)) {
    alert('The wholesale price must be a valid number.');
    return;
  }
  controls.RetailPrice.value = wholesale * 1.4;
}

You mention integers, so the regular expression above will only permit whole numbers. If you really intend any real, floating-point number, then the expression can be changed to

Code:

/^(0|[1-9]\d*)(\.\d+)?$/

If validation isn't an issue, then you can avoid the entire issue by performing a simple multiplication:

Code:

function doRetail() {
  var controls = document.forms.form1.elements;

  controls.RetailPrice.value = controls.WholePrice.value * 1.4;
}

Let's say I had multiple form items on this page, named WholePrice1, WholePrice2, etc (generated with PHP).

If you mean that the document will contain controls with names like 'WholePrice1' and 'WholePrice2', then the function can be parameterised but not in the way you suggest.

document.form1.WholePrice[x]

The document won't actually have an array of 'WholePrice' controls. There will be a discrete set of uniquely named controls. You'd have to access them - taking the second example above - like so:

Code:

function doRetail(index) {
  var controls = document.forms.form1.elements;

  controls['RetailPrice' + index].value = controls['WholePrice' + index].value * 1.4;
}

That is, you construct the property names at run-time.

Hope that helps,
Mike

**JLAudioFan** · 01-17-2006, 12:07 AM

Wow, that's alot of info to absorb... Here's the HTML markup that i'm using.

Code:

<table border="0" cellspacing="0" cellpadding="5">
	<tr>
	  <td class="genericText"><div align="center">Item To add </div></td>
	  <td class="genericText"><div align="center">Case Cost </div></td>
	  <td class="genericText"><div align="center">CaseCount</div></td>
	  <td class="genericText"><div align="center">Wholesale Price </div></td>
	  <td class="genericText"><div align="center">Retail Price </div></td>
	  <td class="genericText"><div align="center">Amt Rec'd </div></td>
	  <td class="genericText"><div align="center">asdfasdf</div></td>
	  <td class="genericText"><div align="center">asdfasdf</div></td>
	</tr>
<? for($x = 0;$x < $y;$x++){  ?>
    <tr>
      <td class="genericText"><div align="center">
        <select name="invselect[<?=$x?>]" class="genericText">
          <option value="none" <? if(!$_POST['invselect'][$x]){?>selected<? } ?>>Select --></option>
          <?php
do {  
?>
          <option value="<?php echo $row_inventory['idInventory']?>"<? if($_POST['invselect'][$x] == $row_inventory['idInventory']){ print " selected"; } ?>><?php echo $row_inventory['Description']?></option>
          <?php
} while ($row_inventory = mysql_fetch_assoc($inventory));
  $rows = mysql_num_rows($inventory);
  if($rows > 0) {
      mysql_data_seek($inventory, 0);
	  $row_inventory = mysql_fetch_assoc($inventory);
  }
?>
        </select>
      </div></td>
      <td class="genericText"><div align="center">
        <input name="CaseCost[<?=$x; ?>]" type="text" class="genericText" id="CaseCost" size="5" value="<?=$_POST['CaseCost'][$x]?>">
      </div></td>
      <td class="genericText"><div align="center">
        <input name="CaseCount[<?=$x; ?>]" type="text" class="genericText" id="CaseCount" value="<?=$_POST['CaseCount'][$x]?>" size="5">
      </div></td>
      <td class="genericText"><div align="center">
        <input name="WholePrice[<?=$x; ?>]" type="text" onBlur="doRetail(<?=$x?>);" class="genericText" value="<?=$_POST['WholePrice'][$x]?>" size="5" />
      </div></td>
      <td class="genericText"><div align="center">
        <input name="RetailPrice[<?=$x; ?>]" type="text" class="genericText" value="<?=$_POST['RetailPrice'][$x]?>"size="5" />
      </div></td>
      <td class="genericText"><div align="center">
        <input name="addToInv[<?= $x; ?>]" type="text" class="genericText" id="addToInv" value="<?=$_POST['addToInv'][$x]?>" size="5">
      </div></td>
      <td class="genericText"><div align="center"></div></td>
      <td class="genericText"><div align="center"></div></td>
    </tr>
<? } ?>
  </table>

The form fields have names like WholePrice[x] where x is dynamic (I have a button that when clicked, it reloads the page, adding another set of fields that the user can input information)

I'm using FireFox (will be what this software is built for) so I don't need to work around any other browsers)

The data that i will need to manipulate would be a number like "1.79", so i only need 2 decimal places.

This is what I am trying to get to work, but I must say I'm kind of lost...

Code:

function doRetail() {
  var controls  = document.forms.form1.elements,
      wholesale = controls.WholePrice.value;

  if(!/^\d+$/.test(wholesale) && ((wholesale = +wholesale) > 0)) {
    alert('The wholesale price must be a valid number.');
    return;
  }
  controls['RetailPrice' + index].value = controls['WholePrice' + index].value * 1.4;
}

I don't know if i forgot to change something specific to my file, but this doesnt do anything (that I can see anyways).

Once again, I thank you for your help!

Jason

**jscheuer1** · 01-17-2006, 05:50 AM

One problem with what you've posted is, there is no form whatsoever, let alone one named form1. In case that wasn't just an oversight on your part, to have a form in HTML requires more than just having form elements like 'input', etc. You must also layout the form using the form tag:

<form name="form1">
things like inputs and buttons go here
</form>