[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

make asp:Textobx visible using javascript, based on user selection on a sharepoint:formfield

Posted on 2009-05-19
8
Medium Priority
?
1,095 Views
Last Modified: 2013-11-19
I have on a custom form created with sharepoint designer, the following lines where a sharepoint:formfield and a asp:textobox exist.
The sharepoint:formfield is a list form field, where the last data is Other.
I need to use javescript, which will set the asp:Textbox to visible when sharepoint:formfield is selected as Other. The problem is that i do not have much idea on javascript, i tried to cope with this, but when trying to get the reference of sharepoint: textbox or asp:textfield, i am returned with null.

Can someone create for me this small javascript (onfocusout="javascript:hideFields()") that will cope with this issue? By the way, if Sharepoint:formfield is dificult to cope with, we can use a asp:checkbox to cope with this.  I think this will be easy for javascript experts.



<table>
     <tr>
           <td width="190px" valign="top" class="style2">
                 <H3 class="ms-standardheader"> 
                     <nobr> Name </nobr>
                 </H3>
            </td>						
            <td>								<div class="select-container" onfocusout="javascript:hideFields()">
	<SharePoint:FormField runat="server" id="ff14{$Pos}" ControlMode="Edit" FieldName="Organization" __designer:bind="{ddwrt:DataBind('u',concat('ff14',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Organization')}" DisplaySize="10" /><SharePoint:FieldDescription runat="server" id="ff14description{$Pos}" FieldName="Organization" ControlMode="Edit" />					</div>                       
                   <asp:TextBox runat="server" id="OrganizationsID{1}" text="{@Other_x0020_Organizations}" __designer:bind="{ddwrt:DataBind('u',concat('OrganizationsID',1),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Other_x0020_Organizations')}" />
            </td>						
      </tr>

Open in new window

0
Comment
Question by:Rongas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 1

Expert Comment

by:Devoney
ID: 24419679
You must use element.style.visibility = "hidden"; propertie to set objects its visibility.

You can use the following
var Object = document.getElementById('IDofFieldToHide');
Object.style.visibility = "hidden";

I would place all the fields in one div, give that div a name, and hide the div instead of every object.
See the code below, hopefully this helps.

<script type="text/javascript">
function hideFields()
{
   var Object = document.getElementById('DivToHide');
   object.style.visibility = "hidden";
}
</script>
 
 
<div class="select-container" onfocusout="javascript:hideFields()">
 
<div id="DivToHide">
 
        <SharePoint:FormField runat="server" id="ff14{$Pos}" ControlMode="Edit" FieldName="Organization" __designer:bind="{ddwrt:DataBind('u',concat('ff14',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Organization')}" DisplaySize="10" /><SharePoint:FieldDescription runat="server" id="ff14description{$Pos}" FieldName="Organization" ControlMode="Edit" />                                       </div>                       
                   <asp:TextBox runat="server" id="OrganizationsID{1}" text="{@Other_x0020_Organizations}" __designer:bind="{ddwrt:DataBind('u',concat('OrganizationsID',1),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Other_x0020_Organizations')}" />
</div>
 
</div>
          

Open in new window

0
 

Author Comment

by:Rongas
ID: 24420296
Thank you Devoney, at least i know i am in the right direction. This is also what i have also tried, but it does not work. :-(

When java script runs, On internet exprorer, i see an error message telling me "Object required".

Please notice that in the code provided I changed var Object = document.getElementById('DivToHide'); to object, since this is what was used in object.style.visibility = "hidden";, but i think this is ok.
I think, for some reason, document.getElementById('DivToHide'); returns null.
I found some posts, one of which is the one below: http://www.binarywave.com/blogs/eshupps/Lists/Posts/Post.aspx?ID=23
When i tried to put the
document.getElementById('<%='DivToHide'.ClientID%>');  i get when the page loads, the error message "blocks are not allowed in this file."
What can i do?  :-(
 
0
 
LVL 17

Expert Comment

by:GreatGerm
ID: 24421025
This is essentially what you're looking for: http://www.experts-exchange.com/OS/Microsoft_Operating_Systems/Server/MS-SharePoint/Q_24410154.html

If you post a code snippet of your generated source so I can see how SharePoint is handling your specific field, I can help customize it for you.
0
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

Author Comment

by:Rongas
ID: 24421252
I will have a look on the page you provided and try to understand it. Also please find attached a small code snippet and the complete aspx page generated from Sharepoint designer.

I have split my work on two steps
1st step, hide/ unhide textbox named OtherTitle{$Pos} based on the click of user at ff72{$Pos} checkbox.

2nd step:
Check the data in OtherTitle{$Pos}  and ff66{$Pos} to check if user has selected any value for the Title, and throw an error message if user has not selected any value on any of these two (making somehow the Title mandatory to have a value from eather a list form field or simple text).

Currently i am on the first step, but hopefully, the second step will be simple code..

Thank you GreatGerm
full-page.txt
code-snipet-small.txt
0
 
LVL 1

Expert Comment

by:Devoney
ID: 24421341
When I insert this into my browser I have an object returned.
javascript:alert(document.getElementById('DivToHide'));

Edit the function als followed:
<script type="text/javascript">
function hideFields()
{
    document.getElementById('DivToHide').style.visibility = "hidden";
}
</script>

So you do not save the object in a var but use it directly. Then when I insert the following line into my browser

javascript:hideFields();

The div is hidden.
0
 
LVL 17

Accepted Solution

by:
GreatGerm earned 2000 total points
ID: 24421568
I'm going to answer your initial question here and encourage you to start another question about your data validation needs.

I assume all of your code is working aside from what has been requested so I will no modify anything other than what needs to be changed to achieve your intended result.

I'm on my mobile and have not tested this code so let me know if there's any weirdness, but it should work:

function toggleBox(button,location){
	var boxID = "boxContainer" + location;
        if(button.checked){
                document.getElementById(boxID).style.display = "block";
        }else{
                document.getElementById(boxID).style.display = "none";		
	}
}
 
 
<div title="ControlCheckBox">
	<asp:CheckBox runat="server" id="ff72{$Pos}" onclick="toggleBox(this,'{$Pos}')" __designer:bind="{ddwrt:DataBind('u',concat('ff72',$Pos),'Checked','CheckedChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Other_x0020_Title')}" Text="Other Title" />
</div>
<div title="TextBoxToHide" id="boxContainer{$Pos}" style="display:none;">
     <asp:TextBox runat="server" id="OtherTitle{$Pos}" text="{@Other_x0020_Title}" __designer:bind="{ddwrt:DataBind('u',concat('OtherTitle',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Other_x0020_Title')}" AutoPostBack="True" /> 					          	 
</div>

Open in new window

0
 

Author Comment

by:Rongas
ID: 24421770
GreatGerm, you made something on your mobile, while i was trying to do it for 3 days now! You are incredible!
You had one small mistake,
<?xml:namespace prefix = asp />must be
<.input name="Checkbox1" type="checkbox" onclick="toggleBox(this,'{$Pos}')" />
 
But you are great!



0
 
LVL 17

Expert Comment

by:GreatGerm
ID: 24422223
Oh well, that's what I get for getting used to an editor with markup.  Glad it worked for you.  For future questions of the like definitely make sure you ask them in the MS SharePoint category since SharePoint has some quirks compared to the standard ASP/Javascript world.
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A recent project that involved parsing Tableau Desktop and Server log files to extract reusable user queries for use in other systems. I chose to use PowerShell to gather the data, and SharePoint to present it...
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question