How can I remove blank option from drop down menu?

  • Profile Image
    Nixor
    Asked on December 27, 2011 at 01:31 AM

    In my application form, wherever I use dropdown menus, it gives me a blank option. Is there any way I can get rid of the blank option?

  • Profile Image
    idarktech
    Answered on December 27, 2011 at 01:48 AM

    Hi,

    Drop down boxes have a blank option chosen by default and there is currently no option to remove that using the Form Builder. You could instead change the default option on your drop down to any other value by choosing Properties > Selected > and then choose your preferred value.

    If you want it removed for aesthetic reasons, modifying the source code will do.

    1. Click on Setup & Embed > Embed Form > Source  and then copy the whole code.

    2. Find and remove <option> </option>. See sample codes below:

     

    <script src="//cdn.jotfor.ms/jotform.jgz?3.1.107" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          JotForm.initCaptcha('input_5');
          $('input_5').hint('Type the above text');
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.107" rel="nofollow noopener" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" target="_blank" href="http://www.jotform.com/css/styles/paper_grey.css" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding:10px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:275px;
            background:url("http://www.jotform.com/images/styles/style2_bg.jpg") repeat scroll 0% 0% rgb(255, 255, 255);
            color:#616060 !important;
            font-family:Arial;
            font-size:12px;
        }
        /* Injected CSS Code */
    .form-input {
        background-color: white;
    }
        /* Injected CSS Code */
    </style>

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10681505080" id="10681505080" accept-charset="utf-8">
        <input type="hidden" name="formID" value="10681505080" />
        <div class="form-all">
            <ul class="form-section">
                <li class="form-line" id="id_3">
                    <label class="form-label-left" id="label_3" for="input_3">
                        Name<span class="form-required">*</span>
                    </label>
                    <div id="cid_3" class="form-input">
                        <input type="text" class="form-textbox validate[required]" id="input_3" name="q3_name3" size="20" />
                    </div>
                </li>
                <li class="form-line" id="id_10">
                    <label class="form-label-left" id="label_10" for="input_10"> Click to edit </label>
                    <div id="cid_10" class="form-input">
                        <select class="form-dropdown" style="width:150px" id="input_10" name="q10_clickTo">
                            <option>  </option>
                            <option selected="selected" value="Option 1"> Option 1 </option>
                            <option value="Option 2"> Option 2 </option>
                            <option value="Option 3"> Option 3 </option>
                        </select>
                    </div>
                </li>
                <li class="form-line" id="id_8">
                    <label class="form-label-left" id="label_8" for="input_8">
                        eMail<span class="form-required">*</span>
                    </label>
                    <div id="cid_8" class="form-input">
                        <input type="text" class="form-textbox validate[required]" id="input_8" name="q8_email8" size="20" />
                    </div>
                </li>
                <li class="form-line" id="id_5">
                    <label class="form-label-left" id="label_5" for="input_5">
                        Please help us prevent Spam<span class="form-required">*</span>
                    </label>
                    <div id="cid_5" class="form-input">
                        <div class="form-captcha">
                            <label for="input_5"> <img alt="Captcha - Reload if it's not displayed" id="input_5_captcha" class="form-captcha-image" style="background:url(http://www.jotform.com/images/loader-big.gif) no-repeat center;" src="//www.jotform.com/images/blank.gif" width="150" height="41" /> </label>
                            <div style="white-space:nowrap;">
                                <input type="text" id="input_5" name="captcha" style="width:130px;" />
                                <img src="//www.jotform.com/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_5');" />
                                <input type="hidden" name="captcha_id" id="input_5_captcha_id" value="0">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="form-line" id="id_9">
                    <div id="cid_9" class="form-input-wide">
                        <div style="margin-left:156px" class="form-buttons-wrapper">
                            <button id="input_9" type="submit" class="form-submit-button">
                                awww
                            </button>
                        </div>
                    </div>
                </li>
                <li style="display:none">
                    Should be Empty:
                    <input type="text" name="website" value="" />
                </li>
            </ul>
        </div>
        <input type="hidden" id="simple_spc" name="simple_spc" value="10681505080" />
        <script type="text/javascript">
            document.getElementById("si" + "mple" + "_spc").value = "10681505080-10681505080";
        </script>
    </form>

  • Profile Image
    Nixor
    Answered on December 30, 2011 at 01:03 AM

    I followed the instructions as indicated above. However, after I copied the source code and made the required changes, i wasnt able to paste the edited code in the source code text box. Do I need to do it some other way?

  • Profile Image
    idarktech
    Answered on December 30, 2011 at 01:08 AM

    Hi Nixor,

    Thank you for asking. You don't need to paste it back to where you've copied the code. The code that you've edited is ready for embedding.

    Please let us know if you have further questions. Thank you so much!

  • Profile Image
    designsby
    Answered on January 18, 2012 at 05:51 PM

    I can't thank you enough for the amazingly clear answers you give in this forum. My client wanted there to be a "0" value in their drop down menu instead of the blank default option. I'm not a coder and could follow how to fix the code.

    The form will be used for the next 5 weeks for a conference registration and I was also thrilled to find the answer/comment about the ability to upgrade for just a short period of time.

    Thanks!

  • Profile Image
    bdoodle
    Answered on April 13, 2016 at 09:23 AM

    In my test form, I specified a default value in each of my drop down menus for panel colors.  Nevertheless, when you actually access the menu on the form, a blank selection remains available.  I tried making the first one a required field as well, but this didn't prevent the blank choice from showing.  I realize that the form will function and I can assume the default value if blank is chosen, but I wanted to ask you to make sure there's no way to remove the blank choice.  Please let me know.

    My test form:

    https://www.jotform.com//?formID=61033982093960

     

  • Profile Image
    david
    Answered on April 13, 2016 at 11:46 AM

    @bdoodle Since this thread is several years old, I have moved your request to a thread of its own.  I will address your request in the following thread shortly:

    https://www.jotform.com/answers/817480

  • Profile Image
    bdoodle
    Answered on April 13, 2016 at 12:45 PM
    Sorry! I already put it into a new thread: " Blank choice appears in drop down menu even when default value selected "
    ...