显示和隐藏按钮的另一种方式

Question

The following codes works with no problem if I am running the file locally on my drive. Unfortunately, I need to upload this form to a software called MasterControl. It does not work. I was wondering if there is another way of coding that is universal to local as well as upload to a server for MasterControl.

The purpose of this code is - once you click on Yes button on the first level question then the next level questions will appear. If you click on No button on the first level and if the questions from the next level questions showing then it will clear all the selected buttons and hide the section of the second level questions.

Here is the codes:

HTML Code:

 <div id="divDeathOccurred" class="fieldRow">
        <div class="leftLabel labelWidth22">
            <label for="">A. Has a death occurred?</label>
        </div>
        <div class="leftField">
            <div class="formField34">
              <input id="rbDeathOccurred" name="rbDeathOccurred" 
      type="radio" class="radiobuttonfield" title="Death Occurred" 
      value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
              <input id="rbDeathOccurred" name="rbDeathOccurred" 
       type="radio" class="radiobuttonfield" title="Death Occurred" 
       value="No" onclick="javascript:USAYesNoCheckDO();" />No
            </div>
        </div>
    <p>&nbsp;</p>
        <div id="USADOYesNo" style="display:none">
            <ol type="1" class="indentList">
                <li>Is there a reasonable possibility that a device failure
             or malfunction was a direct or indirect factor in the death? 
                    <br>
                    <input id="rbDOYesNo" name="rbDOYesNo" type="radio" 
            class="USDO radiobuttonfield" title="Yes Reportable" value="Yes" 
            onclick="javascript:USDeviceFailure30Days();"  />
                 <label for="rbDOYesNo" class="rptColor">Yes -
                  reportable</label>  
                    <input id="rbDOYesNo" name="rbDOYesNo" type="radio" 
                 class="USDO1 radiobuttonfield" title="No" value="No" 
                onclick="javascript:USDeviceFailure30Days();" />No - No 
               Report   
                    <div id="calc" class="indentListCalc"> 
                     <input id="dt30Days3" type="text" class="textfieldCalc 
                labelWidth25" alt="Device Malfunction" />
                    </div>
                      <p></p>                                                                  
                   </li>
                <li>Is there a reasonable possiblity that a device design 
                defect was direct or indirect factor in the death?
                    <br>
                    <input id="rbDOYesNo1" name="rbDOYesNo1" type="radio" 
           class="USDO2 radiobuttonfield" title="Yes Reportable" value="Yes"
           onclick="javascript:USDeviceDesign30Days();"/>
                    <label for="rbDOYesNo1" class="rptColor">Yes -
             Reportable</label>                     
                     <input id="rbDOYesNo1" name="rbDOYesNo1" type="radio" 
                   class="USDO3 radiobuttonfield" title="No" value="No"
               onclick="javascript:USDeviceDesign30Days();" />No - No Report 
                    <div id="calc1" class="indentListCalc"> 
                     <input id="dt30Days1" type="text" class="textfieldCalc 
                  labelWidth25" alt="Device Design" />
                    </div>
                    <p></p>
                   </li>
                 <li>Is there a reasonable possiblity that the device 
                  labeling was direct or indirect factor in the death?
                     <br>
                    <input id="rbDOYesNo2" name="rbDOYesNo2" type="radio" 
                 class="USDO4 radiobuttonfield" title="Yes Reportable"  
                value="Yes" onclick="javascript:USDeviceLabeling30Days();"/>
                 <label for="rbDOYesNo2" class="rptColor">Yes - 
                  Reportable</label>                          
                      <input id="rbDOYesNo2" name="rbDOYesNo2" type="radio" 
                class="USDO5 radiobuttonfield" title="No" value="No" 
             onclick="javascript:USDeviceLabeling30Days();"/>No - No Report 
                     <div id="calc2" class="indentListCalc"> 
                     <input id="dt30Days2" type="text" class="textfieldCalc
                  labelWidth25" alt="Device Labeling" />
                      <p></p>
                    </div>
                </li> 
            </ol>
        </div>
     </div> <!-- final section Death Occurred end --> 

Javascript Code:

 function USAYesNoCheckDO() {
    if (document.getElementById('rbDeathOccurred').checked) {

       document.getElementById('USADOYesNo').style.display = 'block';

     } else {

      document.getElementById('USADOYesNo').style.display = 'none';
      document.getElementsByClassName('USDO')[0].checked = false;
      document.getElementsByClassName('USDO1')[0].checked = false;
      document.getElementById('calc').style.display = 'none';
      document.getElementsByClassName('USDO2')[0].checked = false;
      document.getElementsByClassName('USDO3')[0].checked = false;
      document.getElementById('calc1').style.display = 'none';
      document.getElementsByClassName('USDO4')[0].checked = false;
      document.getElementsByClassName('USDO5')[0].checked = false;
      document.getElementById('calc2').style.display = 'none';
     }
   }

I am still learning about all of this HTML, Javascript, and I am just getting into JQuery.

If you need me to put these codes in jsfiddle, please let me know.

Thank you so much,

IreneS

Update:

I forgot to add that the codes work on the server when you select the buttons and the show and hide - the one thing does not work is the clearing the selected buttons.

Thank you again.

Update 2:

After many hours of research and trying to learn Jquery, hoping that it will give me another way to get this issue resolved and get it to work on the server, unfortunately it did not. The reason I was trying Jquery, because I was looking at the other forms that were on the MasterControl server, and they were coded with Jquery. Unfortunately, being a beginner in Jquery, I am not able to get it to work on both sides - the local drive and the server. Please can someone check it and see what I am missing or doing wrong.

function getChecked(radioGroupName, index)
  {
    var oRadioList = document.getElementsByName(radioGroupName);
    return oRadioList[index].checked;
  }

function setChecked(radioGroupName, index, state)
 {
    var oRadioList = document.getElementsByName(radioGroupName);
    oRadioList[index].checked = state;
 }

function USAYesNoCheckDO()
 {
    if(getChecked("rbDeathOccured",0) == true)
    {
        $('#USADOYesNo').slideDown(1000);   
    }
    else
    {
        $('#USADOYesNo').slideUp(1000); 

        setChecked("rbDOYesNo",0,false);
        setChecked("rbDOYesNo",1,false);

        setChecked("rbDOYesNo1",0,false);
        setChecked("rbDOYesNo1",1,false);

        setChecked("rbDOYesNo2",0,false);
        setChecked("rbDOYesNo2",1,false);
    }
 }

Or if you have any idea how to get this issue fixed. As I mentioned before the buttons work and the show and hide of the questions work, the issue is when I want to reset and set it back to the original status - blank.

Thank you again and appreciate any help.

IreneS

Update 3:

Please anybody have any thoughts/ideas on how to fix this issue.

I really appreciate any help.

Thank you,

IreneS

Update 4:

Just incase someone have the same issue as I am and need a solution, I finally found a website after all this time of searching that gave me the answer and it works! Yeh! I just customized the coding to my needs and it works locally and on the server.

http://www.electrictoolbox.com/javascript-clear-form/

IreneS.

Answer 1

You use the same id attribute for multiple elements. id should be unique on the page, only name can be the same to group multiple input elements of the same type. I don't know if this is the main problem but it is a start.