JavaScript Forum

**harty83** · 11:48 PM

Hello. I have what I feel to be a huge request. I am developing a very dynamic search page that will search mysql tables via queries. The query part is not the problem. The problem I am having is in developing the dynamic form! Here is the process of what I want it to look like (I have seen it done and I'm assuming it's in javascript):

User selects item from drop down box -> another drop down box appears (by "appears" I mean for it to go from invisible to visible) with additional options; user selects an option -> an input text field appears (invisible to visible) -> a user enters search terms

Now this is the key: when the user selects from the first list or when the user enters a search term, a new row with the same dropdown menus is created so that the user can start the process over with a second, third, etc search criteria.

Does that make sense? I can conceptualize in my head how to create the drop down menus, the input texts, and how to dynamically have them appear, etc. But I have no clue how to get new rows to show up and to have them labeled differently so that I can draw from them in php.

A two row example is all I am looking for (an initial row and a created row after the first row search fields have been selected). I can take it from there. Even some ideas of conceptually how to do this will be appreciated.

Thanks!

**funkdaddu** · 12:47 AM

I did something simliar in this thread:
http://www.webmaster-talk.com/javasc...own-menus.html

Take a look, let me know if that helps...

**harty83** · 07-20-2006, 10:29 AM

Thanks! I can use that to populate the select options, but do you have any clue who I would make new rows appear?

Here is the program I use at work. Unfortunately, I do not have access to the source it uses.

1) Select what to search and the next text box appears with search options specific to the box before it and an input box appears after that which is specifc to the box before it.

2) A new row appears each time the first select box is changed

Thanks!

**funkdaddu** · 07-20-2006, 08:08 PM

OK, ready for this one?:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style>
button {
	vertical-align: middle;	
}

		</style>
		<script type="text/javascript"><!--
var searchFieldNames = new Array("Choose one...","Department Name","Last Name","First Name","Product Description");
var searchFieldValues = new Array("","deptname","lastname","firstname","proddesc");

var searchOperators = new Array("equals","contains","starts with");
var lineNum = 0;

function createNewLine() {
	lineNum++;
	var addButton = document.createElement("button");
	addButton.setAttribute("type","button");
	addButton.appendChild(document.createTextNode("+"));
	addButton.onclick = createNewLine;
	
	var removeButton = document.createElement("button");
	removeButton.setAttribute("type","button");
	removeButton.appendChild(document.createTextNode("-"));
	removeButton.onclick = function() {
				var el = this.parentNode;
				el.parentNode.removeChild(el);
		}
	
	var newLine = document.createElement("div");
	var searchBox = document.createElement("select");
	searchBox.setAttribute("name","searchfield"+lineNum);
	for (x in searchFieldNames) {
		searchBox.options[x] = new Option(searchFieldNames[x],searchFieldValues[x]);
	}

	var operatorBox = document.createElement("select");
	operatorBox.setAttribute("name","searchoperator"+lineNum);
	for (y in searchOperators) {
		operatorBox.options[y] = new Option(searchOperators[y],searchOperators[y]);
	}

	var searchQueryBox = document.createElement("input");
	searchQueryBox.setAttribute("type","text");
	searchQueryBox.setAttribute("name","searchquery"+lineNum);
	
	newLine.appendChild(searchBox);
	newLine.appendChild(operatorBox);
	newLine.appendChild(searchQueryBox);
	if (document.getElementById("searchOptions").childNodes.length > 0) {
		newLine.appendChild(removeButton);
	}
	newLine.appendChild(addButton);
	document.getElementById("searchOptions").appendChild(newLine);
}

function resetAll() {
	document.FormName.q.disabled = "true";
	for (c in inputsToClear) {
			alert(inputsToClear[c].length);
		for (i in inputsToClear[c]) {
			alert(i);
			//inputsToClear[c].options[0] = null;
		}
	}
}
window.onload = createNewLine;
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form action="yourscript.php" method="get" name="FormName" id="FormName">
		<div id="searchOptions"></div>
		<input type="submit"/>
		</form>
	</body>

