Forums

Hello!
I have a problem with a javascript that works fine outside Chronoform but inside it doesen´t work in FF and Chrome. It works fine in IE8 and Opera

Can anybody please look at the code and maybe see something that I missed
Tanks!
/Fredrik

<script type='text/javascript'>
//<![CDATA[
function startCalc(){
 interval = setInterval("calc()",1);
}
function calc(){
var item1price = 100;

 one = document.ChronoContact_flyttekspressen.text_4.value;

 
 if (ChronoContact_flyttekspressen.Persienner.checked)
{
   var witem1 = document.ChronoContact_flyttekspressen.Persienner.value = item1price;
 } 
else 
{
   var witem1 = document.ChronoContact_flyttekspressen.Persienner.value = 0;
}


document.ChronoContact_flyttekspressen.text_5.value = (one * 100) / 2 + (witem1) / 2;


}
function stopCalc(){
 clearInterval(interval);
}
//]]>
</script>

The form looks like this

     <form name="ChronoContact_flyttekspressen" id="ChronoContact_flyttekspressen" method="post" action="http://projekt.forwarddesign.se/index.php?option=com_chronocontact&task=send&chronoformname=flyttekspressen" >
		
				<div class="form_item">

 <div class="form_element cf_heading">
 <h1 class="cf_text">Räkna ut din offert online!</h1>
</div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Antal kvm</label>
<input type=text id=text_4 name=text_4  value="" onfocus="startCalc();" onblur="stopCalc();">
</div>  
  <div class="cfclear"> </div>

</div>
 
<div class="form_item">
<div class="form_element cf_checkbox">
<label class="cf_label" style="width: 150px;">Persienner</label>
<input type=checkbox name=Persienner onfocus="startCalc();" onblur="stopCalc();"> 
</div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">
Summa inkl. 50% skatteavdrag</label><input type=text id=text_5 name=text_5>

</div>
  <div class="cfclear"> </div>
</div>

Hi Fredrik,

I think the problem is that the attribute values are not quoted - but I'm not certain about that. Here's a simplified version that works OK in FF & IE8.

<div class="form_item">

<div class="form_element cf_heading">
<h1 class="cf_text">Räkna ut din offert online!</h1>
</div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Antal kvm</label>
<input type='text' id='text_4' name='text_4' value="" />
</div> 
  <div class="cfclear"> </div>

</div>

<div class="form_item">
<div class="form_element cf_checkbox">
<label class="cf_label" style="width: 150px;">Persienner</label>
<input type='checkbox' name='Persienner' id='Persienner' />
</div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">
Summa inkl. 50% skatteavdrag</label><input type='text' id='text_5' name='text_5' value='' />

</div>
  <div class="cfclear"> </div>
</div>

window.addEvent('load', function() {
  var calc = function() {
    var item1price = 100;
    if ( $('Persienner').checked) {
      $('Persienner').value = item1price;
    } else {
      $('Persienner').value = 0;
    }
    $('text_5').value = ( 
      parseInt($('text_4').value * 100) 
        + parseInt($('Persienner').value) )/ 2;
  };
  $('Persienner').addEvent('change', calc);
  $('text_4').addEvent('change', calc);
});

Thank you so much! You really made my day! I´ve been struggeling a lot with this problem since my knowledge in Javascript is too small.

I just have one question left though...
Is it possible to show in the e-mail weather the checkbox is checked or not with a "yes" and "no"? Now I get the value, a sum, for example 100, when i write {Persienner} in the e-mail template

I hope you understand my question and perhaps help me out this time too!
Tanks
/Fredrik

Hi Fredrik,

You are getting 100 because the JavaScript is setting the value of the input as part of the calculation (I assumed that was deliberate).

You can get a 'Yes' value back from a check-box but not a 'No' value - if the check-box is empty then nothing is returned.

A radio button pair will give you Yes & No values, and it's possible to add some PHP to the Email Template to look for the check-box value and set it to No if nothing is found. Neither solution is ideal.

A neater solution is to add a hidden field to the form html and set the value of that to 'Yes' or 'No' for use in the email. Add

<input type='hidden' name='pers_yn' id=pers_yn' value='No' />

to the form HTML and use this amended JavaScript

window.addEvent('load', function() {
  var calc = function() {
    var item1price = 100;
    if ( $('Persienner').checked) {
      $('Persienner').value = item1price;
      $'('pers_yn').value = 'Yes';
    } else {
      $('Persienner').value = 0;
      $'('pers_yn').value = 'No';
    }
    $('text_5').value = (
      parseInt($('text_4').value * 100)
        + parseInt($('Persienner').value) )/ 2;
  };
  $('Persienner').addEvent('change', calc);
  $('text_4').addEvent('change', calc);
});

and use {pers_yn} in the email template.

Note: not tested and may need de-bugging!

Bob