www.webdeveloper.com
Results 1 to 4 of 4

Thread: HTML form

Hybrid View

  1. #1
    Join Date
    Mar 2006
    Posts
    5

    HTML form

    Hi
    I need some one to help me with my little problem
    I have a payment form Pay field has dropdown OPTION amount list.
    Here what I need to all the amounts can be in the list so I create input field that will allow user input amount by heand nf using check box JavaScript I hide this field so if box is checked input field is visible, but so as dropdown one.
    So what I need is help with check box hidin one field ( dropdown) and unhiode input field.
    I hope some one know how to do this


    Thanx
    Last edited by alev; 04-14-2011 at 04:03 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <link rel="StyleSheet" href="../../reset.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    window.onload=function() {
    document.getElementsByName('paymentvariable')[0].style.visibility = 'hidden';
    var aObj=document.getElementsByName('cbox')[0].onclick = function(){toggle(this);};
    };
    
    function toggle(obj) {
    var paymentfixed = document.getElementsByName('paymentfixed')[0].style;
    var paymentvariable = document.getElementsByName('paymentvariable')[0].style;
    if(obj.checked) {
        paymentfixed.visibility = 'hidden';
        paymentvariable.visibility = 'visible';
        }
    else {
        paymentfixed.visibility = 'visible';
        paymentvariable.visibility = 'hidden';
        }
    }
    </script>
    
    <style type="text/css">
    body {
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:0.8em;
    }
    </style>
    
    </head>
    <body>
    <form name="form1">
    <select name="paymentfixed">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <label>check for variable payment<input type="checkbox" name="cbox"></label>
    <input type="text" name="paymentvariable">
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Nov 2010
    Posts
    86

    Hiding and showing elements when you tick a checkbox

    You can use the checkox's "onclick" event to call a function. This event will fire even if the user uses the spacebar to tick/untick the box.

    I've made an example of hiding a drop-down box and showing a textbox in its place when you click a checkbox. You can see it here:

    http://webinterfacetricks.com/checkbox_changes/

    In theory it would be the onchange event, but some browsers don't fire this until the checkbox loses focus, so it wouldn't happen as soon as you check or uncheck it.
    Last edited by interfacetricks; 04-15-2011 at 08:58 AM.

  4. #4
    Join Date
    Nov 2010
    Posts
    86
    I should also mention there's a decision to make between using "element.style.visibility = 'hidden';" to hide the drop-down box, or using "element.style.display = 'none';".

    Each is suited for a diferent purpose. visibility='hidden' will mean the element still takes up the same space it would otherwise take up, it's just invisible. display='none' means it looks as if the element were never there.

    So it depends what effect you're going for. You can see an example of the first method in Fang's post, and my example uses the second method.

    Hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles