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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic or cascading forms

    HI

    im trying to create a dynamic or cascading form so that when a user selects a drop down it populates the next one, then when they select the 2nd drop down it shows a text entry box depending on the value in the 2nd drop down.

    i have been trying to modify the script from here using ajax and asp but im not having much luck

    any help, suggestions or tutorials would be greatly appreciated!

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    show us what code you have. explain why you think it isn't working and what you've done to troubleshoot it.


    not that i don't love guessing and all....

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry for the late reply, i was trying a few different options

    the base code is below and i just want to modify it so that when someone selects a value in the 2nd drop down a text entry appears

    (ignore the table stuff im just making sure i can get the form working then ill css it)

    dyn_form.html
    Code:
    <table summary="" cellpadding=5>
    <tr >		
    		<td align=left><b>Select a Category</b></td><td colspan=2><div id="country_div">
    
    <select name="category" onchange="getSelect('category', this.value, subcatdiv);">
    <option value=""> -- Please Select a Category -- </option>
    <option value="Books">Books</option>
    <option value="Cars">Cars</option>
    <option value="Trees">Trees</option>
    <option value="Cool Sites">Cool Sites</option>
    </select>
    </div>
    
    </td></tr>	
    
    
    
    <tr >		
    <td align=left><b>Select a Sub-Category</b></td><td colspan=2>
    <div id="subcat_div">
    <select>
    <option value=""> --  --</option>
    </select>
    </div>
    
    
    </table>
    
    <script language="javascript" src="dyn_loader.js"></script>
    dyn_response.asp
    Code:
    <%
    ' Script (c) David Henderson 2005
    ' http://www.greatasp.co.uk
    ' Feel free to use this in your projects, but leave this reference intact
    
    ' Lets get the variable we passed
    search = request("search")
    str = request("str")
    
    
    ' Start off so that we can extend this in the future to more than one search
    select case search 
    
    
    case "category" 'this is the string passed all the way from the  javascript call
    
    'Respond witht select box to be placed in the div. This could be anything, 
    'but lets pass another select box back
    
    
    ' You can chenge the select tag to include an onSelect of the form:
    ' onchange="getSelect('*something else*', this.value, *destination div*);"
    ' This allows you to link a sequence of select boxes, based on the value of the last
    
    
      Response.Write( "<select name=""subcategory"">" )
      Response.Write( "<option value=""""> -- Please Select a Subcategory -- </option>" )
    
    'Now list the options that are available 
    'We could link into a database here, to search on the valure of "str", but lets
    'just use a static list 
    
    	select case str
    	
    	case "Books"
       Response.Write( "<option value=""The DaVinci Code"">The DaVinci Code</option>" )
     	 Response.Write( "<option value=""Hitchhiker's Guide to the Galaxy"">Hitchhiker's Guide to the Galaxy</option>" )
    	 Response.Write( "<option value=""Oxford English Dictionary"">Oxford English Dictionary</option>" )
       Response.Write( "<option value=""The Lord of The Rings"">The Lord of The Rings</option>" )
    	
    	case "Cars"
    
    	
    	 Response.Write( "<option value=""Ferrari"">Ferrari</option>" )
    	 Response.Write( "<option value=""Porsche"">Porsche</option>" )
    	 Response.Write( "<option value=""Clapped Out Old Banger"">Clapped Out Old Banger</option>" )
    	 
    	case "Trees"
    	
    	 Response.Write( "<option value=""Ash"">Ash</option>" )
    	 Response.Write( "<option value=""Oak"">Oak</option>" )
    	 Response.Write( "<option value=""Sycamore"">Sycamore</option>" )
    	 
    	case "Cool Sites"
    	
    	 Response.Write( "<option value=""http://www.greatasp.co.uk"">Greatasp</option>" )
    	 Response.Write( "<option value=""http://www.wizmymobile.com"">WizMyMobile.com</option>" )
    	 Response.Write( "<option value=""http://www.wizmybiz.com"">WizMyBiz.com</option>" )
    	
    	case else
    	
    	 Response.Write( "<option value="""">-- No Sub-Categories Found --</option>" )
    
    		 
    	 end select
    
    
    
      Response.Write( "</select>" )
    	
    	case else
    	
    	'Something has gone wrong
    		
    	end select
    %>
    and the dyn_loader.js is

    Code:
    /*
     Script (c) David Henderson 2005
     http://www.greatasp.co.uk
     Feel free to use this in your projects, but leave this reference intact
    */
    
    // declare new variables for each new div that you add, and link to the div by ID
    var subcatdiv = document.getElementById("subcat_div");
    
    
    
    function getSelect(selType,str, destination){
    	
    	if(str!=''){
    
    	 var doc = null; 
    
    // Make a new XMLHttp object
    
       if (typeof window.ActiveXObject != 'undefined' ) 
       { 
           doc = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       else 
       { 
           doc = new XMLHttpRequest(); 
       }
    	 
    // Load the result from the response page
    // Note the response page can be any page that returns the right result. 
    // I used ASP. PHP, PERL... etc could acheive the same result
    
    // ** As far a I know firefox will only load a document on the SAME domain!!
    
    		if (doc){ 	 
    		 doc.open("GET", "dyn_response.asp?search="+selType+"&str=" + str, false);
    	   doc.send(null);
    
    // Write the response to the div 		
    			destination.innerHTML = doc.responseText;
    
    		}else{
    		
    			destination.innerHTML = 'Browser unable to create XMLHttp Object';
    		}
    		
    }else{
    // Return the next select box back to the default
    		destination.innerHTML= '<select><option value=""> -- --</option></select>' ;
    }
    
    
    }


  •  

    Posting Permissions

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