5 Replies Latest reply on Sep 30, 2008 3:18 PM by fober1

    Hide dropdown list

    Level 1
      I want to hide the drop down list after a client hit a button beside it and replace the dropdown list by a text box. How will I do that?
      Thanks in advance!!!
        • 1. Re: Hide dropdown list
          Dan Bracuk Level 5
          quote:

          Originally posted by: dchard
          I want to hide the drop down list after a client hit a button beside it and replace the dropdown list by a text box. How will I do that?


          With great difficulty. I had a similar requirement once and could not get it to work. Rather than turning it into a career, I changed my approach. Instead of switching form elements, I switched forms. Here are some bits of code.

          <script language="javascript">
          function showHide(checkBox) {
          /*
          controls what the user sees. If he checks the button, all the mail stuff shows up and the 1st submit button disappears and gets disabled. If he unchecks it, the reverse happens. Page loads with button checked.
          */

          if (checkBox.checked == true) {
          document.getElementById('longform').style.visibility = 'visible';
          document.getElementById('shortform').style.visibility = 'hidden';
          document.theForm2.startmonth.focus();
          document.theForm2.mail2.checked = true;
          }

          else {
          document.getElementById('longform').style.visibility = 'hidden';
          document.getElementById('shortform').style.visibility = 'visible';
          document.theForm1.mail1.checked = false;
          document.theForm1.startmonth.focus();
          }

          return true;
          } // end of function

          </script>

          and then
          <div id="longform" style="position:absolute; top:200">
          <cfform name="theForm2">
          etc
          <div id="shortform" style="visibility:hidden; position:absolute; top:200">
          <cfform name="theForm1">

          Maybe someone smarter than me can figure out how to do it by switching elements in the same form.
          • 2. Re: Hide dropdown list
            Level 7
            it is, in fact, relatively simple, and even simpler if you can go with
            hiding your select and showing a textbox instead of switching form
            elements; and simpler still with the help from jQuery...

            simple jQuery example:

            in your form:
            <span id="myselectholder">Select: <select name="myselect"
            ...>...</select></span>
            <span id="mytextboxholder" style="display:none;">Textbox: <input
            type="text" name="mytextbox"...></span>
            <input type="button" id="mybutton" ...>

            js:
            $(document).ready(function(){
            $("#mybutton").click(function() { $("#myselectholder,
            #mytextboxholder").toggle(); });
            });

            just an example.



            Azadi Saryev
            Sabai-dee.com
            http://www.sabai-dee.com/
            • 3. Re: Hide dropdown list
              Dan Bracuk Level 5
              It's simple until you want both form elements to occupy the same spot on the page.
              • 4. Re: Hide dropdown list
                fober1 Level 1
                Hi,
                here's a good example below.

                cheers,
                fober
                ===== EXAMPLE =====

                <div style="width:200px; padding-right: 20px; border: 1px solid red">
                <select id="text_select" size="5"
                onclick="document.getElementById('text_edit').value=this[this.selectedIndex].text; this.style.display= 'none'"
                style="display:none; z-index:99; position:absolute; padding-top:20px; width:100%"
                >
                <option>Apple</option>
                <option>Orange</option>
                <option>Banana</option>
                </select>
                <input name="xyz" id="text_edit" type="Text" style="width:100%">
                <input type="Button" value="\/"
                onclick="document.getElementById('text_select').style.display= 'inline'"
                style="position:absolute; float:right;"
                >
                </div>
                • 5. Re: Hide dropdown list
                  fober1 Level 1
                  Hi,
                  here's a good example below.

                  cheers,
                  fober
                  ===== EXAMPLE =====

                  <div style="width:200px; padding-right: 20px; border: 1px solid red">
                  <select id="text_select" size="5"
                  onclick="document.getElementById('text_edit').value=this[this.selectedIndex].text; this.style.display= 'none'"
                  style="display:none; z-index:99; position:absolute; padding-top:20px; width:100%"
                  >
                  <option>Apple</option>
                  <option>Orange</option>
                  <option>Banana</option>
                  </select>
                  <input name="xyz" id="text_edit" type="Text" style="width:100%">
                  <input type="Button" value="\/"
                  onclick="document.getElementById('text_select').style.display= 'inline'"
                  style="position:absolute; float:right;"
                  >
                  </div>