Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    austin, tx
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts

    From Text Box to List Dynamically

    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?
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    austin, tx
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by sftl99; 08-09-2005 at 12:58 AM.

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by sftl99
    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?
    Code:
    searchtext.parentNode.replaceChild(createSelect('searchtext', 'searchText', options), searchtext);
    That should fix it.
    Quote Originally Posted by sftl99
    i just noticed that this doesn't work in internet exploder, just in firefox
    Internet Explorer does not understand the addEventListener method.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Location
    austin, tx
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>
    Last edited by Johnny Lang; 08-09-2005 at 04:59 PM.

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Location
    austin, tx
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Location
    austin, tx
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".

  • #10
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Everything here works for me.
    Code:
    <!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>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •