Native Dropdown: Blank Option above dropdown options errors on submit

  • Profile Image
    teacherscare2
    Asked on March 11, 2018 at 12:43 AM

    Hello,

    Dropdown menu shows "BLANK OPTION" above other option, some has even below.

    when user select all option by "CTRL A"  then "BLANK OPTION" also get selected.

    Upon submission its show error because of selection "BLANK OPTION" .

    Same issue on Mobile phones


    Client does not understand this and get frustrated please Help Or Remove blank options from all field.


    Thankyou.

  • Profile Image
    Sean
    Answered on March 11, 2018 at 03:01 AM

    Hello

    Right now it is not possible to remove the blank option from the drop down menu. If you are using the source code to display the form you can edit the source code and and remove or disable the blank option so that it will be not selected when you press Ctrl + A.

    Example below 

    <label class="form-label form-label-top form-label-auto" id="label_74" for="input_74">

                Mumbai Suburban Lines

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_74" class="form-input-wide jf-required">

                <select class="form-dropdown validate[required]" id="input_74" name="q74_mumbaiSuburban[]" style="width:150px;" multiple="" data-component="dropdown" required="">

                  <option value="" disabled="disabled" selected="selected">  </option>

                  <option value="Western"> Western </option>

                  <option value="Central"> Central </option>

                  <option value="Harbour"> Harbour </option>

    Hope this helps. 

    Feel free contact us in case you need further help on this. 

  • Profile Image
    teacherscare2
    Answered on July 25, 2018 at 03:04 AM

    Did you find any solution for this as it is creating lot of issue for user to fill up the form ?

    I do not have any knowledge of coding.

    And this problem of "Blank Option " is there in and every dropdown field of my form.

    Please Help.

  • Profile Image
    roneet
    Answered on July 25, 2018 at 09:47 AM

    Apologies for the inconvenience caused to you.

    As a workaround, you can write some text in Empty option for example "Please choose an option".

    15325263491.PNG

    Let us know if this was helpful. We would be happy to assist you.

    Thanks.


  • Profile Image
    teacherscare2
    Answered on July 26, 2018 at 02:12 AM

    Even If we do this and user select ALL option by using "CTRL+A" , "Please choose an option" will also be selected and prompt error while submission which make user confused and runaway without filling form.

    Also, How Blank option at the bottom of Dropdown will be elominated by this suggesstion?


    You guys have very good team at jotform ,why don't you remove blank option completely ?

    please provide with better solution , I am stuck with this from past 6 months already.


    Thankyou.

  • Profile Image
    roneet
    Answered on July 26, 2018 at 02:42 AM

    I investigated this on your form and I could replicate this issue. 

    As a workaround, I can suggest you use visual_multi_select widget

    https://widgets.jotform.com/widget/visual_multi_select

    1532587294form.gif

    Let me forward the thread to our backend team for review. You will be notified on this thread.

    Thanks.

  • Profile Image
    roneet
    Answered on July 26, 2018 at 03:03 AM

     You can also use multiple selection widget in your form. 

    https://widgets.jotform.com/widget/multiple_selection


  • Profile Image
    teacherscare2
    Answered on July 26, 2018 at 03:05 AM

    The problem with using widget is-
    1) I am using 3 widget on my form. 

    i) Short Scrollable Terms

    ii) Appointment Slots


    iii) Spreadsheet

    Problem with this all three is that sometimes it goes blank completely (White blank space appears) or does not appear to user at all.
    so ,i find using widget makes form more complicated.
    But this completely different issue as per my current thread.

    This not  solution but few days escape .

    2) I have already taken large data using my current form field ,changing it fields will make things more complicated then as it is now.

    finally , take your time and please remove below and above "Blank Option".


    I know this is very small issue for  Jotform Team but it only matters your focus towards this issue.

    Thank you.


  • Profile Image
    roneet
    Answered on July 26, 2018 at 03:15 AM

    Apologies for the inconvenience caused to you.

    Another workaround I can suggest If you want to use the native dropdown you can also inject the following CSS code in your Form Designer. I have tested in my form and it is working.

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

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

    You can refer to this guide to inject Custom CSS code in your form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps!

    Thanks.

  • Profile Image
    teacherscare2
    Answered on July 26, 2018 at 03:44 AM

    This problem has been solved.

    Thankyou so much for the help.

    Thanks alot.

  • Profile Image
    arda
    Answered on August 14, 2018 at 03:44 AM

    Hi there,

    This problem is resolved completely. You don't have to css trick now if you want.

    Best Regards.