|
HTML - Filterable Site Based On User Populated Text Fields
Hello, I am trying to create a page where the user can select four of their best skills and put in their past experience (in years) in previously defined boxes and have that automatically update the "results." But, i need the results to be filterable to match the top three skills exactly. So i put in skils A,B,C,D and i get results of jobs that "match" A,B,C. I have created a javascript for show/hide but i dont know how to add this updatable/filterable content. Here is a demo of my page
Quote: <html> <head> <script type="text/javascript"> <!-- function experience(element_id) { var results = document.getElementById(element_id + "_Results"); var element = document.getElementById(element_id); results.value = element.value; } </script> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> <title></title> </head> <body> <form name="compass"> <table border="1" width="100%"> <tr> <td colspan="2">Top Competencies</td> </tr> <tr> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> </tr> <tr> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> </tr> <tr> <td colspan="1"><input type="text" name="1" size="100%" value="Consulting to senior leadership" disabled></td> <td colspan="1"><input type="text" id="Requirements1" name="Requirements" onChange="experience('Requirements1')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td> <td colspan="1"><input type="text" id="Requirements2" name="Requirements" onChange="experience('Requirements2')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td> <td colspan="1"><input type="text" id="Requirements3" name="Requirements" onChange="experience('Requirements3')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td> <td colspan="1"><input type="text" id="Requirements4" name="Requirements" onChange="experience('Requirements4')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areas" disabled></td> <td colspan="1"><input type="text" id="Requirements5" name="Requirements" onChange="experience('Requirements5')" value="Enter Years"></td> </tr> <tr> <td colspan="4">Results</td> </tr> <tr> <td colspan="1"><div style="display:;" id="script"><input type="text" name="1" size="100%" value="Consulting to senior seadership" disabled></td> <td colspan="1"><input type="text" id="Requirements1_Results" name="Requirements1_Results" disabled></td> </tr> <tr> <td colspan="1"><div style="display:;" id="script2"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td> <td colspan="1"><input type="text" id="Requirements2_Results" name="Requirements2_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td> <td colspan="1"><input type="text" id="Requirements3_Results" name="Requirements3_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td> <td colspan="1"><input type="text" id="Requirements4_Results" name="Requirements4_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areass" disabled></td> <td colspan="1"><input type="text" id="Requirements5_Results" name="Requirements5_Results" disabled></td></div> </tr> <p><a href="#" onclick="showhide('script'); return(false);">hide again</a></p> </table> </form> </body> </html> That is the page, i know it looks long and codey but its just because it has many examples. I really would appreciate any help! Thanks so much for all your past help guys/gals Similar Tutorialshi guys, im new here, and by no means a web designer/coder. however i do dabble in some HTML to save time & money. at present, customers sign up on our website, the form sends that data to our database. (for this we use the pure360.com API) upon submission, a trigger email is sent to that customers email with a voucher, the voucher says to Ryan (ryan@email.com) etc. which is fine. however we would prefer it to be online instead of via email. so customers sign up, data is sent from pure360 form to our database then the success URL shows the voucher on screen with their data pre populated into the fields. could anybody help me with the code to do this? i have attached the basic signup form coding. thanks in advance, Ryan I didn't know how to title this sorry, I did a search and there was plenty on the mailto tag, but I just need something very simple done (I'm hoping its simple) So basically this is my code: Code: <a href="mailto:technical.support%40lk-electronics%2ecom? subject=Missing Page/URL &body=Webpage Url error occured from: -enter web address here- %0A%0A If you have any additional comments to add, do so below the line%0A%0A Thank You! and sorry for the inconvenience%0A%0A LK Electronics%0A%0A">here</a> All I want is it to have a horizontal line in it after LK electronics, and upon searching I realized that you can't insert html, well you can but if the person's mail client doesn't have html enabled, then all they're going to see is my html tags, is there a way to add in a line? The reason I'm trying to accomplish this, is basically it will all be pre-populated and they will enter the url the error occurred on, and if they have any additional comments I'd like a line separating all the pre-populated stuff. I have 3 Radio buttons . When user selects first Radio button a page(demo.html for example) should be displayed. similarly when he selects second radio button another page should be displayed. can anybody help me out solving this issue. Dear expert (Ok, i am new to this and should maybe not address this as a letter ) I hope someone can help me ... this is what i want to achieve (I am using frontpage) I want to create a table (this i can do!) that require a user input (number of guests). It then has SEVERAL options: - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later) - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation. a number of the above options, and a grand total on the bottom. I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works Can someone PLEASE help me, or point me in the right direction? (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn) Below is a link to the example .. http://www.ouma-se-kombuis.co.za/test.html Thank you! Hi again! I am thinking of another project. I wanted to make/remake our software user manual in HFLM file. I want its file size to be small as possible, so I do not want to use CMS. How should I accomplish it. I want to use a temple with all the links in the header. Your comments and suggestions are highly appreciated. Thanks a lot. I have a site that I would like to restrict anyone from viewing in a certain part of the US (A state for example) Is this even possible? I don't know if this is a crazy question or not? Any Advice is greatly appreciated. thanks in advance. Hey guys very new, have this cool idea for a site and would like to go with it. How can I get a map like this sites. www.skatespots.net Where users can post on the map for others to see. Thank you Sorry if this isn't in the right place. Ok, I set up this nice site of mine, and I have all my favorite games on it. It is a games site for my friends and I. (Blueoranges.co.cc if you wanted to know.) Because of the fact that I have made the site easily editable by adding all the game's sizing options to a CSS sheet, and made each set of 7 pages a carbon copy of one another, I was thinking, well if my friends want to add a game, how could I let them? My idea was to allow them to log in, enter the URL for a game, upload their own screenie, and the server would copy the existing code and set it all up for use. Well, I'm totally self taught at HTML. Although I could figure out the semantics and methods of doing things, I don't know how to make a user's input be stored on a server. To oversimplify it, like when a user posts a post on a forum, the server edits the web page and adds the content, then updates the web page... So... How do I get a user's input to be added to the code of a page? I know my post is confusing, but I'm confused myself. Oh well. how can i make the user add his own url to a table in the site? Hi everyone, What I am asking is more complicated than the thread title says. Can someone please tell me how, or post some code to show how I can make input fields with these properties: 1. Make text appear in an input field whilst off focus but dissapear whilst on focus, re-appear again if put back on focus. 2. The user can type text in the field and edit it and when the input field is off focus the text he wrote remains there. 3. If the user completely erases the text he wrote and puts the input field off focus the default text (stated in 1.) re-appears. 4. Make a password input field without the default text (1.) being displayed as stars (hidden charaters) with same features as 1. , 2. , and 3. ofcourse. Can anyone please help me?... Evan Hi all! i have an annoying problem with a simple form, which accures only in explorer... the text fields respond to a click only at their very left end, or, if I give them a value, where the text actually show. How do I make it so that they will be "chosen" in response to a click anywhere within them? You can see a proto of the form at www.teleionholon.com/TH/form.html. This works great in Firefox, only explorer gives me a hard time! thank you so much! Shir Hey all, I'm having a problem with html input text fields. I'm trying to display a name in it but it only shows the first part of that name. Here is the part of the code I'm using for one of those : Code: <label>Name <span class="small">Name sent</span> </label> <input type="text" name="name" id="name" value=<?php echo $_POST["name"]; ?> /> If, as example, the name I'm getting from $_POST is : Alexander Johnson, there will only be Alexander in the text field. Note that if I create a really small function like this : Code: $name = $_POST["name"]; echo $name; Then the output will be Alexander Johnson instead of simply Alexander. Anyone knows what I'm doing wrong? (I'm using the labels and span class with css, but I don't think this is the problem. Help! How to put text in input fields? -------------------------------------------------------------------------------- Hi everyone, What I am asking is more complicated than the thread title says. Can someone please tell me how, or post some code to show how I can make input fields with these properties: 1. Make text appear in an input field whilst off focus but dissapear whilst on focus, re-appear again if put back on focus. 2. The user can type text in the field and edit it and when the input field is off focus the text he wrote remains there. 3. If the user completely erases the text he wrote and puts the input field off focus the default text (stated in 1.) re-appears. 4. Make a password input field without the default text (1.) being displayed as stars (hidden charaters) with same features as 1. , 2. , and 3. ofcourse. Can anyone please help me?... Evan I have created a nice Newsletter Registration form, but I would really like to modify the form so that instead of displaying the browsers default images for text fields, checkboxes, etc, I want it to display my images that I have created. Is this possible without stepping into flash? Thanks Guys! -NH Is there a way to ensure that text size renders well even if screen resolution is extreme? Thanks... Here's the scenario. There's a heading on the page that says "Latest News". This might say something like "Next event is 4 May". Obviously on 5 May, the text becomes out of date. But it would be OK if the heading changed to "Recent News" BTW: I'm not a techie . I'm working on my site www.fastvacationrentals.com and I've been trying to find or deveolp (I don't know how hard this would be a word based text editor to add onto a text field. Such as the one they use on this site when we respond to messages. I don't know if there is a easy javascript, html, or php script out there that is free to use. I've tried to search for ones and have not had much luck. I only think I'm interested in ones that do not have advertisment shown. I did find a couple that looked just liked microsoft word in the text box with no tags added as this does then converts it all to html before it posts. Would have worked great if hadn't of cost anything/advertisments also. The other thing I'm having problems with is when people create listings they choose the location for where there cabin is at. States are easy but when you get to cities people spell things wrong and it doesn't look good in the results nor the search. I've seen sites where you select the state then it changes and shows all the cities there. Is this something I can get premade also for free. I know exactly how to make it but I also know that I wont be able to cover all the cities. Having all the correct cities names spelt the same would make my search work better with the database. Thanks for reading all of this and I hope someone has some good advice/answers. BTW I'm sorry you cant exactly see the form your working on since you have to be a user but I'm sure you'll know what I'm talking about and if you don't feel free to make a account and look around. Hello.... I have a problem today and I do not know how to over come this problem. If this is in the wrong place, please tell me and I will put it in the right place. Anyway. Today I am trying to make a webpage, where the user, the admin, is able to edit the page to input text. Almost like when you make a blog post and you have a text box and you type what you want and you click submit or post and it goes onto a page. Almost like wordpress. I want to make a custom page from the ground up where there are different divisions of the page and the admin can input or edit text/pictures at anytime. Thank you in advance. Is there a way through HTML forms, CGI, Perl, or javascript to have a visitor to a page edit the text of an html document? Example: I have a fantasy basketball league website with roster pages for each participant. I want to allow them to login to their individual page and move their players around from a bench position to a starter and vice versa. I use Tripod as my hosting site. Thanks for any suggestions!!! How can I make it so that the end user can choose between three text sizes like is done here http://www.tsn.ca/nhl/story/?id=294191 Thanks in advance BW |
|||||||