Is it possible to validate 2 checkboxes?

I try to validate some code and everything works except the check box validation.
HTML

<table border="0">
<tbody>
<tr>
<td><label style="width: 150px;">Företag</label></td>
<td><input type="text" name="company" id="text_5" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><span>Kontaktperson</span><br /></td>
<td><br /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Förnamn</label></td>
<td><input type="text" name="surname" id="text_6" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Efternamn</label></td>
<td><input type="text" name="lastname" id="text_4" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Gatuadress</label></td>
<td><input type="text" name="street" id="text_7" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Ort</label></td>
<td><input type="text" name="city" id="text_8" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Postnr</label></td>
<td><input type="text" name="zipcode" id="text_9" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">Tele</label></td>
<td><input type="text" name="phone" id="text_12" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td><label style="width: 150px;">E-post</label></td>
<td><input type="text" name="mail" id="text_11" size="30" maxlength="150" /></td>
<td></td>
</tr>
<tr>
<td>CPU:</td>
<td><select onchange="addit()" id="type" name="type" style="width: 230px; font-size: 10px;"><option value="basic">Basic</option></td>
<td><input style="border:none; font-size:13pt;" id="amount" name="typepris" type="text" /></td>
</tr>
<tr>
<td>RAM:</td>
<td><select onchange="addit()" id="ram" name="ram" style="width: 230px; font-size: 10px;"><option value="1 GB">1 GB</option><option value="2 GB">2 GB</option><option value="3 GB">3 GB</option><option value="4 GB">4 GB</option></select></td>
<td><input style="border:none; font-size:13pt;" id="amountram" name="rampris" type="text" /></td>
</tr>
<tr>
<td>HDD:</td>
<td><select onchange="addit()" id="hdd" name="hdd" style="width: 230px; font-size: 10px;"><option value="2x 160GB SATA diskar i raid1">2x 160GB SATA diskar i raid1</option><option value="2x 250GB SATA diskar i raid-1">2x 250GB SATA diskar i raid-1</option><option value="2 x 500GB SATA diskar i raid-1">2 x 500GB SATA diskar i raid-1</option></select></td>
<td><input style="border:none; font-size:13pt;" id="amounthdd" name="hddpris" type="text" /></td>
</tr>
<tr>
<td>
<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label">Tilläggstjänster</label></td><td>
    <div class="float_left">
      <input value="on" title="" class="radio" id="check00" name="check00" type="checkbox" />
      <label for="check00" class="check_label">Managed hosting</label>
      
    </div>
    
  </div></td>
<td><input style="border:none; font-size:13pt;" id="amountmanaged" name="managedpris" type="text" /></td></tr>
<tr>
<td>
<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 100px;"></label></td><td>
    <div class="float_left">
      <input value="on" title="" class="radio" id="check01" name="check01" type="checkbox" />
      <label for="check01" class="check_label">Office hosting</label>
      
    </div>
    
  </div></td>
<td><input style="border:none; font-size:13pt;" id="amountofficemanaged" name="officemanagedpris" type="text" /></td></tr>
<tr>
<td><label style="width: 150px;">Ev rabatt</label></td>
<td></td>
<td><input type="text" name="prisrabatt" id="text_6"/></td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td><input name="formTotal" type="text" /></td>
</tr>
<tr>
<td><input onclick="showTotal(this.form, 'formTotal'); return validate(check00); return validate(check01);" value="Show total" type="button" /></td>
<td></td>
<td><br /></td>
</tr>
<tr>
<td><input value="Skapa offert" name="submit" type="submit" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Javascript

