SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: OnClick

  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question OnClick

    how can I make a list menu appear when I select an option from a drop down list or menu??? Note: it appears automatically next the previous one or where ever we want!

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you give more details?

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    okie. let's say I have a select drop list has many options. When I select on of them, another drop list, or text field.. ect appears from hidden to visible.

    Hope make it clear this time!

  4. #4
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <style>
    select
    {
     float: left;
     width: 100px;
    }
    </style>
    <script language="javascript">
    function show(obj)
    {
     document.getElementById(obj).style.display = '';
    }
    </script>
    <select id="one" onchange="show('two');">
     <option value="0"></option>
     <option value="1">1</option>
     <option value="2">2</option>
    </select>
    <select id="two" style="display: none;">
     <option value="0"></option>
     <option value="1">1</option>
     <option value="2">2</option>
    </select>

    I hope this helps

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks alot for your reply!

    I was trying this function but I couldn't make it right. Can u help me with that?

    <script>

    function changeme(id, action) {
    if (action=="hide") {
    document.getElementById(id).style.display = "none";
    } else {
    document.getElementById(id).style.display = "block";
    }
    }

    </script>



    <select name="select" id="select">
    <option>location_001</option>
    <option onclick="if(document.getElementById('select2').style.display=='block')
    {
    else {document.getElementById('select2').style.display='none';}">location_002</option>
    <option>location_003</option>
    <option>location_004</option>
    </select>


    <select name="select2" id="select2" style="display:block">
    <option>area_001</option>
    <option>area_002</option>
    <option>area_003</option>
    <option>area_004</option>

  6. #6
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <html>
        <head>
            <script language="javascript">
                function dgi(el)
            {
                return document.getElementById(el);
            }
            function hide_show(id, obj)
            {
                var b = dgi(id);
     
                if(obj.value == '2')
                {
                    b.style.display = '';
                }
                else
                    b.style.display = 'none';
            }
            </script>
    </head>
    <body>
        <select id="one" onchange="hide_show('two', this);">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select id="two" style="display: none;">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </body>
    </html>

    i hope that this will help you

  7. #7
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks alot trilli,

    it is really something. But how can I make it more flixible, whenever I choose option one another menus appear, and when I select option three another menus appear and so on.


    <select id="one" onchange="hide_show('two', this);">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>

  8. #8
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I am trying to make that script into for loop:

    wht I want to get is that whenever I select option one or two r three its another menue appear

    function dgi(el)
    {
    return document.getElementById(el); }
    function hide_show(id, obj) {

    for (var i=0; i <4; i++ ){var b = dgi(id);
    if(obj.value == 'i')
    { b.style.display = '';}
    else
    b.style.display = 'none';
    } }
    </script>
    </head>
    <body>
    <select id="one" onchange="hide_show('two', this);">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>
    <select id="two" style="display: none;">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>

    <select id="three" style="display: none;">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>

    <select id="three" style="display: none;">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>

  9. #9
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    can anyone tell me the answer?... I am relly new to avscript I don't have so much clue about it!

  10. #10
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    you should find freelance developer to solve your problem, i gave you solution, all you have to do is just upgrade it and you will have complete solution

    Example:
    Code HTML4Strict:
    <html>
        <head>
            <script language="javascript">
                function dgi(el)
            {
                return document.getElementById(el);
            }
            function hide_show(obj)
            {
               var a = dgi('first');
                var b = dgi('two);
                var c = dgi('three');
     
                if(obj.value == '2')
                {
                    b.style.display = '';
                    a.style.display = 'none';
                     c.style.display = 'none';
                }
     
     
                if(obj.value == '1')
                {
                    b.style.display = 'none';
                    a.style.display = '';
                     c.style.display = 'none';
                }
     if(obj.value == '3')
                {
                    b.style.display = 'none';
                    a.style.display = 'none';
                     c.style.display = '';
                }
            }
            </script>
    </head>
    <body>
        <select id="one" onchange="hide_show('two', this);">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
       <select id="first" style="display: none;">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select id="two" style="display: none;">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    <select id="three" style="display: none;">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </body>
    </html>

    this was not hard, all you need is just think about it.

  11. #11
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    thanks alot triLli! I am just new to javascript.
    if you could tell me wht's the best book or website for mastering javascript.

  12. #12
    SitePoint Member kompile's Avatar
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Somebody can help me please. How to create onclick it same with

    Payment method

    https://secure.elance.com/php/reg/ma...gnupsId=555209

    Code HTML4Strict:
    <form action="#" method="post">
    Music :<input type="radio" name="Suggestion">
    Hobby:<input type="radio" name="suggestion">
     
    </form>

    Then the problem. When the user click music button, automatic have what is the music type form.
    If it doesn't kill me it can only make me stronger


Bookmarks

Posting Permissions

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