What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Blank choice appears in drop down menu even when default value selected - How to hide it?

    Asked by bdoodle on April 13, 2016 at 09:31 AM

    On Dec 27, 2011 you told another forum questioner that the only way to avoid a blank in a drop down menu was to specify a default value.

    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. Thanks very much!

    My test form:

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

    selected JotForm required field Selection test form
  • Profile Image

    Answered by bdoodle on April 13, 2016 at 12:08 PM

    Please disregard this question.  The question was posted twice by mistake. Thanks.

  • Profile Image

    Answered by Ben on April 13, 2016 at 12:19 PM

    Thank you for updating the thread, however I would like to add to the answer of my colleague here: https://www.jotform.com/answers/817480

    You could technically hide it through CSS - so that your form is in the form builder

    This would be the CSS;

    select > option[value=""] {
        display: none;
    }

    It is important to know however that different browser work differently with dropdowns. FireFox for example does its own drawing of the dropdowns (select elements) allowing it to be impacted by the CSS easily.

    Chrome and others however let system do its work and create dropdown and then they just show it for you - meaning that CSS can not impact it the same way since it is not connected to the same directly.

    So the only effective option is to actually remove that blank option from the dropdown code or to have it disabled - so that it can not be selected.

    Having that said, if you wish to remove the same in FireFox (which is one of the most used browsers) and keep the code in form builder - the CSS above will help. It is likely that some other browsers will come to same point and hide the white option as well at one point.

    Hope this helps.

  • Profile Image

    Answered by bdoodle on April 13, 2016 at 02:13 PM

    Wow!  Thanks for the extra detail.  I don't want to make changes to the source code, but it sounds like I could use the CSS code you provided and achieve the desired results at least some of time, depending on the browser used.  If I understand you, you are saying that where a drop down option has a "" value, it will not be displayed if your CSS is used.  

    Right now, all the color options in my panel drop downs have a value > 0 and white has a 0 value.  Blank also has a 0 value in that I found that the first option referred to a blank value.  See below.

    I tested and the CSS you gave me does prevent the blank selection from appearing in Chrome and Firefox while white continues to appear even though they both have a 0 in their option value.  It did NOT work in IE. 

    Wanting to know if the browser did not display the blank in the drop down because it was the first option,not because the value was 0, I did 2 tests.  (1) I changed the value for the blank/first option to be empty and (2) I changed it to = 1 and left the value for white as 0, and in both cases, I got the same, valid result.  i.e. Blank did not appear as a choice in the drop down, but white did.

    It seems like I should add your CSS statement to all these forms where blank options should not appear, but I don't need to change the first option value in all my panel drop downs to blank in order for it to work in Chrome and Firefox.  

    Thanks again!

  • Profile Image

    Answered by Ben on April 13, 2016 at 03:41 PM

    This code:

    select > option[value=""] {
        display: none;
    }

    Should get itself applied to all dropdowns on your form and I am glad to hear that it is working for Chrome as well since that means that Opera, Chromium, Safari, Iron, etc (other WebKit) browsers should use the same.

    Now when it comes to IE, it is always slow with updates and never completely up to standards, but it is advancing so the same code is likely to work for all in near future.

    Now the value="" part in it is actually HTML value, not the calculation value or the text shown to you when you open the dropdown. The calculation value is added as calcvalue attribute instead.

    Now the thing with that CSS is that it will not affect the first value for all fields, so I guess that the following might be a better option:

    select > option:first-child{
        display: none;
    }

    What it will do is remove the first child / option of all select boxes - even if they have a different value.

    This will affect even date field and others like it that have <option></option> - no value attribute

    You can see the following form for the comparison across several different fields: https://form.jotform.com/61035602245950

    Hope this adds to and that you have not done too many changes so far so that it will be easy to update. It also gives you an insight what dropdowns would be affected.

    We can of course make it work like that only on dropdown fields if you prefer or anything else specific as such.

  • Profile Image

    Answered by bdoodle on April 13, 2016 at 05:39 PM

    Hello Ben,

      Thanks so much for your thorough answer and your efforts to guide me so I can make the best changes to my forms.  Unfortunately, I'm not super technical so your words are "pearls before swine."  I couldn't really see any difference in the two approaches on your sample form.   I think I may understand a little what you are saying, but still believe I may be better off for now with: 

    select > option[value=""] {
        display: none;
    }

    Besides the panel color drop downs, my forms (those involved) have just 2 other drop downs, one for spinnaker type ordered and one for number color.  They both seem to be working fine with the above CSS code.  None the other fields are selections, but fields where the user should just type in a value.   Could I stick with the above CSS or do you believe it could cause me problems going forward?

    Sorry I'm not better able to understand your information.  You provided enough guidance. I'm just too ignorant to fully appreciate what you said.

    examples of my forms:

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

     

    http://www.madsails.com/Specify_FS_TR_spin.html

     

  • Profile Image
    JotForm Support

    Answered by jonathan on April 13, 2016 at 09:11 PM

    I checked your form on the website and IMHO it is good to go.

     

    ...Besides the panel color drop downs, my forms (those involved) have just 2 other drop downs,

    this... so I think the first CSS option is more appropriate to use

    But eventually, this sitll is your form and you will be using it, so it still is on your decision. :-)

    Let us know how we can be of further assistance.

    Cheers