function addit(){ 
    if(document.getElementById("type").value=="basic") 
    { 
        document.getElementById("amount").value="895" 
    } 
    if(document.getElementById("type").value=="standard") 
    { 
        document.getElementById("amount").value="1295" 
    } 
    if(document.getElementById("type").value=="premium") 
    { 
        document.getElementById("amount").value="1795.00" 
    } 
if(document.getElementById("ram").value=="1 GB") 
    {
        document.getElementById("amountram").value="50"   
    }
    if(document.getElementById("ram").value=="2 GB") 
    { 
        document.getElementById("amountram").value="100" 
    } 
    if(document.getElementById("ram").value=="3 GB") 
    { 
        document.getElementById("amountram").value="150.00" 
    }
    if(document.getElementById("ram").value=="4 GB") 
    { 
        document.getElementById("amountram").value="200.00" 
    }
if(document.getElementById("hdd").value=="2x 160GB SATA diskar i raid1") 
    { 
        document.getElementById("amounthdd").value="0" 
    } 
    if(document.getElementById("hdd").value=="2x 250GB SATA diskar i raid-1") 
    { 
        document.getElementById("amounthdd").value="600" 
    } 
    if(document.getElementById("hdd").value=="2 x 500GB SATA diskar i raid-1") 
    { 
        document.getElementById("amounthdd").value="700.00" 
    } 
}
function validate(check00){
  if (check00.checked == 1)
    { 
        document.getElementById("amountmanaged").value="1295.00" 
    }
}
function validate(check01){
  if (check01.checked == 1)
    { 
        document.getElementById("amountofficemanaged").value="8995.00" 
    }
}
function showTotal(form, totalEl)
{
var el, els = form.elements;
var sum = 0;

for (var i=0, num=els.length; i<num; ++i){
el = els[i];

if ('text' == el.type && /pris/.test(el.name)){
sum += +el.value;
}
form.elements[totalEl].value = sum;
}
}

Can someone please tell me how to set up this code correctly? It works fine with just one checkbox, but with 2 it always take the last value. How sholud i set this up?

function validate(check00){
if (check00.checked == 1)
{
document.getElementById("amountmanaged").value="1295.00"
}
}
function validate(check01){
if (check01.checked == 1)
{
document.getElementById("amountofficemanaged").value="8995.00"
}
}

Thanks! /Johan

Hi jowed,

As far as I an see this isn't a ChronoForms question - it's a JavaScript one; and it's not about validation, it's about calculation.

I'd guess that the problems is in this code

onclick="showTotal(this.form, 'formTotal'); return validate(check00); return validate(check01);"

The command will end after the first return so the second one is never executed.

Bob

Hi,
I might add to Bob's analysis, that you (re)define the validate function twice. I assume you intended to call one of the functions for one checkbox, and the other for the other one. But your current code is not the way to do this.

Personally, I'd just use the one function, and test the supplied argument to determine which checkbox to work with..

Currently using my old trusted TyTN II, so any deeper analysis will have to wait until I get back home.

/Fredrik

Hi,
I've had time to have a better look at the form, and indeed you replace the first validate function with the latter. Further, the parameter name in the function becomes 'check01', which is what you then use inside the function. Remember, locally defined variables always take precedence to globally defined ones when they share names. That means that the function will check the 'checked' property of whatever object or reference you pass it, and test that, rather than the intended 'hardcoded' check01 checkbox. So, whenever you check either box, the code you've designed to act on check01 will be called, and test the status of the 'current' checkbox - leading to the behaviour you've described..

You would probably also be better off triggering the checkbox code as either checkbox is ticked/cleared, as opposed to being run _after_ your showTotals() function has been run..

Also, I've noticed that your form html code is not properly aligned, with mis-matching <div>, <tr>, and <td> elements and their close-tags. In a worst case, this could cause your browser to add the </form> tag early as it tries to make sense of your form (I've yet to check for this issue though).

Soo, down to the business of fixing that code..

function updateCheckboxes()
{
  var managed = document.getElementById("amountmanaged");
  var office = document.getElementById("amountofficemanaged");
  if (document.getElementById("check00").checked)
  {
    managed.value = "1295.00";
    office.value = "";
  } else if (document.getElementById("check01").checked)
  {
    managed.value = "";
    office.value = "8995.00";
  } else {
    managed.value = office.value = "";
  }
}

Next you'll just have to decide how to "hook" or call the updateCheckboxes() function in your form.

/Fredrik