How Do I Remove blank option on my drop-down box?

  • Profile Image
    norm27
    Asked on March 16, 2011 at 07:09 AM
  • Profile Image
    NeilVicente
    Answered on March 16, 2011 at 06:19 PM

    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 & Share > 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="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>