Using Javascript to show/unshow a field based on input in another field

I want to display/not display a field in a JSP depending on what is selected in another field.
I am using <div></div> element currently which is displayed/not displayed using a Javascript invoked by the first field.
the problem with div is that I have to put it inside a <tr><td> otherwise it doesn't work. This makes the field look aloof from the rest of the page, and is also not aligned with the other fields.
Is there anything other than <div> that can be used? or is there a way to correct the look of the field inside a div?
Thanks

You shouldn't have to put it inside a <tr><td> to get it to work. I've done what you are trying to do with <span></span> and it worked fine. I haven't tried it with a <div> but I can't image why that wouldn't work. Maybe you could post your code.

Similar Messages

How hard is it to use javascript to show/hide fields. Is it easier to use the action builder?

I know nothing about javascript and all that ive been using so far has been stuff ive found on here (thank you everyone).
Using the action builder seems like its gonna be very tedious to do since i have so many subforms that hide, would it be esier to use javascript?

I know nothing about javascript myself but I just created a form with about 10 different subform that show or hide depending on what the user chooses from a drop down list and I used Action Builder. If we don't know javascript, how can we use it? But Action Builder did a fine job of hiding/showing wherever I needed it. And Action Builder can do more than one thing by clicking that + sign when you are building an action.
For instance, I needed to place a button in each subform that would close both the field that the person was working in and also the subform on the next page where the information was going into floating fields in a text block that was only visible thru a drop down list text select. I could have never figured out how to do that based on my knowledge of javascript. Thank Adobe for including Action Builder in this version of LiveCycle and I use it all the time. I find it extremely easy to use but it takes a little mental training to think thru the steps of how you can use the menu in Action Builder to make your form do what you need it to do.
And if all else fails, ask this forum. I struggle for just so long before I come here and ask for help. I always get the answer I need. I hope you will too.
Good luck,
Jeanette

How do I use Javascript to populate a text field based on a selection from a drop down box?

Greetings,
I have virtually no experience with JavaScript and I am trying to figure out how to add some basic automation features to an Adobe form. I have a drop down box called "Hospital_Name" that will contain approximately 7 possible selections. When the user makes a selection, I would like to have the text field (called "Hospital_Address") below the drop down box populate with the corresponding address for the selection. I have the "Hospital_Address" text field configured for multiple lines and would like the address to have a line break between the street address and the city/state/zip.
For example, if the user selected "Hospital 1", the text field would display:
123 Main St
Anytown, CA 12345
Any help or examples you can provide would be greatly appreciated.

