Web Analytics Made Easy -
StatCounter Advanced form options - CodingForum

Announcement

Collapse
No announcement yet.

Advanced form options

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Advanced form options

    I have a text box which I want users to be able to type text into. If they do not know their options I want them to be able to click expand and show options like a drop down menu (select form item).

    I lot like this page

    http://www.tigerair.com/sg/en/

    Any ideas how I can get this?

  • #2
    Does this meet your requirement?
    https://jsfiddle.net/Sempervivum/mm2wyc4x/4/

    Comment


    • #3
      If you want to create a drop down list then you can simply use CSS and java-script to create it. Check this tutorial for designing a drop-down list:
      How To Create a Dropdown Menu With CSS and JavaScript
      Claire
      Hire PHP Developers

      Comment


      • #4
        You don't need JavaScript to create dropdown menus - search for 'son of suckerfish' for the second generation of CSS only drop down menus.
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment


        • #5
          This is fairly easy to do! It just needs some basic JQuery:

          HTML:
          Code:
          		<h1> Input Select Example: </h1>
          
          		<form>
          			<input type="text" id="input">
          		</form>
          		
          		
          			<div class="example-div">
          				<h1> Class Selected </h1>
          			</div>
          CSS:
          Code:
          		.example-div {
          				display: none;
          				border: 2px solid black;
          				padding: 40px;		
          			}
          			
          			.selected {
          				display: inline-block;
          			}
          JQuery:
          Code:
          		$('input').focusin(function() {
          				$(".example-div").addClass("selected");
          			});
          			
          			$('input').focusout(function() {
          				$(".example-div").removeClass("selected");
          			});
          Codepen: Input Select

          Hope This Helps!

          Comment


          • #6
            If you are going to use JavaScript then don't bother with jQuery - the native code is no longer than the jQuery code but without the jQuery library. Of course if you use JavaScript (or JQuery which itself is just a huge JavaScript) then your dropdowns will be broken unnecessarily when JavaScript is disabled.

            This can be done entirely with HTML - no JavaScript needed.

            Code:
            <h1> Input Select Example: </h1>
            
            <form>
            <input type="text" list="input1">
            <datalist id="input1">
            <option value="option one">
            <option value="option two">
            <option value="option three">
            </datalist>
            </form>
            Last edited by felgall; Sep 23, 2016, 05:36 PM.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment

            Working...
            X