none
How to display text when a SharePoint custom new form field which is a checkbox is selected (true) RRS feed

  • Question

  • For some reason I'm having a brain dead issue here,  I just can not remember how to show some text items when a sps 2013 custom form field is  selected it is a checkbox.

    <tr>
     <td width="190px" valign="top" class="ms-formlabel">                              
    <H3 class="ms-standardheader">
    <nobr>CLE Eligible</nobr>
    </H3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="New" FieldName="CLE_x0020_Eligible" __designer:bind="{ddwrt:DataBind('i',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@CLE_x0020_Eligible')}"/>
    <SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="CLE_x0020_Eligible" ControlMode="New"/>
    </td>
    </tr>

    I want to be able to if this field  is true then show  some text under the text box

    message text for example:
    These offices are eligible for CLE
    Dallas
    SF
    Los Angeles
    NY NY

    Seems simple enough but I'm having a brain fart on the  code  XSL or javascript needed to complete this action...

    thanks for the assistance...

    Friday, April 22, 2016 7:25 PM

Answers

  • Hi,

    We can use the following code to achieve your requirement. Add the code below into a content editor web part.

    <script src="http://code.jquery.com/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
    	$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find("input").click(function(){
    		if(this.checked){
    			$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").show();
    		}else{
    			$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
    		}
    	});
    });
    </script>

    @Rajesh, we can't use $("input[Title='" + columnn + "']"); to get custom form field object, the field can't contain the "Title" property.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:47 PM
    Tuesday, April 26, 2016 6:45 AM
    Moderator
  • Thank you for the change of the code.. well now they (Client) want it to  show /hide a text field called "Location". Well I got it to work with the  Reson tet field. So it should work with the new   requirement as it is jsut aanother ccolumn

    ok, I think I got it now, thanks for the help, Dennis and Rajesh, but the Reason box is there  at load, I need it hidden, from the start, and then once CLE is licked or Checked then it shows

    <script src="http://code.jquery.com/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

        $("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
        $("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find("input").click(function(){
            if (this.checked)

            {

                //alert('inside show for offered');

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').show();

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').show();

            }

            else

            {

                //alert('inside hide for offered');

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

            }




        });

        

    });

    </script>



    • Edited by FC_SPAdmin Tuesday, April 26, 2016 5:48 PM
    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:46 PM
    Tuesday, April 26, 2016 5:03 PM
  • Hi,

    The default new form contain the Title attribute, but the custom new form can't contain this attribute.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:46 PM
    Wednesday, April 27, 2016 1:17 AM
    Moderator