You have the element names within the object within brackets.
Make sure your brackets are properly placed and matched.
// Place all pre-population data into a single data structure
var Location = {
"--Hospital--":{ line1: " ", line2: " " },
"Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },
"CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" },
"CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" },
"CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" },
"CHI Midlands":{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
"Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
"Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
// some debugging code to see location names;
console.show();console.clear():
for(I in Location) {
console.println(I);
// end debugging code;
function SetFieldValues(Hospital_Name) {
    this.getField("AddLine1").value = Location[Hospital_Name].line1;
    this.getField("AddLine2").value = Location[Hospital_Name].line2;
This is not a beginners task but requires a fair amount of knowledge about the structure of objects, defining strings, and structure of arrays.
Are you sure you have all the field names correctly spelled and capitalized?
Do you get any error in the JavaScript console?
Just trying the line that defines the "Location", I get the following error:
SyntaxError: invalid property id
1:Console:Exec
undefined
All the form field in a PDF are processed by using JavaScript and any error in any script will stop JavaScript processing.
It might help to have a link to the problem form.
Make sure your brackets are properly placed and matched.
// Place all pre-population data into a single data structure
var Location = {
"--Hospital--":{ line1: " ", line2: " " },
"Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },
"CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" },
"CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" },
"CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" },
"CHI Midlands":{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
"Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
"Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
function SetFieldValues(Hospital_Name) {
    this.getField("AddLine1").value = Location[Hospital_Name].line1;
    this.getField("AddLine2").value = Location[Hospital_Name].line2;

How to use javascript in a calculated column field in SP2013

Hi All,
I'm trying to use the code below in a calculated column but i can't get it to work.
any time i add it in it strips out all the quotes etc..and it doesn't show the open dialog.
Any ideas how i can use this in a calculated column field?
Thanks in Advance
="<div><a href='#'
onclick='openInDialog(500,600,true,true,false,'http://www.SharePoint.com');'>MS
SharePoint Site</a></div>"

Your problem is with the single quotes which both open de onclick event and are used for the javascript string variable.
You want " and need to escape those in a SharePoint string as ""
So this
="<div><a href='#' onclick=""SP.UI.ModalDialog.OpenPopUpPage('https://office.microsoft.com/en-us/sharepoint/');"">MS SharePoint Site</a></div>"
Evaluates to:
<div><a href='#' onclick="SP.UI.ModalDialog.OpenPopUpPage('https://office.microsoft.com/en-us/sharepoint/');">MS SharePoint Site</a></div>
Once SharePoint dumps the HTML code in the Client Browsers
(provided you have set the Datatype of the Calculated column field to Number!)

Captivate: Using Javascript to show/hide text captions

Hello,
I want to show/hide a text caption using javascript. I can't find the way of doing it with advanced actions. I dont know if it's because it belongs to a question slide in a pool. Does somebody knows if it's possible and how it can be done??

You can set the length of the variable when you insert it.
15 characters is just the default setting.
What I meant by COULD is that the kind of thing you are asking about here (using JavaScript to hide objects inside a Captivate movie at runtime) is not as simple as you'd like it to be.
JavaScript is not my particular area of expertise, but there are some people that chime in on this forum that ARE experts at JS. But I think they would also be the first to say that it's not as simple a thing to pull off as just "knowing the command to hide/show an object".
The easiest tool to use in Captivate for showing or hiding objects is Advanced Actions. The next easiest thing to use is ActionScript 3, and that's hard. JavaScript is a very useful programming language, but it spends all of its life outside the Captivate movie looking in through AS3's External Interface. So JS alone is not going to solve all your issues.

Using Javascript to change multiple text field names

I have a pdf with multiple text fields. I need to change all the text field names (General -> Name) so that they are unique so that when I combine multiple pdfs together, the text fields will stay intact. Is there anyway to do this using javascript? Thanks!

I'm new to javascript too...it will be very helpfull for me too...Thanks
poltrone
prodotti chimici

Problem in popultating combobox based on input from another combobox

i have there combo boxes when i select the first combobox ,based on the input given it must populate the second and based on the input in second combo box it must populate the third one.1->2->3.
Actually i am having a javascript when i select the data in first combo box the information is sent to specified jsp page with parameter using onchange function and the second combo box is poplated based on the first but the third combo box in not populating based on the second.
here is my code:
jsp:
<select name="recrClient" class="selectBox" id="recrClient" onchange="htmlData('BSTSRecuritmentContacts.jsp', 'client='+this.value);">
javascript
function stateChanged()
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
document.getElementById("contacts").innerHTML= xmlHttp.responseText;
else
//alert(xmlHttp.status);
// Will populate data based on input
function htmlData(url, qStr)
if (url.length==0)
document.getElementById("contacts").innerHTML="";
return;
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
alert ("Browser does not support HTTP Request");
return;
if (url=="BSTSRecuritmentContacts.jsp")
url=url+"?"+qStr;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
if i use the same method populating the third combo box, this is not working
please reply me and thanks in advance

Hi there,
What about this:
Create a multicube with 0PA_C01 and 0PE_C01 and then you create one key figure with the total of employes (that comes from 0PA_C01) and another key figure with the total number of employes that had training (that comes from 0PE_C01) and finally you create a calculated key figure at query level that subtracts the first key figure by the second, i.e., the total number of employees - the employees that had training.
Diogo.

Using JavaScript to auto populate a field based on numeric value of a separate drop down field

Hello, I am trying to set up a simple, I hope, javascript which will enable to me auto populate one field based on the numberic value of another field using Acrobat Pro XI.
Essentially I have 2 drop down fields (we'll call them DD1 and DD2).
DD1 is the sum of 8 preceding drop down values. That sum can be anywhere from 0 - 40. Whatever that sum falls within a range which identifies a rating. The ratings and ranges are below:
0-8: Non-Performer
9-16: Low Performer
17-24: Performer
25-32: High Performer
33-40: Exceptional Performer
DD2 is where the rating ("non-performer", "low performer", etc.) will be captured. Instead of requiring the user to look at DD1, determine the value, and then identify and input the rating manually, I would like DD2 to auto populate the rating based on the value (sum) in DD1.
For example, if DD1 shows a value of 27 then DD2 would auto populate "High Performer". So how do I write this code or execute this? In excel I would use an if, then statement. Is there something similar in Acrobat Pro XI.
Any help is greatly appreciated. Thank you in advance.

If you use a text field, the custom calculation script could be:
// Custom calculation script for text field
(function () {
    var s = getField("DD1").valueAsString;
    // Blank this field if input is blank
    if (!s) {
        event.value = "";
        return;
    // Convert string to number
    var v = +s;
    // Set this field's value based on the input
    if (v <= 40 && v >= 33) {
        event.value = "Exceptional Performer";
        return;
    if (v < 33 && v >= 25) {
        event.value = "High Performer";
        return;
    if (v < 25 && v >= 17) {
        event.value = "Performer";
        return;
    if (v < 17 && v >= 9) {
        event.value = "Low Performer";
        return;
    if (v < 9 && v >= 0) {
        event.value = "Non-Performer";
        return;
    // If none of the above fit, blank this field
    event.value = "";

Do I need to use javascript to get a text field in a PDF form to aut fill with current/today's date?

I have a form for booking appointments and would like the date field to automatically fill with
today's date and to print. I have set the text field's format to "Date" and when I place the cursor into the
date field, today's date shows. It disappears as soon as I tab to the next field.
Does this action require a javascript script to fill and print today's date? If so, where do I find that?
Or is there another way to format the text field (besides typing today's date) to get the current date?
Thanks.
Ali
using iMac 2.93 GHz Intel Core 2 Duo 8 GB | OS Snow Leopard 10.6.8 | Acrobat Pro 8

Thank you GKaiseril!
From the examples by Chris Dahl, I edited the script in the text field editing dialog to reflect the title I had given the field. That fixed the problem of today's date disappearing as soon as I tabbed to the next field.
How do I choose for document level or page open script? I would like it to insert the date upon opening the document.
Thanks again.
Ali
NOTE: I found the answer within Chris Dahl's tutorial... path is for Acrobat Pro 8: Advanced>Document Processing>Document Javascripts

Using Javascript to Crop Pages in CropBox based on TrimBox

Hi
Is there a way to set crop sizes in mm into CropBox based on the sizes on TrimBox, with Acrobat Javascript?
(From the Crop Pages menu)
Scenario:
set TrimBox sizes (top, bottom, left, right) to CropBox (top, bottom, left, right)
Thanks

A batch process is good for running the final script. But for development, use the console window. There's links to a video and an article in my signature block.
Try running this code one line at a time in the console.
rectCrop = this.getPageBox("Crop", this.pageNum);
pgWidth = rectCrop[2];
pgHeight = rectCrop[1];
desired_width = 220 * 72/25.4;
desired_height = 297 * 72/25.4;
rectNewCrop = [ (pgWidth - desired_width)/2, (pgHeight + desired_height)/2, (pgWidth + desired_width)/2, (pgHeight - desired_height)/2];
setPageBoxes("Crop", this.pageNum,this.pageNum, rectNewCrop);
What results do you get?
Thom Parker
The source for PDF Scripting Info
pdfscripting.com
The Acrobat JavaScript Reference, Use it Early and Often
Then most important JavaScript Development tool in Acrobat
The Console Window (Video tutorial)
The Console Window(article)

Using javascript to show/hide buttons

I need to show a hidden button on a slide, but I need to do it from within a javascript that is being called. Does anyone know how to do this? I know there are functions you can use to get/set variables (cpEIGetValue) but I don't know how to access &/or manipulate objects...
Help?
Thanks - Monica

Hello,
I'm sure this could work with advanced actions
Since I have been blogging and writing a lot about advanced actions, perhaps I could help to debug? If this is acceptable to you, I will have a look at your actions, and try to understand what you want to realize. What do you think?
Here is a link to my blog, just to prove my credibility:
lilybiri's posterous
Lilybiri

Using JavaScript to show/hide fragments

Hi,
Can anyone point me in the direction of information or an example of JavaScript being used to show or hide fragments within a form?
I'm looking to add JavaScript to the XDP content of my fragments so that these fragments will be shown or hidden depending on the evaluation of certain conditions.
If I create a form, and reference a fragment within that, then I can hide the fragment using this JavasScipt embedded within the form:
xfa.form.MyForm.MyForm.MyFragment.presence="hidden"
However, I'm looking to add the JavaScript to my fragment. I've used similar JavaScript but when the form and fragment are assembled the fragment is always displayed.
Can anyone help here please?
Thanks,
Ray.

Hi,
Can anyone help here at all?
All that I need for now is how to get JavaScript included in my fragment invoked when a form that includes that fragment is assembled.
When the fragment is rendered by itself the JavaScript is invoked. But not when it's rendered from within another form. Why is this?
Thanks,
Ray.

Using javascript to show all comments on startup

I would like all comments to show on all documents when a document is opened. Right now I have the following code to create a menu option. This runs fine, but when I make a simple call to showAllComments(), I get the error "this.syncAnnotScan(); is not a function" How can I get the function showAllComments() to run when Adobe Reader is opened?
if ( typeof sdkMenuItem == "undefined")
          var sdkMenuItem = false;
if (!sdkMenuItem) {
          sdkMenuItem = true;
          app.addSubMenu( {
             cName:"ACROSDK:JSSubMenu",
             cUser: "Acrobat SDK JavaScript",
             cParent: "Edit",
             nPos: 0
app.addMenuItem({
   cName:"ACROSDK:ShowAllComments",
   cUser:"Show All Comments",
   cParent: "ACROSDK:JSSubMenu",
   cExec: "showAllComments();",
   cEnable: "event.rc = (event.target != null);" // active only with docs open
* main function
function showAllComments()
    try {
                        this.syncAnnotScan();
                    var annots = this.getAnnots();
                    if (annots == null) { app.alert('not found'); }
                    for (var i=0; i<annots.length; i++)
                                        annots[i].hidden = false;
   catch(e){app.alert(e);}

You shouldn't have to put it inside a <tr><td> to get it to work. I've done what you are trying to do with <span></span> and it worked fine. I haven't tried it with a <div> but I can't image why that wouldn't work. Maybe you could post your code.

Form Validation using Javascript error when adding extra fields

Hi,
I have a form (with a few fields which require validation) which works just fine. I have added extra fields to the form and require them to validate too. My problem is that they are not showing via the behaviours/validation box and I can't figure out how to sort it! They are contained within the form element. I have tried to delate the original validation and start again but to no avail.
Please can someone help me?
Code below.
Many thanks
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
//-->
<form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact">
      <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="54%" class="subHeader">Full Name* </td>
          <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Company Name </td>
          <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Address</td>
          <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
        </tr>
        <tr>
          <td class="subHeader"> </td>
          <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
        </tr>
        <tr>
          <td class="subHeader"> </td>
          <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
        </tr>
        <tr>
          <td class="subHeader">Postcode</td>
          <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
        </tr>
        <tr>
          <td class="subHeader">Telephone Number* </td>
          <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
        </tr>
        <tr>
          <td class="subHeader">Mobile Number </td>
          <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
        </tr>
        <tr>
          <td height="25" class="subHeader">Email Address* </td>
          <td class="subHeader"><input name="Email" type="text" id="Email" /></td>
        </tr>
        <tr>
          <td height="30" class="subHeader">Status*</td>
          <td class="subHeader"><select name="StatusClass" id="StatusClass">
            <option selected="selected">Please Choose</option>
            <option>Architect</option>
            <option>Interior Designer</option>
            <option>Private Client</option>
            <option>Student</option>
            <option>Trade Enquiry</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="23" class="subHeader">Project*</td>
          <td class="subHeader"><select name="Project" size="1" id="Project">
            <option selected="selected">Please Choose</option>
            <option>Planning Stages</option>
            <option>New Build</option>
            <option>Refurbishment</option>
            <option>Barn Conversion</option>
            <option>No project - information only</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="37" class="subHeader">How did you hear about us?*</td>
          <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
            <option selected="selected">Please Choose</option>
            <option>Web Search</option>
            <option>Grand Designs</option>
            <option>Living Etc</option>
            <option>Home Building & Renovation</option>
            <option>Architect</option>
            <option>Friend/Family</option>
            <option>Magazine/Editorial</option>
            <option>Newspaper Article</option>
            <option>Trade Show/Exhibition</option>
            <option>Other</option>
          </select></td>
        </tr>
        <tr>
          <td height="24" class="subHeader">Brochure Request </td>
          <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
        </tr>
        <tr>
          <td class="subHeader">Message</td>
          <td class="subHeader"><span class="style4">
            <textarea name="Message" id="Message"></textarea>
          </span></td>
        </tr>
        <tr>
          <td class="subHeader"> </td>
          <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
        </tr>
        <tr>
          <td colspan="2" class="subHeader"><em>* Required fields</em></td>
        </tr>
      </table>
      </form>

whoops..... forgot to post this line of code which was a bit further down the page...
"MM_validateForm('name','','R','number','','RisNum');return document.MM_returnValue">

Using SubReport to show Details of field grouped in Main Report

Hi Experts
I am creating a Crystal Report from BEx Query . In Report i have Created a group on Cost center field.
& some other fields are in detail section. Suppose if i execute report then groups are A, B, C, D ......
Now further requirement is when i click on one group for example 'A' then i should get detail of that group in
different subreport.
Is it possible?
Regards
Ajay

Hi Ajay,
Follow this Steps,
1,Create a Group with 'Cost center'.
2,Delete the 'group name'(A,B,C...) form 'group header'. Now you will get a group with no headings.. which means GH #1 section should be blank for now.
3, Insert the OnDemand subreport in to the Group header.(The same place which we have Group header name before)
4,Set "Subreport link as "Cost center". (Right click on subreport>Change subreport links>double click on 'Cost center' in report feilds-->OK)
5,Now the important thing, Change the "On-Demand Subreport Caption " as group name.
(Right click on subreport>Format subreport>Subreport Tab>Click in 'X-2' button of "On-Demand Subreport Caption ">Formula editor will popup, then right like
GroupName ({Cost center}) // Or double click on the Group #1 Name in the Report Fields tree in Field tree-->Save And Close)
6, Change the font,Font Color an d uncheck the underline.
This will work for you,
Regards,
Salah.
Edited by: salahudheen muhammed on Sep 23, 2009 11:53 AM

Using Javascript to show/unshow a field based on input in another field

Similar Messages

Maybe you are looking for