-
October 29th, 2007, 12:30 PM
#1
Dynamic Form using Options
The basic idea of what I'm trying to do is let the user choose an option of a category to search by. However, one of the categories that has been asked to be included is suppose to be limited in what can be searched.
Code:
<form action="search.php" method="post" name="search" id="search">
<input type="hidden" name="search" value="Active" />
<p>
<select name="category" id="category" size="1">
<option value="Title">Title </option>
<option value="Author">Author </option>
<option value="Year">Year </option>
<option value="Key Word">Key Word </option>
<option value="Pub Number">Pub Number </option>
<option value="Program">Program</option>
<option value="All">All </option>
</select>
<script type="text/javascript">
//pseudo code
if(selected value == "Program")
{
//Create a second option list populated with program areas.
}
else
{
//Create a text box: <input type="text" name="srchword" size="15" />
}
</script>
<input type="submit" name="submit" value="Submit" />
<input name="reset" type="reset" />
</p>
</form>
Is there anyway to do this without reloading the page? I keep running into a problem where the selected value is not being updated as the user changes its value.
-
October 29th, 2007, 01:21 PM
#2
Re: Dynamic Form using Options
This is actually very simple to do. Play around with the following code.
Code:
<script type="text/javascript">
function dostuff(val){
if(val == 'Program'){
var newselect = document.createElement('select');
newselect.setAttribute('name', 'whatever');
document.getElementById('appendstuff').appendChild(newtext);
newselect.options[0] = new Option('First Name', 'firstname');
newselect.options[1] = new Option('Last Name', 'lastname');
newselect.options[2] = new Option('E-mail', 'email');
}
else{
var newtext = document.createElement('input');
newtext.setAttribute('type', 'text');
newtext.setAttribute('name', 'srchword');
newtext.setAttribute('size', '15');
document.getElementById('appendstuff').appendChild(newtext);
}
}
</script>
<form action="search.php" method="post" name="search" id="search">
<input type="hidden" name="search" value="Active" />
<p>
<select name="category" id="category" size="1" onchange="dostuff(this.value)">
<option value="Title">Title </option>
<option value="Author">Author </option>
<option value="Year">Year </option>
<option value="Key Word">Key Word </option>
<option value="Pub Number">Pub Number </option>
<option value="Program">Program</option>
<option value="All">All </option>
</select>
<div id="appendstuff"></div>
<input type="submit" name="submit" value="Submit" />
<input name="reset" type="reset" />
</p>
</form>
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
October 31st, 2007, 12:48 PM
#3
Re: Dynamic Form using Options
Thanks a lot. This helped me out tremendously. I did have to change some code, as what yours did had no default text box show. It also just appended rather than replacing the box. Here's the solution I got after some modifications, in case anyone else needs it.
Code:
function searchBox(val)
{
var programs = new Array('option1', 'option2', 'option3');
if(val == 'Program')
{
var old = document.getElementById('srch');
var cat = document.createElement('select');
cat.setAttribute('name', 'srchword');
cat.setAttribute('id', 'srch');
document.getElementById('searchbox').replaceChild(cat, old);
for(i = 0;i < programs.length;i++)
{
cat.options[i] = new Option(programs[i], i);
}
}
else
{
var old = document.getElementById('srch');
var sbox = document.createElement('input');
sbox.setAttribute('type', 'text');
sbox.setAttribute('name', 'srchword');
sbox.setAttribute('size', '15');
sbox.setAttribute('id', 'srch');
document.getElementById('searchbox').replaceChild(sbox, old);
}
}
<form action="search.php" method="post" name="search" id="search">
<input type="hidden" name="search" value="Active" />
<p>
<select onChange="searchBox(this.value)" name="category" id="category" size="1">
<option selected value="Title">Title </option>
<option value="Author">Author </option>
<option value="Year">Year </option>
<option value="Key Word">Key Word </option>
<option value="Pub Number">Pub Number </option>
<option value="Program">Program</option>
<option value="All">All </option>
</select>
<span id="searchbox"><input type="text" name="srchword" size="15" id="srch" /></span>
</p>
</form>
Once again, thank you for the help.
Last edited by Culperat; October 31st, 2007 at 12:50 PM.
Reason: Removing work url information and making ambiguous.
-
October 31st, 2007, 03:44 PM
#4
Re: Dynamic Form using Options
You're welcome. Glad to help. Good luck with the rest!
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|