CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Jul 2007
    Posts
    36

    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.

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    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.

  3. #3
    Join Date
    Jul 2007
    Posts
    36

    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.

  4. #4
    Join Date
    May 2002
    Posts
    10,943

    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
  •  





Click Here to Expand Forum to Full Width

Featured