Allow only one checkbox selected. 1 checkbox each in two independent forms, all on one page

Question

I have a HTTP interface page that requires the user to upload various independent files. For this I have created multiple tables that each have its own form.

In two of the tables I need one checkbox each that allows the user to select it which then requires that the file is installed on system startup.

Both tables are for uploading system firmware, one table for primary firmware, and the other for backup firmware.

The system will crash if both firmwares are being uploaded, hence separate forms.

Because of this crashing issue, for the two checkboxes it needs to be: One selected, or the other selected, or neither selected.

Here is a sample html code:

<body>

<div id="container"> 
 <table width="1000" border="0" cellpadding="1" class="uploadBox">
   <tr>
     <td width="460" rowspan="2">
      <form action="fileupload.html" method="post" enctype="multipart/form-data">
       <b>Update Primary System Firmware</b>
        <p style="margin-bottom: 2px"> <b>File: </b>
          <input type="file" name="firmwaremain" size="30" />
          <input type="submit" value="Upload" />
        </p>


    </td>
    <td width="210" height="23">Current File Name:</td>
    <td width="117">Current File Size:</td>
    <td width="102">File Upload Date:</td>
    <td width="93">Install on Start</td>
   </tr>
   <tr>
    <td>~curFirmName~</td>
    <td width="117">~curFirmSize~</td>
    <td width="102">~curFirmDate~</td>
    <td width="93"><input type="checkbox" name="firmPrim" id="firmPrim" /></td>
   </tr>
 </table>
 </form>

 <table width="1000" border="0" cellpadding="1">
   <tr>
    <td width="460" rowspan="2">
     <form action="fileupload.html" method="post" enctype="multipart/form-data">
      <b>Update Backup System Firmware</b>
        <p style="margin-bottom: 2px"><b>File: </b>
          <input type="file" name="firmwarebackup" size="30" /> 
          <input type="submit" value="Upload" />
        </p>

   </td>
   <td width="210" height="23">Current File Name:</td>
   <td width="117">Current File Size:</td>
   <td width="102">File Upload Date:</td>
   <td width="93">Install on Start</td>
  </tr>
  <tr>
   <td>~curBackName~</td>
   <td width="117">~curBackSize~</td>
   <td width="102">~curBackDate~</td>
   <td width="93"><input type="checkbox" name="firmBackup" id="firmBackup" /></td>
 </table>
 </form>
</div>

As you can see, they checkboxes are in two independent forms, so it has been difficult for me to run a JavaScript code, since (I think) it calls for the checkboxes to be in one form.

Also I cant use radio buttons because they are in different forms, plus there has to be an option for neither to be selected.

Is there a way to validate the whole page and check all forms so that only one check box can be selected on the page?

Thanks!

Regards, Josh

Answer 1

Add a click handler to both of the checkboxes that unchecks the checkbox in the other form if the clicked checkbox is checked:

var primCheck = document.forms[0].firmPrim;
var backCheck = document.forms[1].firmBackup;
primCheck.onclick = checkClick;
backCheck.onclick = checkClick;

function checkClick(e) {
    var otherCheckbox = this === primCheck ? backCheck : primCheck;
    if (this.checked) {
        otherCheckbox.checked = false;
    }
}

Working Demo: jsfiddle.net/QM6sy/1/

Allow only one checkbox selected. 1 checkbox each in two independent forms, all on one page

Question

1 answers

solution1
3 ACCPTED 2012-10-23 00:37:13

Allow only one checkbox selected. 1 checkbox each in two independent forms, all on one page

Question

1 answers

solution1 3 ACCPTED 2012-10-23 00:37:13

solution1
3 ACCPTED 2012-10-23 00:37:13