...

View Full Version : From Text Box to List Dynamically



sftl99
08-08-2005, 10:05 PM
I have only two fields in my search form, "searchtext" and "SearchBy". It is being submitted to a php search form so I need to keep those two field names in tact. What I am wanting to happen is when the user selects the "Business Type" from the list, the text box turns into a list itself. The reason why is "Type" has only 3 options it could be, whereas the others are a huge variety of different choices so I want to make it more user friendly so they don't have to know the exact words by which to search for. Does that make sense?

<input name="searchtext" type="text" value=" :: enter search ::">
<select name="SearchBy" style="background-color:#ffffff">
<option value="CustomerNumber">Cust #</option>
<option value="CustomerName" selected>Company Name</option>
<option value="Type">Business Type</option>
</select>

hemebond
08-08-2005, 11:33 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>65503</title>
</head>
<body>
<form action="65503.html" method="post">
<fieldset>
<legend>Search</legend>
<select id="searchby" name="SearchBy">
<option value="CustomerNumber">Cust Number</option>
<option value="CustomerName" selected="selected">Company Name</option>
<option value="Type">Business Type</option>
</select>
<input id="searchtext" name="searchtext" type="text">
</fieldset>
</form>

<script type="text/javascript">
document.getElementById('searchby').addEventListener('change', swapSearchtext, true);

var textNode = document.getElementById('searchtext').cloneNode(true);

function swapSearchtext(e)
{
var searchtext = document.getElementById('searchtext');

if(e.currentTarget.value == 'Type')
{
textNode = searchtext.cloneNode(true);
searchtext.parentNode.replaceChild(createSelect('searchtext', 'searchtext', options), searchtext);
}
else
{
searchtext.parentNode.replaceChild(textNode, searchtext);
}
}

function createSelect(id, name, options)
{
var select = document.createElement('select');
select.setAttribute('id', id);
select.setAttribute('name', name);

for(var i = 0; i < options.length; i++)
{
var text = document.createTextNode(options[i][1]);

var option = document.createElement('option');
option.setAttribute('value', options[i][0]);
option.appendChild(text);

select.appendChild(option);
}

return select;
}

var options = new Array();
options.push(new Array('value', 'text'));
</script>
</body>
</html>

sftl99
08-08-2005, 11:50 PM
perfect as far as functionality, the only problem now is that either the field name or the actual value is not getting submitted through the php correctly. could this be because it is changing into Searchtext from searchtext? i.e. a capitalization issue? is there a workaround for this or do i need to explore my PHP?

edit...
i just noticed that this doesn't work in internet exploder, just in firefox

hemebond
08-09-2005, 12:05 AM
perfect as far as functionality, the only problem now is that either the field name or the actual value is not getting submitted through the php correctly. could this be because it is changing into Searchtext from searchtext? i.e. a capitalization issue? is there a workaround for this or do i need to explore my PHP?
searchtext.parentNode.replaceChild(createSelect('searchtext', 'searchText', options), searchtext);That should fix it.
i just noticed that this doesn't work in internet exploder, just in firefoxInternet Explorer does not understand the addEventListener method.

sftl99
08-09-2005, 03:04 PM
I changed my PHP code to GET so I could see in the URL what was actually being searched for. It seems that once I have clicked "Business Type" the 'select' field is no longer recognized in the form and is not being submitted at all. Even if I click "Business Type" then click back to one of the other options, the "searchtext" is lost by the form when submitted. Does this make sense? Any ideas of what is going on?

Johnny Lang
08-09-2005, 03:47 PM
<HTML>
<Head>
<Script Language=JavaScript>

function initView(isForm,isChoice){

if (isChoice == "Type")
{
isForm.bizTypes.style.display = 'inline';
isForm.searchtext.style.display = 'none';
isForm.searchtext.disabled = true;
}
else {
isForm.bizTypes.style.display = 'none';
isForm.searchtext.style.display = 'inline';
isForm.searchtext.disabled = false;
}
}

</Script>
</Head>
<Body>
<Form name='searchForm'>

<input name="searchtext" type="text" value=" :: enter search ::">

<select name="SearchBy" style="background-color:#ffffff" onchange="initView(this.form,this.value)">
<option value="CustomerNumber">Cust #</option>
<option value="CustomerName" selected>Company Name</option>
<option value="Type">Business Type</option>
</select>

<select name='bizTypes' style='position:absolute;display:none'>
<option value='null' selected > Choose a Type </option>
<option value='type1' > Type 1 </option>
<option value='type2' > Type 2 </option>
<option value='type3' > Type 3 </option>
</select>

</Form>
</Body>
</HTML>

sftl99
08-09-2005, 04:28 PM
Thanks, that works perfectly. I had to do a few tweaks in my PHP, but that's easy for me, it's the javascript that I don't understand.

Oh, and I took out the position absolute cause it was doing some funky stuff with my form layout.

Johnny Lang
08-09-2005, 04:38 PM
You're welcome. Sorry about that position:absolute, don't know it slipped in there. I normally don't include it in this sort of thing. Hope you saw that I edited my original post. I thought that the input box should be disabled so that it doesn't submit when a business type is selected.

sftl99
08-09-2005, 04:45 PM
yeah, the input box is not submitting so i must have caught that. the bizType IS submitting by default when the page loads, but it was easy to workaround that via PHP and by making the value "" instead of "null".

hemebond
08-09-2005, 10:32 PM
Everything here works for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>65503</title>
</head>
<body>
<form action="65503.html" method="get">
<fieldset>
<legend>Search</legend>
<select id="searchby" name="SearchBy">
<option value="CustomerNumber">Cust Number</option>
<option value="CustomerName" selected="selected">Company Name</option>
<option value="Type">Business Type</option>
</select>
<input id="searchtext" name="searchText" type="text">
<input type="submit">
</fieldset>
</form>

<script type="text/javascript">
document.getElementById('searchby').addEventListener('change', swapSearchtext, true);

var textNode = document.getElementById('searchtext').cloneNode(true);

function swapSearchtext(e)
{
var searchtext = document.getElementById('searchtext');

if(document.getElementById('searchby').value == 'Type')
{
textNode = searchtext.cloneNode(true);
searchtext.parentNode.replaceChild(createSelect('searchtext', 'searchText', options), searchtext);
}
else
{
searchtext.parentNode.replaceChild(textNode, searchtext);
}
}

function createSelect(id, name, options)
{
var select = document.createElement('select');
select.setAttribute('id', id);
select.setAttribute('name', name);

for(var i = 0; i < options.length; i++)
{
var text = document.createTextNode(options[i][1]);

var option = document.createElement('option');
option.setAttribute('value', options[i][0]);
option.appendChild(text);

select.appendChild(option);
}

return select;
}

var options = new Array();
options.push(new Array('value', 'text'));

swapSearchtext();
</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum