Click here to Skip to main content
15,888,968 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: Javascript and JQuery? Pin
Blikkies10-Sep-15 18:47
professionalBlikkies10-Sep-15 18:47 
AnswerRe: Javascript and JQuery? Pin
Member 1201497027-Sep-15 6:56
Member 1201497027-Sep-15 6:56 
AnswerRe: Javascript and JQuery? Pin
aarif moh shaikh1-Oct-15 0:32
professionalaarif moh shaikh1-Oct-15 0:32 
QuestionJavaScript runtime error: Unable to set property 'value' of undefined or null reference Pin
Rajesh_19808-Sep-15 10:00
Rajesh_19808-Sep-15 10:00 
AnswerRe: JavaScript runtime error: Unable to set property 'value' of undefined or null reference Pin
Richard Deeming14-Sep-15 3:41
mveRichard Deeming14-Sep-15 3:41 
QuestionAutomated Javascript Pin
Member 119664927-Sep-15 16:10
Member 119664927-Sep-15 16:10 
AnswerRe: Automated Javascript Pin
Peter Leow7-Sep-15 17:30
professionalPeter Leow7-Sep-15 17:30 
QuestionHow do I modify existing code to also hide/show controls under Justification for Request section? Pin
samflex4-Sep-15 7:33
samflex4-Sep-15 7:33 
Greetings again expert,

The way the current code works is that a user checks one of three checkboxes, the associated textbox is displayed.

If all three checkboxes are checked, all three textbox controls are displayed.

By default, upon page load, all three textboxes are hidden.

For instance, if a user checks Job Title / Classification, this control below is displayed:

PHP
<div style="float: left; margin-right: 10px; margin-left: 10px">
    <asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title / Classification" Style="margin-right: 0px; width: 200px; display: none;" /> 
</div>

If a user checks Pay Grade, then this is displayed:
PHP
 <div style="float: left; margin-right: 10px">
     <asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Grade" Style="margin-right: 0px; width: 200px; display: none;" /> 
</div>

If a user checks Class Specification, then this is displayed:
PHP
 <div style="float: left; margin-right: 10px">
     <asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class Specification" Style="margin-right: 0px; width: 200px; display: none;" />
</div>

If a user checks all three checkbox controls, all three textbox controls are displayed

This works great.

However, we need to improve on this.

On the JUSTIFICATION FOR REQUEST section, we also need to hide by default, all three rows.

For instance, if a user checks Job Title / Classification, we would like the textbox control above, as well as txtTiel textbox control to display as well.

As with above, if a user checks all three, we would like all three textbox controls, as well as all three controls under JUSTIFICATION FOR REQUEST section to be displayed.

I am having issues wrapping around making the changes to exsiting code.

Your assistance is greatly appreciated.


PHP
 <script type="text/javascript">
     function ShowHide(chk, txt) {
         //Get the Textbox based on selected checkbox
         ctrltxt = document.getElementById(txt);
         //Check if checkbox is checked or not
         if (chk.checked) {
             //Show the Textbox
             ctrltxt.style.display = 'block';
         }
         else {
             //Hide the textbox
             ctrltxt.style.display = 'none';
         }
     }
        </script>

        
