Javascript help!!! within Acrobat Forms!
Hello all
I'm creating a pdf form with drop down selection boxes.
One field is client (so users select a client from drop down menu)
I need to be able to hide and show other fields.
i.e
If they select CLIENT A (within client field) it will show CLIENT A's specific choices in another field (drop down menu)
If they select CLIENT B (within client field) it will show CLIENT B's specific choices in another field (drop down menu) and not show A's choices.
SO the form would look like
Client = JOE BLOGS SANDWICHES
Section = MARKETING.
Both Client and Section need to be droop down boxes and the relevent Section choices are displayed according to what is selected in CLient
So the javavscript needs to say - if client field is A show box 1, if Client field is B show box 2
Hard to explain as you've probably noticed but any hep would be appreciated
Thanks
decibel.places posted this at 14:55 — 10th December 2008.
He has: 1,494 posts
Joined: Jun 2008
Welcome to TWF, mjc
I've never used JS for PDF - but assuming it is fully supported, you need to change display or visibility properties selectively
First, hide all "boxes" with display: none
Add js to the select box, so when it changes, boxes are selectively displayed or hidden. There are some additional considerations for display depending on browser (IE or not) here is some code I am using for a Report Abuse page that has a similar functionality (if it looks familiar, it is modeled on the Flickr report abuse page):
(the URL is http://www.ratemybutt.com/index.php?option=abuse but you need to log in to use it, partly because it uses hidden fields for the username and referrer page)
<script type="text/javascript">
<!--
var isie=(navigator.appName.indexOf("Microsoft")!=-1)? true : false;
var mylist;
function disp(){
mylist=document.getElementById("select");
var opt=mylist.options[mylist.selectedIndex].text;
var indx=mylist.selectedIndex;
if (isie){
if (indx == 1){
document.getElementById("2").style.display="inline";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="none";
document.getElementById("field2").style.display="none";
document.getElementById("field3").style.display="none";
document.getElementById("field4").style.display="none";
}
else if (indx == 2){
document.getElementById("3").style.display="inline";
document.getElementById("2").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="inline";
document.getElementById("field2").style.display="inline";
document.getElementById("field3").style.display="inline";
document.getElementById("field4").style.display="inline";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
}
else if (indx == 3){
document.getElementById("4").style.display="inline";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="inline";
document.getElementById("field2").style.display="inline";
document.getElementById("field3").style.display="inline";
document.getElementById("field4").style.display="inline";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
}else if (indx == 4){
document.getElementById("5").style.display="inline";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("field1").style.display="inline";
document.getElementById("field2").style.display="inline";
document.getElementById("field3").style.display="inline";
document.getElementById("field4").style.display="inline";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
}
else{
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("field1").style.display="inline";
document.getElementById("field2").style.display="inline";
document.getElementById("field3").style.display="inline";
document.getElementById("field4").style.display="inline";
}
/* not IE */
}else{
if (indx == 1){
document.getElementById("2").style.display="table-row";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="none";
document.getElementById("field2").style.display="none";
document.getElementById("field3").style.display="none";
document.getElementById("field4").style.display="none";
}
else if (indx == 2){
document.getElementById("3").style.display="table-row";
document.getElementById("2").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="table-row";
document.getElementById("field2").style.display="table-row";
document.getElementById("field3").style.display="table-row";
document.getElementById("field4").style.display="table-row";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
document.getElementById("message").focus();
}
else if (indx == 3){
document.getElementById("4").style.display="table-row";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="table-row";
document.getElementById("field2").style.display="table-row";
document.getElementById("field3").style.display="table-row";
document.getElementById("field4").style.display="table-row";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
document.getElementById("message").focus();
}else if (indx == 4){
document.getElementById("5").style.display="table-row";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("field1").style.display="table-row";
document.getElementById("field2").style.display="table-row";
document.getElementById("field3").style.display="table-row";
document.getElementById("field4").style.display="table-row";
var msgval = document.getElementById("message").value;
if (!msgval.indexOf("http")) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n" + document.getElementById("message").value;
else if (!msgval) document.getElementById("message").value = "Previous page URL: " + document.referrer.toString() + "\n\n";
document.getElementById("message").focus();
}
else{
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("5").style.display="none";
document.getElementById("field1").style.display="table-row";
document.getElementById("field2").style.display="table-row";
document.getElementById("field3").style.display="table-row";
document.getElementById("field4").style.display="table-row";
document.getElementById("message").focus();
}
}
}
function init(){
mylist=document.getElementById("select");
document.getElementById("email").value=myemail;
document.getElementById("uname").value=myname;
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("ref").value=document.referrer.toString();
document.getElementById("1name").value=myname;
document.getElementById("1email").value=myemail;
if (subj == "Spammer!") mylist.selectedIndex = 2;
if (subj == "Phishing Attempt") mylist.selectedIndex = 3;
if (subj == "Other") mylist.selectedIndex = 4;
if (subj == "confirm"){
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
document.getElementById("4").style.display="none";
document.getElementById("list").style.display="none";
document.getElementById("field1").style.display="none";
document.getElementById("field2").style.display="none";
document.getElementById("field3").style.display="none";
document.getElementById("field4").style.display="none";
document.getElementById("conf").style.display="inline";
}
}
onload = init;
//-->
</script>
the select box:
<select name="subject" id="select" onchange="disp()"><option>Please Select a Category</option>
<option>Offensive/Vulgar Comment </option>
<option>Spammer!</option>
<option>Phishing Attempt</option>
<option>Inappropriate Picture</option>
<option>Other</option>
</select>
the body
<tr id="2" style="display: none;">
<td colspan="3" class="verdblk11bold" style="padding: 50px" align="left">
<p>We're sorry if the behavior of another member has made you uncomfortable</p>
<p>If you "block" this member, it will remove you from their contacts, remove their comments, and remove your photos from their favorites. You will also no longer see their private photos.</p>
<p><script type="text/javascript">
<!--
document.write('Return to <a href="'+document.referrer+'">previous page</a>.');
//-->
</script></p>
</td>
</tr>
<tr id="3" style="display: none;">
<td colspan="3" class="verdblk11bold" style="padding: 50px" align="left">
<p>We hate spam just as much as you do.</p>
<p><b>It's most helpful to us if you report the alleged spammer,</b> so if you've clicked through from another page, please go back and click "Report Abuse" from their profile.</p>
<p>We will endeavor to remove any spam left on your photo or in your group as part of our clean up.</p>
<p>Be sure to include links to relevant photos, videos or people where appropriate and explain your concern with as much detail as possible.</p>
<p>Also note that <i>abuse of this form may result in further action by <?php echo $rmeConfig_site_name ?></i>.</p>
</td>
</tr>
<tr id="4" style="display: none;">
<td colspan="3" class="verdblk11bold" style="padding: 50px" align="left">
<p>We take phishing very seriously.</p>
<p>Please send us the URL of any site masquerading as <?php echo $rmeConfig_site_name ?> in an attempt to garner member login information and the URL of the <?php $rmeConfig_site_name ?> member who left the comment.</p>
<p>Both pieces of information are vital for our investigation.</p>
<p>Be sure to include links to relevant photos, videos or people where appropriate and explain your concern with as much detail as possible.</p>
<p>Also note that <i>abuse of this form may result in further action by <?php echo $rmeConfig_site_name ?></i>.</p>
</td>
</tr>
<tr id="5" style="display: none;">
<td colspan="3" class="verdblk11bold" style="padding: 50px" align="left">
<!-- <p>We take phishing very seriously.</p> -->
<p>Please send us the URL of any inappropriate photo and the URL of the <?php $rmeConfig_site_name ?> member who posted the photo.</p>
<p>Both pieces of information are vital for our investigation.</p>
<p>Please include what about the photo is inappropriate and explain your concern with as much detail as possible.</p>
<p>Also note that <i>abuse of this form may result in further action by <?php echo $rmeConfig_site_name ?></i>.</p>
</td>
</tr>
<tr id="conf" style="display: none;">
<td height="100" align="center" valign="top" colspan=3><br />
<table width="358" height="49" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="358" height="25" align="center" valign="top"><p class="verddarkgrey15bold">Thank you for your feedback, we will look into this matter.<br />
</p></td>
</tr>
<tr>
<td height="24" align="center" valign="top" class="verdblk12"> </td>
</tr>
</table>
<br />
<br /></td>
</tr>
<tr id="field1" style="display: table-row">
<td width="132" height="30"><div align="right" class="verddarkgrey12bold">Your Name: </div></td>
<td width="14"> </td>
<td width="402" align="left"><input name="uname" id="uname" type="text" size="28" /></td>
</tr>
<tr id="field2" style="display: table-row">
<td width="132" height="30"><div align="right" class="verddarkgrey12bold">Your Email: </div></td>
<td width="14"> </td>
<td width="402" align="left"><input name="email" id="email" type="text" size="28" /></td>
</tr>
<tr id="field3" style="display: table-row">
<td height="30" class="verddarkgrey12bold" valign="top"><div align="right"><br /><br />Message: </div></td>
<td colspan="2" align="left"><br /> <textarea name="message" id="message" rows="10" cols="40"></textarea></td>
<td colspan="3"><br /> <br /></td>
</tr>
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.