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

    How do i make onChange textbox?

    Hello,

    I have been searching this for 24 hours,couldn't find good code.I want a script like this;

    There will be 2 option value,1st is yes,2nd is no.If person select "yes" textbox will appear below selection area,if person select "no" a link will appear,and will redirect you to there when you click on it.If you can help i will be so happy.Thanks.Good bye.

    NOTE:
    JS will be used in PHP..
    Last edited by DraquLa_; 07-04-2006 at 11:01 PM.

  • #2
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    You mean

    <input type='text' onchange='change()' />?

    with a function like:

    <script type='text/javascript'>
    // <![CDATA[
    function change() {
    alert ("you have changed the textbox...")
    }
    // ]]>
    </scrpt>

    or what? From all I understood was: how to make an onchange event...

    please explain.

    Thanks

    Hope it helps

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Location
    london
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think this might help :

    <select id="name " onchange="DropDownMenuList('name')">

    <option> yes </option>
    <option value= whatever.html > no </option>

    </select>

    <textarea type="text" id="Iname" name="name" class="hide">
    </textarea>

    function DropDownMenuList(e)
    {
    var list=document.getElementById(e)

    if(list.options[list.selectedIndex].text == “ yes”)
    {
    document.getElementById(“I”+e).className = "view";
    }

    else

    location.href=list.options[list.selectedIndex].value
    }


    Css style sheets // this allows to display or not

    .hide {
    display: none;
    }

    .view {
    display: inline;
    }


    and if u still not sure try using this website it may be the one to help figure it out, it may be similar to what u want
    http://www.trans4mind.com/personal_d....htm:thumbsup:

  • #4
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for bothering to reply,but codes that you have given,didnt work.

    http://www.wow-europe.com/support/we...lt.html?lan=en

    here is an example how form will work,page down a little and select Category in problem type section,when you select"connection problem" text box appearing below select section.I want to make form like this,if you know how to make,please write,thanks good bye.

  • #5
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DOM method

    DraquLa,

    There are basically two ways to do it. One is to put the textarea and the link in your HTML, and assign them "display: none;" styles. You then create a javascript function that fires when the option list changes, evaluates the selected index, and changes the "display" styles accordingly. That is the method akg250978 is trying to explain but I didn't study it closely enough to know why it didn't work for you.

    The second method is what I'll show you. What this does is use javascript to dynamically generate the new elements based on the onChange event. This may seem more convoluted at first, but I think it is good to learn how to generate elements this way.

    let me know if you have problems or questions.

    <script>
    function showresult() {
    // clean up div if necessary
    var result = document.getElementById('result');
    var len = result.childNodes.length;
    for(var i = 0; i < len; i++)
    {
    result.removeChild(result.childNodes[i]);
    }
    //evaluate option
    if (document.getElementById('selOption').selectedIndex == 1)
    {
    //dynamically insert textarea
    var newinput = document.createElement('textarea');
    var inputIdName = 'textarea';
    newinput.setAttribute('id',inputIdName);
    newinput.setAttribute('rows','3');
    newinput.setAttribute('cols','30');
    document.getElementById('result').appendChild(newinput);
    }
    else if (document.getElementById('selOption').selectedIndex == 2)
    {
    //dynamically insert link
    var a=document.createElement('a');
    a.setAttribute('id','link');
    var tdText=document.createTextNode('Link Text Goes Here');
    a.appendChild(tdText);
    a.href='http://www.informationarchitech.com';
    document.getElementById('result').appendChild(a);
    }
    }
    </script>

    <div id="optionbox">
    <form id="frmExample" name="frmExample">
    <select id="selOption" name="selOption" onchange="showresult();">
    <option value="0">Choose One</option>
    <option value="1">Yes</option>
    <option value="2">No</option>
    </select>
    </form>
    </div>
    <div id="result"></div>

  • #6
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh by the way, i looked at the source code for the site you mention. they use the visibility: hidden method... you should be able to tell what they are doing by just viewing the source of that page.

  • #7
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for helping,last code has been working as intended,Thanks again.Good bye.


  •  

    Posting Permissions

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