</html>

**harty83** · 08-02-2006, 05:45 PM

That got me rolling! Thanks!!

Here is what I ended up doing. Bear in mind that this only the javascript and html part in my php file so some of it may or may not make sense. This runs within Joomla. I made it so that it creates and deletes a new line without the buttons. I also made it so that it populated the drop downs based on the initial selection.

If anyone has any suggestions for cleaning up the code, let me know! Thanks again!

Code:

<script type="text/javascript">

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

function hideshow() {
  if (browserType == "gecko" ){
     document.poppedLayer = eval('document.getElementById(\'searchstuff\')');
     document.poppedLayer2 = eval('document.getElementById(\'submitbtn\')');}
  else if (browserType == "ie"){
     document.poppedLayer = eval('document.all[\'searchstuff\']');
     document.poppedLayer2 = eval('document.getElementById(\'submitbtn\')');}
  else{
     document.poppedLayer = eval('document.layers[\'`searchstuff\']');
     document.poppedLayer2 = eval('document.getElementById(\'submitbtn\')');}

if(document.poppedLayer.style.display == "none"){
  document.poppedLayer.style.display = "block";
  document.poppedLayer2.style.display = "block";
}
else{
  document.poppedLayer.style.display = "none";
  document.poppedLayer2.style.display = "none";
}
}

var searchFieldNames = new Array("---","Buyer Number","Item Number","Location","Lot Number","Misc Information","Product Name","SKU","Status");
var searchFieldValues = new Array("---","buyer","item","location","lot","misc","name","sku","status");

var lineNum = 0;

function createNewLine() {

    lineNum++;
/*    
    var addButton = document.createElement("button");
    addButton.setAttribute("type","button");
    addButton.appendChild(document.createTextNode("+"));
    addButton.onclick = createNewLine;
    
    var removeButton = document.createElement("button");
    removeButton.setAttribute("type","button");
    removeButton.appendChild(document.createTextNode("-"));
    removeButton.onclick = function() 
        {
        var el = this.parentNode;
        el.parentNode.removeChild(el);
        }
*/    
    var newLine = document.createElement("div");
    newLine.setAttribute("id","newline"+lineNum);
    
    var searchBox = document.createElement("select");
    searchBox.setAttribute("name","searchfield"+lineNum);
    searchBox.setAttribute("onChange","update1("+lineNum+")");
    searchBox.setAttribute("id","searchfield"+lineNum);

    for (x in searchFieldNames) 
    {
        searchBox.options[x] = new Option(searchFieldNames[x],searchFieldValues[x]);
    }
    
    newLine.appendChild(searchBox);
    
/*    if (document.getElementById("searchOptions").childNodes.length > 0) 
    {
        newLine.appendChild(removeButton);
    }
    newLine.appendChild(addButton);
*/
    document.getElementById("searchstuff").appendChild(newLine);

}

