Form with calculation only works in Chrome

Hi,

I was so happy when I got the calculate function works in Chrome, but when I tested it in firefox and IE8 it does not work :? .
In IE8 the form loaded fine, but when "add"/"minus" button is clicked, the browser tell me "error on page".

The form is meant to do a simple "addition" and "subtraction" before updating to the database.

I am not an experience programmer, so if someone can enlighten me and show me what I did wrong in my form code below, I'll be very thankful.


This is the code in Form HTML:

<?php
$script = "
window.addEvent('domready', function() {
  
  function addcalculate() {
    var totalhours = +$('txt_totalhours').value;
	var addhours = +$('txt_addhours').value;
        var add_total = (totalhours+addhours);
        $(txt_totalhours).value = add_total;
  }
  
  function deductcalculate() {
    var totalhours = +$('txt_totalhours').value;
	var deducthours = +$('txt_deducthours').value;
	var deduct_total = (totalhours-deducthours);
	$(txt_totalhours).value = deduct_total;
  }
  
  $('add').addEvent('click', addcalculate );
  $('deduct').addEvent('click', deductcalculate );

});
";

$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);

?>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Update Usage Hours</h1>
  </div>
  <div class="cfclear"> </div>
</div>


<div class="form_item">
  <div class="form_element cf_datetimepicker">
    <label class="cf_label" style="width: 150px;">Date:</label>
    <input class="cf_datetime required" title="" size="30" id="date_updatedate" name="date_updatedate" type="text" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Date: :: Last Update Date</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Client's Username:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="txt_username" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Client's Username: :: Enter Client's Username</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Add Hours:</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="txt_addhours" name="txt_addhours" type="text" />
      <input type="button" value="Add" id='add'>  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Deduct Hours:</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="txt_deducthours" name="txt_deducthours" type="text" />
  <input type="button" value="Minus" id='deduct'>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Hours:</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="txt_totalhours" name="txt_totalhours" type="text" readonly="readonly" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Total Hours: :: Current client's available total hours</div>
  </div>
  <div class="cfclear"> </div>
</div>

<input value="" id="hidden_6" name="hidden_totalhours" type="hidden" />

<div class="form_item">
  <div class="form_element cf_button">
    <input type="button" value="CANCEL" name="ClickBack" onclick=(history.back())>
    <input value="UPDATE" name="button_7" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Kind Regards,
Darwin

Hi Darwin,

Looks like Chrome is being kind to you. I think that

$(txt_totalhours).value = add_total; 

needs quotes

$('txt_totalhours').value = add_total; 

This is the first error that shows up in FireBug, there maybe others :-( . . . or not :-)

You also ahve JQuery running as well as MooTools and this can cause JavaScript problems unless you set up JQuery carefully.

Bob

THANKS BOB, that solved the problem 😀 .

Oh, I am trying to leave a comment for Chronoform at Joomla.org extension page, but it seems that Chronoform is no longer listed there.

I really think you guys deserve the highest merit for all your effort in helping people like me.

I'll be purchasing a license soon.

Kind Regards,
Darwin

Hi Darwin,

Thanks. It seems that ChronoForms and the new JED listing criteria don't quite match up at the moment :-(

Bob