<table style="border: 0; border-style: solid">
            <tr valign="top" style="background-color: #f5f7f7; font-size: large; white-space: nowrap;">
                <td style="font-size: large; font-weight: bold;">Request a Review of:</td>
                <td>
                    <asp:CheckBoxList ID="ckRequestReview" runat="server" CssClass="cb" Style="border-width: 0;" RepeatDirection="horizontal" RepeatColumns="4" RepeatLayout="Table">
                        <asp:ListItem onclick="ShowHide(this,'txtTitleChange');"> Job Title / Classification</asp:ListItem>
                        <asp:ListItem onclick="ShowHide(this,'txtPayGradeChange');">Pay Grade</asp:ListItem>
                        <asp:ListItem onclick="ShowHide(this,'txtClassSpecChange');">Class Specification</asp:ListItem>
                    </asp:CheckBoxList>
                </td>
            </tr>
        </table>
        <table style="border: 0; border-style: solid">
            <tr valign="top">
                <td valign="middle" style="font-size: large; font-weight: bold; border-top: thin solid; text-align: left; white-space: nowrap" class="style4">
                    <br />
                    <div class="input text" style="float: left;">
                        <span style="text-align: left; font-size: x-large; float: left;">Requested Change:</span>
                        <div style="float: left; margin-right: 10px; margin-left: 10px">
                            <asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title / Classification" Style="margin-right: 0px; width: 200px; display: none;" /> 
                        </div>
                        <div style="float: left; margin-right: 10px">
                            <asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Grade" Style="margin-right: 0px; width: 200px; display: none;" /> 
                        </div>
                        <div style="float: left; margin-right: 10px">
                            <asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class Specification" Style="margin-right: 0px; width: 200px; display: none;" />
                        </div>
                        <div style="clear: both"></div>
                    </div>
                    <br />
                    <br />
                    <br />
                </td>
            </tr>
            </table>
            <table>
              <tr>
                  <td>
                      <!-- this is the section that needs change -->

                      <span style="font-size: X-large; text-align: left;">JUSTIFICATION FOR REQUEST</span><br />
                      <div class="input textarea">
                      <table>
                        <tr>
                         <td style="font-size: large;" class="style22">
                          <asp:Label ID="txtTitle" runat="server" Text="Job Title / Classification" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtTitleComments" runat="server" placeholder="Title Change Justification" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
                         </tr>
                        </table>
                        <table>
                        <tr>
                         <td style="font-size: large;" class="style21">
                          <asp:Label ID="txtPayGrade" runat="server" Text="Pay Grade" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtPayComments" placeholder="Pay Grade Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
                         </tr>
                        </table>
                        <table>
                        <tr>
                         <td style="font-size: large;" class="style22">
                          <asp:Label ID="txtClassification" runat="server" Text="Class Specification" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtClassComments" placeholder="Class Specification Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
                         </tr>
                        </table>
                      </div>
                  </td>
              </tr>
        </table>

QuestionGet Axis interval Pin
NJdotnetdev3-Sep-15 4:05
NJdotnetdev3-Sep-15 4:05 
QuestionRe: Get Axis interval Pin
Richard MacCutchan3-Sep-15 5:38
mveRichard MacCutchan3-Sep-15 5:38 
AnswerRe: Get Axis interval Pin
NJdotnetdev3-Sep-15 5:53
NJdotnetdev3-Sep-15 5:53 
GeneralRe: Get Axis interval Pin
F-ES Sitecore3-Sep-15 6:06
professionalF-ES Sitecore3-Sep-15 6:06 
GeneralRe: Get Axis interval Pin
NJdotnetdev3-Sep-15 7:19
NJdotnetdev3-Sep-15 7:19 
QuestionExport html page with icons (font awesome) as image using javascript ? Pin
Mogli_001-Sep-15 20:03
Mogli_001-Sep-15 20:03 
AnswerMessage Closed Pin
10-Feb-22 5:12
Front-end.codes10-Feb-22 5:12 
Generalretreiving data from httpresponce Pin
kanjolia gopal31-Aug-15 5:20
kanjolia gopal31-Aug-15 5:20 
Questionbus ticket reservation system using javascript. Pin
Raymond Gyaang22-Aug-15 5:44
Raymond Gyaang22-Aug-15 5:44 
QuestionDetecting if a browser is in full screen mode by javascript ? Pin
Mogli_0018-Aug-15 18:56
Mogli_0018-Aug-15 18:56 
AnswerRe: Detecting if a browser is in full screen mode by javascript ? Pin
Graham Breach19-Aug-15 2:24
Graham Breach19-Aug-15 2:24 
GeneralRe: Detecting if a browser is in full screen mode by javascript ? Pin
Afzaal Ahmad Zeeshan19-Aug-15 2:32
professionalAfzaal Ahmad Zeeshan19-Aug-15 2:32 
GeneralRe: Detecting if a browser is in full screen mode by javascript ? Pin
Graham Breach19-Aug-15 4:35
Graham Breach19-Aug-15 4:35 
GeneralRe: Detecting if a browser is in full screen mode by javascript ? Pin
Afzaal Ahmad Zeeshan19-Aug-15 4:53
professionalAfzaal Ahmad Zeeshan19-Aug-15 4:53 
AnswerRe: Detecting if a browser is in full screen mode by javascript ? Pin
Afzaal Ahmad Zeeshan19-Aug-15 2:31
professionalAfzaal Ahmad Zeeshan19-Aug-15 2:31 
QuestionPrint current page Pin
cgreathouse17-Aug-15 6:39
cgreathouse17-Aug-15 6:39 
AnswerRe: Print current page Pin
Peter_in_278018-Aug-15 20:44
professionalPeter_in_278018-Aug-15 20:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.