function update1(lineNum){
    var whattodo=document.getElementById("searchfield"+lineNum).value;
    if (whattodo=="---")
    {
        var temp=0;
        while (temp<=25)
        {
            whattodo=document.getElementById("searchfield"+(lineNum+temp));
            if (whattodo==null)
            {
                temp=temp+1;
            }
            else
            {
                temp=26;
            }
        }    
        
        if (whattodo==null)
        {    
            var oNodeToRemove = document.getElementById("searchoperator"+lineNum);
            oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
        
            oNodeToRemove = document.getElementById("searchquery"+lineNum);
            oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
        }
        else
        {    
            var oNodeToRemove = document.getElementById("searchfield"+lineNum)
            oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
            
            whattodo = document.getElementById("searchoperator"+lineNum);
            if (whattodo!=null)
            {
                oNodeToRemove = document.getElementById("searchoperator"+lineNum);
                oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
            }
            oNodeToRemove = document.getElementById("searchquery"+lineNum);
            oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
            
        }
    }        
    else
    {    
        whattodo = whattodo=document.getElementById("searchfield"+lineNum).value;
        var oNodeToRemove = document.getElementById("searchoperator"+lineNum);
        if (oNodeToRemove != null)
        {
            oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
            oNodeToRemove = document.getElementById("searchquery"+lineNum);
            if (oNodeToRemove != null)
            {
                oNodeToRemove.parentNode.removeChild(oNodeToRemove);    
            }
        }
        
        
        if(whattodo=="sku")
        {
            var searchOperators = new Array("=",">=","<=",">","<");
            var searchOperatorValues = new Array("=",">=","&LT;=",">","&LT;");
            
            var searchQueryBox = document.createElement("input");
            searchQueryBox.setAttribute("type","text");
            searchQueryBox.setAttribute("name","searchquery"+lineNum);
            searchQueryBox.setAttribute("id","searchquery"+lineNum);

        }
        else if(whattodo=="status")
        {
            var searchOperators = new Array("Has Been","Has Not Been");
            var searchOperatorValues = new Array("Y","N");
            
            var statusOptions = new Array("Tested","Photographed","Listed","Sold");
            var statusOptionValues = new Array("tested","pics","listed","sold");

            var searchQueryBox = document.createElement("select");
            searchQueryBox.setAttribute("name","searchquery"+lineNum);
            searchQueryBox.setAttribute("id","searchquery"+lineNum);
            
            for (x in statusOptions) 
            {
                searchQueryBox.options[x] = new Option(statusOptions[x],statusOptionValues[x]);
            }
        }
        else
        {
            var searchOperators = new Array("Equals","Contains");
            var searchOperatorValues = new Array("=", "LIKE");

            var searchQueryBox = document.createElement("input");
            searchQueryBox.setAttribute("type","text");
            searchQueryBox.setAttribute("name","searchquery"+lineNum);
            searchQueryBox.setAttribute("id","searchquery"+lineNum);
        }

        var operatorBox = document.createElement("select");    
        
        operatorBox.setAttribute("name","searchoperator"+lineNum);
        operatorBox.setAttribute("id","searchoperator"+lineNum);
        
        for (y in searchOperators) 
        {
            operatorBox.options[y] = new Option(searchOperators[y],searchOperatorValues[y]);
        }
        
        document.getElementById("newline"+lineNum).appendChild(operatorBox);
        document.getElementById("newline"+lineNum).appendChild(searchQueryBox);
    
        var needtocreate = document.getElementById("searchfield"+(lineNum+1));
        if (needtocreate == null)
        {
        createNewLine();
        }
    }
}

function clearcat(){
document.getElementById("category_id").value = '';
document.getElementById("search").click();
}
window.onload = createNewLine;
</script>

<form>
<div style="text-align:right;"><input type=button onClick="hideshow()" value="Toggle Advanced Search">&nbsp;&nbsp;&nbsp;</div>
</form>
<form style="" action="<?php $_SERVER['PHP_SELF'] ?>" method="get">
<br />
<div id="searchstuff" style="display:none; text-align:right;"></div>
<br><div id="submitbtn" style="display:none; text-align:right;">
<b>Sort By:</b>
<select name="sortby" class="inputbox">
    <option value="product_name">Product Name</option>
    <option value="product_sku">Product SKU</option>
</select>
<select name="direction" class="inputbox">
    <option value="">Ascending</option>
    <option value="DESC">Descending</option>
</select>
<input type="submit" value="search" name="search" id="search" onClick="clearcat()"/>
<input type="hidden" name="page" value="product.product_list" /> 
<input type="hidden" name="option" value="com_virtuemart" />
<br>
------------------------------------------------------------------
<br>

<b>Browse by Category:<b>
    <select class="inputbox" id="category_id" name="category_id" onchange="window.location='<?php echo $_SERVER['PHP_SELF'] ?>?option=com_virtuemart&page=product.product_list&category_id='+document.getElementById('category_id').options[selectedIndex].value;"><option value=""><?php echo _SEL_CATEGORY ?></option><?php $ps_product_category->list_tree( $category_id ); ?></select>&nbsp;&nbsp;&nbsp;
<br><br>
</div>
</form>