All replies

  • Hi,

    You can do this using the client side code, you can add simple Javascript on your form that will check the value of your check box field and based on this value you can show hide your text box section.

    Check this thread to get the code.

    https://social.msdn.microsoft.com/Forums/office/en-US/cdcb5d05-5ed0-4763-bd3d-7f62f894e3c1/enabling-sharepoint-controls-on-newformapsx?forum=sharepointgeneralprevious


    KRISHANA KUMAR

    SharePoint Architect

    Mosstechnet-kk.com

     

    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Friday, April 22, 2016 7:50 PM
  • Here you go, add the below script to your new form in a script editor webpart. Change ShowDescription method 1st parameter to your column title.

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    var showDescription = function (columnn, desc) {  
    	var columnObj = $("input[Title='" + columnn + "']");
    	columnObj.closest("td").append(desc);
    	columnObj.bind('click',function() { 
      if(columnObj.is(':checked')) {          
       $('#chkDesc').show();
      }
      else {
       $('#chkDesc').hide();
      }
      });   
     };
    
     $(document).ready(function() {
    	var descHtml = "<div id='chkDesc' style='display:none;'><p>These offices are eligible for CLE <ul><li>Dallas</li><li>SF</li><li>Los Angeles</li><li>NY NY</li></ul></p></div>"
    	showDescription('CLE Check',descHtml);
     });
     </script>


    ---
    Rajesh
    rjesh.com| Follow @rjesh

    Friday, April 22, 2016 8:12 PM
  •  I dont have a text box selection, I want to display Text. if the checkbox is selected.

     plus I just tried the code provided:

    <script src="http://server/JQueryLib/jquery-1.6.1.min.js"></script>
    <script>
    $(document).ready(function(){
    var hidden = true;
    $('input[title="FirstName"]').parent().parent().parent().hide();
    $('input[title="ShowFirstName"]').change(function(){

    if(hidden )
    {
    $('input[title="FirstName"]').parent().parent().parent().show();
    hidden = false;
    }
    else
    {
    $('input[title="FirstName"]').parent().parent().parent().hide();
    hidden = true;
    }

    });
    });
    </script>

    basically I have the  CLE Eligiable as the ( Yes/No field )

     and then I picked another field to show and hide  based on the CLE Eligiable  being checked or unchecked and nothing happened

    Friday, April 22, 2016 8:52 PM
  • If you have the SharePoint list form customized using InfoPath, You can have a rule on the checkbox to display some text in textbox.



    • Edited by ViviSP Friday, April 22, 2016 9:10 PM
    Friday, April 22, 2016 9:10 PM
  • Ok, I put your code into a content editor webpart

    I see in your code this might work, but 1 really stupid question

    do I go with the  @CLE_x0020_Eligible or the CLE_x0020_Eligible or the CLE Eligible

    and I'm guessing I put where the Title is or is it the columnn?

    Also the showDescription('CLE Click',descHtml);  Should be the  CLE Eligible???

    As I tried a couple of different ways and nothing happened.... not sure

    var showDescription = function (columnn, desc) {  
    	var columnObj = $("input[Title='" + columnn + "']");
    	columnObj.closest("td").append(desc);
    	columnObj.bind('click',function() { 
      if(columnObj.is(':checked')) {          
       $('#chkDesc').show();

    Friday, April 22, 2016 9:15 PM
  • What you see when you launch the new form "CLE Eligible"? then give it like

    showDescription('CLE Eligible',descHtml);

    If you see the graphic I attached in my previous post, I would done the same. It shows as "CLE Check" and the parameter is also "CLE Check".

    Also use script editor webpart, CEWP sometime mangles the script.


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.


    Friday, April 22, 2016 9:19 PM
  • this doesnt do anything, just an FYI the code in the  Content Editor WP looks fine..

    here is the code for the CLE
    <tr>
                                            <td width="190px" valign="top" class="ms-formlabel">
                                            <H3 class="ms-standardheader">
                                            <nobr>CLE Eligible</nobr>
                                            </H3>
                                            </td>
                                            <td width="400px" valign="top" class="ms-formbody">
                                            <SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="New" FieldName="CLE_x0020_Eligible" __designer:bind="{ddwrt:DataBind('i',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@CLE_x0020_Eligible')}"/>
                                            <SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="CLE_x0020_Eligible" ControlMode="New"/>
                                            
                                            </td>
                                        </tr>

     also there are other form fields after the  CLE one...

    var showDescription = function (CLE Eligible, desc) {  
        var columnObj = $("input[Title='" + CLE Eligible + "']");
        columnObj.closest("td").append(desc);
        columnObj.bind('click',function() {
      if(columnObj.is(':checked')) {          
       $('#chkDesc').show();
      }
      else {
       $('#chkDesc').hide();
      }
      });   
     };

     $(document).ready(function() {
        var descHtml = "<div id='chkDesc' style='display:none;'><p>These offices are eligible for CLE <ul><li>Dallas</li><li>SF</li><li>Los Angeles</li><li>NY NY</li></ul></p></div>"
        showDescription('CLE Eligible',descHtml);
     });
     </script>



    • Edited by FC_SPAdmin Friday, April 22, 2016 9:43 PM
    Friday, April 22, 2016 9:22 PM
  • Can you post the complete script you used in CEWP and screen shot of your new form?

    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 9:30 PM
  • Don't change the red underlined. leave it back to columnn (ignore the typo), only change you need to make is  showDescription('CLE Eligible',descHtml); Which you have already done.


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 9:48 PM
  • here is the code

    <script src="<url>/jquery-1.11.3.min.js" type="text/javascript"></script><script type="text/javascript">
    var showDescription = function (CLE Eligible, desc) {  
        var columnObj = $("input[Title='" + CLE Eligible + "']");
        columnObj.closest("td").append(desc);
        columnObj.bind('click',function() {
      if(columnObj.is(':checked')) {          
       $('#chkDesc').show();
      }
      else {
       $('#chkDesc').hide();
      }
      });   
     };

     $(document).ready(function() {
        var descHtml = "<div id='chkDesc' style='display:none;'><p>These offices are eligible for CLE <ul><li>Dallas</li><li>SF</li><li>Los Angeles</li><li>NY NY</li></ul></p></div>"
        showDescription('CLE Eligible',descHtml);
     });
     </script>


    Friday, April 22, 2016 9:49 PM
  • Refer to my previous comments and screen shot, don't change the function definition. Just pass the value as parameter.

    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 9:53 PM
  • <script src="http:<url>/SiteAssets/jquery-1.11.3.min.js" type="text/javascript"></script><script type="text/javascript">
    var showDescription = function (column, desc) {  
        var columnObj = $("input[Title='" + column + "']");
        columnObj.closest("td").append(desc);
        columnObj.bind('click',function() {
      if(columnObj.is(':checked')) {          
       $('#chkDesc').show();
      }
      else {
       $('#chkDesc').hide();
      }
      });   
     };

     $(document).ready(function() {
        var descHtml = "<div id='chkDesc' style='display:none;'><p>These offices are eligible for CLE <ul><li>Dallas</li><li>SF</li><li>Los Angeles</li><li>NY NY</li></ul></p></div>"
        showDescription('CLE Eligible',descHtml);
     });
     </script>
    • Edited by FC_SPAdmin Friday, April 22, 2016 10:03 PM
    Friday, April 22, 2016 10:03 PM
  • Only difference I see is the Jquery location, can you change it to CDN and check? Also hit F12 (Developer tool bar) and see for any exceptions in the console window.

    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 10:15 PM

  • I dont see any exceptions concerning the form and the JS code etc.

     if you mean change it to this url

    http://code.jquery.com/jquery-1.12.0.min.js

    I did and nothing happened

     when I change the  url to the JQuery file to /SiteAssets/jquery-1.12.0.min.js 
    I need to have the full url  and then I dont get the error below

    I get this error message in F12

    SCRIPT5007: The value of the property '$' is null or undefined, not a Function object

    • Edited by FC_SPAdmin Friday, April 22, 2016 10:36 PM
    Friday, April 22, 2016 10:20 PM
  • Change the reference of Jquery to below, just a try :-)

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
    If you are using chrome, you can easily debug the code by putting some breakpoints in the script.

    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 10:28 PM
  • I get this error message

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js">

    SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
    File: form.aspx, Line: 654, Column: 2

    just for giggles I double checked the column

    it is a Yes/No  ( Checkbox)

    with the Default set to NO

    just an FYI

    I'm able to add  Alert("Check this");
    and it runs

    • Edited by FC_SPAdmin Friday, April 22, 2016 11:00 PM
    Friday, April 22, 2016 10:43 PM
  • Which browser are you using? Are testing this from a server directly I mean like a remote session?

    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, April 22, 2016 11:32 PM
  • This should work on any worst case scenario, only thing you need to make sure is internet connectivity on the workstation from where you are browsing the SharePoint site. The script is trying to connect google CDN for Jquery. You can replace that url with your JQuery library in the site assets.

    <script type="text/javascript">
    var $jq;
    var showDescription = function (columnn, desc) {  
    	var columnObj = $jq("input[Title='" + columnn + "']");
    	columnObj.closest("td").append(desc);
    	columnObj.bind('click',function() { 
      if(columnObj.is(':checked')) {          
       $jq('#chkDesc').show();
       alert('clicked');
      }
      else {
       $jq('#chkDesc').hide();
      }
      });   
     };
     
     (function() {
        // Load the script
        var script = document.createElement("SCRIPT");
        script.src = 'https://code.jquery.com/jquery-1.12.0.min.js';
        script.type = 'text/javascript';
        document.getElementsByTagName("head")[0].appendChild(script);
    
        var checkReady = function(callback) {
            if (window.jQuery) {
                callback(jQuery);
            }
            else {
                window.setTimeout(function() { checkReady(callback); }, 100);
            }
        };
    
        // Start polling...
        checkReady(function($) {
    		$jq = jQuery.noConflict();
            var descHtml = "<div id='chkDesc' style='display:none;'><p>These offices are eligible for CLE <ul><li>Dallas</li><li>SF</li><li>Los Angeles</li><li>NY NY</li></ul></p></div>"
    		showDescription('CLE Eligible',descHtml);
        });
    })();
    
     </script>


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Saturday, April 23, 2016 12:00 AM
  • Hi FC_SPAdmin,

    I can't see anything wrong with the final code (above) that you've got from Rajesh.

    Assuming you have <url> just as a placeholder in this post just to hide your actual url :)

    One thing you might want to try. Move the code from your CEWP (Content Editor Web Part) into a Script Editor Web Part and see if that makes a difference.

    Cheers,

    Grant.


    Saturday, April 23, 2016 12:45 AM
  • If I didnt have internet connectivity then I wouldn't be able to respond to your posts.

    I just got back into the office, I will try the new code, but concerning the prior code, I did both of those items - Script Editor and  CEWP...

    But i will try again the new code ..  and yes, the <url> is hiding the actual  url.

    I tried the new code, nothing . happened. I tried it  with a  JQuery in the  SharePoint site assets folder and even the google location..

    I even  tried a different Calendar with Custom form  New  called Form.aspx and site and  entered the  column CLE Eligible as a  CheckBox YES/No  and still nothing happens




    • Edited by FC_SPAdmin Monday, April 25, 2016 4:46 PM
    Monday, April 25, 2016 3:43 PM
  • It is still not working.. verified that JS is enabled etcc...

    Does this matter that it is on a Custom form?

    does it matter that it is a clander form?

     As Nothing seems to work...



    Ok, I got this work with JUST  CLE and in a test List, not a calendar form .
    • Edited by FC_SPAdmin Monday, April 25, 2016 10:17 PM
    Monday, April 25, 2016 7:58 PM
  • Hi,

    We can use the following code to achieve your requirement. Add the code below into a content editor web part.

    <script src="http://code.jquery.com/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
    	$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find("input").click(function(){
    		if(this.checked){
    			$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").show();
    		}else{
    			$("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
    		}
    	});
    });
    </script>

    @Rajesh, we can't use $("input[Title='" + columnn + "']"); to get custom form field object, the field can't contain the "Title" property.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:47 PM
    Tuesday, April 26, 2016 6:45 AM
    Moderator
  • Thank you for the change of the code.. well now they (Client) want it to  show /hide a text field called "Location". Well I got it to work with the  Reson tet field. So it should work with the new   requirement as it is jsut aanother ccolumn

    ok, I think I got it now, thanks for the help, Dennis and Rajesh, but the Reason box is there  at load, I need it hidden, from the start, and then once CLE is licked or Checked then it shows

    <script src="http://code.jquery.com/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

        $("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find(".ms-metadata").hide();
        $("h3.ms-standardheader:contains('CLE Eligible')").closest("tr").find("input").click(function(){
            if (this.checked)

            {

                //alert('inside show for offered');

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').show();

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').show();

            }

            else

            {

                //alert('inside hide for offered');

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

                $("nobr:contains('Reason')").parent('h3').parent('td').parent('tr').hide();

            }




        });

        

    });

    </script>



    • Edited by FC_SPAdmin Tuesday, April 26, 2016 5:48 PM
    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:46 PM
    Tuesday, April 26, 2016 5:03 PM
  • >

    @Rajesh, we can't use $("input[Title='" + columnn + "']"); to get custom form field object, the field can't contain the "Title" property.

    Dennis, I tested it and made sure its working before posting the script.

    This is the html, post transform you see from newform.aspx which contains the title attribute.

    <input type="checkbox" id="CLE_x0020_Eligible_87c25036-cc90-4e45-bf2b-25a17e24b901_$BooleanField" title="CLE Eligible">


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Tuesday, April 26, 2016 5:37 PM
  • Rajesh,

    I did try that but with out the Title item at the end.  but , look to make it fair, Both of you get the ANSWER  button award...  ;-)

    <input type="checkbox" id="CLE_x0020_Eligible_87c25036-cc90-4e45-bf2b-25a17e24b901_$BooleanField" title="CLE Eligible">

    As I got it working......  with a combo of both set of code...

    Tuesday, April 26, 2016 9:41 PM
  • Glad to know it worked, you can mark the responses as Answer.

    Also, post your latest code.


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Tuesday, April 26, 2016 10:00 PM
  • Hi,

    The default new form contain the Title attribute, but the custom new form can't contain this attribute.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by FC_SPAdmin Wednesday, April 27, 2016 9:46 PM
    Wednesday, April 27, 2016 1:17 AM
    Moderator