Creating a custom (popup) prompt

[ray_broome]

Hi all,

I'm trying to create a more customized version of the prompt function built in by javascript where i basically use some dhtml to bring up a div made up to resemble the javascript prompt window. I am getting some problems with hiding/showing it though.

Here's the javascript:

<script type="text/javascript">
	
	/*
		closePopup function - close a dynamic popup window
	*/
	function hide(divId)
	{
		var divWind = document.getElementById(divId);
		
		//alert(divId);
		//divWind.divWinContent.innerHTML = "";
		//alert(divId);
		//if(this.isHidden)
//			return false; // return false if already hidden
//			
		divWind.style.display = "none";
//		divWind.isHidden = true;
//		return true;
	}
	
	
	
	/*
		initPopup function - initialize the popup window
	*/
	function init()
	{
		var divWin = document.createElement("div");
			
		//this.tblName = tblName;
		//this.selectId = selectId;
		//this.divId = divId;
		
		divWin.id = this.divId;
		divWin.className = "divwindow";
		
		divWinData = '<div class="divWinTitle">';
		divWinData += '<h4>Add a new '+ this.selectId +'</h4>';
		divWinData += '</div>';
		divWinData += '<div class="divWinContent">';
		divWinData += '<form name="promptForm">';
		divWinData += '<p>';
		divWinData += '<img src="images/quesmark.gif" style="text-align: left;" />';
		if(this.tblName == "infraspecies" || this.tblName == "syn_infraspecies")
		{
			
			divWinData += '<select name="newRank" id="newRank">';
			divWinData += '<option selected="selected">Rank</option>';
			divWinData += '<option>f</option>';
			divWinData += '<option>ssp</option>';
			divWinData += '<option>var</option>';
			divWinData += '</select>';
		}
		divWinData += '&nbsp;&nbsp;<label for="newName">Name: </label>';
		divWinData += '<input type="text" name="newName" id="newName" /> <br /> <br />';
		divWinData += '<span style="text-align:center; display:block;">';
		divWinData += '<input type="button" id="commitBtn" name="commitBtn" value="GO" /> &nbsp;';
//			divWinData += '<input type="submit" id="cancelBtn" name="cancelBtn" value="Cancel" onclick="promptWin.close()" />';
		divWinData += '<input type="button" id="cancelBtn" name="cancelBtn" value="Cancel" />';
		divWinData += '</span>';
		divWinData += '</p>';
		divWinData += '</div>';
		divWinData += '</form>';
		divWin.innerHTML = divWinData;
		
		//divWin.close = this.close;
		//divWin.submitValues = this.submitValues;
		
		document.getElementById("main").appendChild(divWin);
		
		document.getElementById("cancelBtn").onclick = this.hide(this.divId);
		document.getElementById("commitBtn").onclick = this.submitValues(this.divId); // return values when user clicks GO
		
		//return divWin;
	}
	
	
	
	/*
		showPopup
	*/
	function show()
	{
		var divWind = document.getElementById(this.divId);
		
		//if(!divWind.isHidden)
//			return false; // if shown return false
		
		divWind.style.display = "block";
		//divWind.isHidden = false;
		return true;
	}
	
	
	/*
		submitValues
	*/
	function submitValues(divId)
	{
		var url="additem.php";
		var divWind = document.getElementById(divId);
		
		if(document.getElementById("newRank"))
		{
			var url="additem.php";
			var extra = document.getElementById("newRank").value;
			var name = document.getElementById("newName").value;
			
			url += "?t="+divWind.tblName+"&v="+name+"&o="+divWind.orderBy+"&v2="+extra;
			alert(url);
			//url=url+"&sid="+Math.random();
			//xmlHttp.onreadystatechange = stateChanged;
//				xmlHttp.open("GET",url,true);
//				xmlHttp.send(null);
		}
		else
		{
			var url="additem.php";
			var name = document.getElementById("newName").value;
			
			url += "?t="+divWind.tblName+"&v="+name+"&o="+divWind.orderBy+"&v2=";
			//alert(url);
			//url=url+"&sid="+Math.random();
			//xmlHttp.onreadystatechange = stateChanged;
//				xmlHttp.open("GET",url,true);
//				xmlHttp.send(null);
		}
		hide(divId);
		//document.getElementById(divId).style.display = "none";
	}
	
	
	
	
	/*
		divWindow constructor
	*/
	function divWindow(tblName,selectId,orderBy,divId)
	{
		/* properties */
		this.tblName = tblName;
		this.selectId = selectId;
		this.orderBy = orderBy;
		this.divId = divId;
		//this.isHidden = true; // start off hidden
		this.newRank = "";
		this.newName = "";
		
		
		/* methods */
		this.init = init;
		this.show = show;
		this.hide = hide;
		this.submitValues = submitValues;
		
		//this.submitValues = submitValues;
		
		
		//var divWin = document.getElementById(divId);// get a ref to the window
//		
//		if(divWin == null)
//		{
		//divWin = this.initPopup; // if div window does not yet exist, create it
			
		//}
		
		
		//document.getElementById("cancelBtn").onclick = divWin.close; // close "window" when user clicks cancel
//		document.getElementById("commitBtn").onclick = divWin.submitValues; // return values when user clicks GO
	}
</script>

Here's the css:

<style type="text/css">
/* divwindow class definition */
.divwindow {
	position:fixed;
	left:500px;
	top:200px;
	border:1px solid black;
	display:none;
	height:auto;
	background-color: #999999;
}

.divWinTitle {
	border-bottom:1px solid black;
	background-color:#3366FF;
	height:auto;
	opacity: 0.8;
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
	-moz-opacity: 0.8;
	cursor:default;
}

.divWinTitle h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:smaller;
	background-color:#3366FF;
	display:inline;
}

.divWinContent {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:auto;
	padding:5px;
}
</style>

and HTML:

<p>
		<select name="family" id="family">
            <option value="1" selected="selected">Fam1</option>
            <option value="2">Fam2</option>
            <option value="3">Fam3</option>
    	</select>
        <script type="text/javascript">
			var familyPrompt = new divWindow('families','family','family_name','promptFam');
			familyPrompt.init();
		</script>
        <a href="javascript:void(0)" onclick="familyPrompt.show();" title="add new family">Add</a>
    	<!--<a href="javascript:void(0)" onclick="new divWindow('families','family','family_name','promptFam');" title="add new family">Add</a>-->
    </p>

Any help is greatly appreciated...