Welcome to TWF, mjc I've

decibel.places — Wed, 10 Dec 2008 14:55:29 +0000

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&nbsp;&nbsp;&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 />&nbsp;&nbsp;&nbsp;<textarea name="message" id="message" rows="10" cols="40"></textarea></td>
<td colspan="3"><br />                                <br /></td>
</tr>