www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Block Table Isn't Always Working

  1. #1
    Join Date
    Dec 2010
    Posts
    11

    resolved [RESOLVED] Block Table Isn't Always Working

    I have about ten tables that I want to show/hide depending on various Radio button clicks. When the page first opens, all tables are hidden. When you click the first radio after opening it shows the correct table, however if you click on the second radio choice and then click the first choice nothing happens. If the user selects the wrong choice when they first enter the page, I want them to be able to select the correct choice without having to close and re-open.

    What I find odd, is if I click back and forth between the other radio buttons everything works correctly. It only fails on the first radio button. I have multiple pages with the same format of code and this happens on every page.

    I am new to JavaScript and think I am just missing something. Any help would be greatly appreciated.

    Code:
    function CustPage(option){
      document.getElementById('custtype').value = option.value;
      if(document.getElementById('custtype').value == "Cust Add Sell"){
        document.getElementById('CustAdd').style.display="block";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="none";}
    	if(document.getElementById('custtype').value == "Cust Change Sell"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="block";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="none";}
    	if(document.getElementById('custtype').value == "Cust Remove"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="block";
        document.getElementById('CustPost').style.display="none";}
      if(document.getElementById('custtype').value == "Cust Postings"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="block";}
    }
    HTML Code:
    <div id="page3" style="display:none" class="entryscreen">
    <p align="center"><img height="50" src="../../show/1146448/LogoHoriz4Color_small.png" width="270"></p>
    <p align="center"><span id="pageprev" class="button" onclick="nextPage(this)" style="font-size:24px;font-weight:bold;color:red;background-color:#99CCFF;border: solid thin black;">Previous</span><span style="font-size:29px; font-weight:bold; margin-left:70px; margin-right:70px">Services Master Data - Customer</span></p>
    <P>Customer Request Type<br/>
        <input type="radio" name="custtype" id="custtype1" onclick="CustPage(this)" value="Cust Add Sell" > Add Sell-to
        <input type="radio" name="custtype" id="custtype2" onclick="CustPage(this)" value="Cust Change Sell" > Change Sell-to
        <input type="radio" name="custtype" id="custtype3" onclick="CustPage(this)" value="Cust Remove" > Remove Customer
        <input type="radio" name="custtype" id="custtype4" onclick="CustPage(this)" value="Cust Postings" > VWR Postings
    </p>
    <table id="CustAdd" style="display:block">
    <tr><td>Customer Location</td>
    <td><input  type="text" name="varchar014" id="CustAddLoc" size="40" maxlength="200" value="" onChange="validateRequired(this, 'errcustaddloc')"></td>
    <td id="errcustaddloc">Required</td></tr>
    <tr><td>Customer Sell</td>
    <td><input  type="text" name="double005" id="CustAddSell" size="8" value="" onChange="validateSellto(this,'errcustaddsell',true)"></td>
    <td id="errcustaddsell">Required - Must have 7 digits</td></tr>
    </table>
    <table id="CustChange" style="display:block">
    <tr><td>Customer Location</td>
    <td><input  type="text" name="varchar015" id="CustCHLoc" size="40" maxlength="200" value="" onChange="validateRequired(this, 'errcustchloc')"></td>
    <td id="errcustchloc">Required</td></tr>
    <tr><td>Customer Sell</td>
    <td><input  type="text" name="double006" id="CustCHSell" size="8" value="" onChange="validateSellto(this,'errcustchsell',true)"></td>
    <td id="errcustchsell">Required - Must have 7 digits</td></tr>
    </table>
    <table id="CustRemove" style="display:block">
    <tr><font color="red">This will delete a Customer Location. This request will be submitted to HRIS and will be reflected in the following month reports. This will automatically remove all Engagement and Associate ties to this Customer Location.</font></tr>
    <tr><td>Customer Location</td>
    <td><input  type="text" name="varchar016" id="CustDel" size="40" maxlength="200" value="" onChange="validateRequired(this, 'errcustdel')"></td>
    <td id="errcustdel">Required</td></tr>
    </table>
    <table id="CustPost" style="display:block">
    <tr><font color="red">(Example: EH&S Safety Posters)</font></tr>
    <tr><td>Customer Location</td>
    <td><input type="text" name="varchar017" id="CustPostLoc" size="40" maxlength="200" value="" onChange="validateRequired(this, 'errcustpostloc')"></td>
    <td id="errcustpostloc">Required</td></tr>
    <td><select  id="CustPost" name="text013" onChange="validateRequired(this, 'errcustpost')">
        <option value="">&nbsp;
        <option value="Yes" >Yes
        <option value="No" >No
    </select></td><td id="errcustpost">Required</td></tr>
    </table>
    <p align="center"><input type="submit" name="submit" value="Submit"></p>
    </div>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    There is no custtype id, only name
    Code:
    document.getElementById('custtype').value

  3. #3
    Join Date
    Dec 2010
    Posts
    11
    Thanks for the reply Fang...

    So how should the Name and ID be listed for the radio buttons???

  4. #4
    Join Date
    Dec 2010
    Posts
    11
    I use the below to go from page to page and it works without a problem. I followed the same format for the other radio buttons that aren't working???
    Code:
    if(document.getElementById('type').value == "Associate"){
            document.getElementById('page1').style.display="none";
            document.getElementById('page2').style.display="";
            document.getElementById('page3').style.display="none";
            document.getElementById('page4').style.display="none";
            document.getElementById('page5').style.display="none";
            document.getElementById('AssocAdd').style.display="none";
            document.getElementById('AssocRemove').style.display="none";
            document.getElementById('AssocEdit1').style.display="none";
            document.getElementById('AssocEdit2').style.display="none";}
    HTML Code:
    <p>Request Type<br/>
        <input type="radio" name="type" id="type1" onclick="setRadio(this)" value="Associate" >Associate
        <input type="radio" name="type" id="type2" onclick="setRadio(this)" value="Customer" >Customer
        <input type="radio" name="type" id="type3" onclick="setRadio(this)" value="Engagements" >Engagements
        <input type="radio" name="type" id="type4" onclick="setRadio(this)" value="Training" >Training
    </p>

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Same error; there is no 'type' id, only a name.

  6. #6
    Join Date
    Dec 2010
    Posts
    11
    Fang,

    I realize that you are saying this shouldn't work, but the second post of code and html does work without a problem...

    What is the correct format for the radio buttons and code to work???

    I am self taught, so I don't know what the correct format should be...just trying to understand why the same format (incorrect) works for one set of radio buttons but the not others????

  7. #7
    Join Date
    Dec 2010
    Posts
    11

    Resolved

    I found figured out code that will work...

    Code:
    function CustPage(option){
      chosen = ""
      len = document.Master.custtype.length
      for (i = 0; i <len; i++){
      if (document.Master.custtype[i].checked) {
        chosen = document.Master.custtype[i].value}}
      if(chosen == "Cust Add Sell"){
        document.getElementById('CustAdd').style.display="block";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="none";}
    	if(chosen == "Cust Change Sell"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="block";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="none";}
    	if(chosen == "Cust Remove"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="block";
        document.getElementById('CustPost').style.display="none";}
      if(chosen == "Cust Postings"){
        document.getElementById('CustAdd').style.display="none";
        document.getElementById('CustChange').style.display="none";
        document.getElementById('CustRemove').style.display="none";
        document.getElementById('CustPost').style.display="block";}
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles