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

    Feature Request : Possibilty to have a searchable Dropdown

    Asked by Wtfuck on November 09, 2013 at 04:34 AM

    Hello Jotform,

    Here i'am again with Feature Request

    It will be great to have the possiblity to search on a dropdown.

    Check this example.

    Thanks

    searchable Dropdown
  • Profile Image
    JotForm Support

    Answered by Welvin on November 09, 2013 at 09:42 AM

    Hi,

    How about using our Auto Complete function? Have you check that? That works the same or as a temporary workaround.

    OR, we can implement the same to your form. We can just copy the example for you. Would you like that? If yes, then please let us know and share with us your form URL. However, this would require you to use the form source codes (How to Get Form Source Codes) - as usual when creating workarounds. :)

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on November 09, 2013 at 09:44 AM

    By the way, I forgot to mention that I have added this to our feature request list. Same with the other requests we have, we cannot tell you a timeframe or if there's a possibility that our developers will consider this in the future. All we can do is to wait for more updates.

    Thanks

  • Profile Image

    Answered by Wtfuck on November 11, 2013 at 07:45 AM

    Hello Welvin,

    Is it possible to choose the second option

    Here is my form

    and here is the example that i want

    http://phpflow.com/jquery/how-to-add-search-functionality-in-dropdown-list-with-jquery-plugin/

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by jonathan on November 11, 2013 at 10:11 AM

    Hi,

    I will forward your message also to our colleague Welvin regarding the via source code option.

    I am sure he will get back to you as soon as he is back online again.

    We will notify you for any updates when available.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2013 at 09:01 PM

    Update:

    I have implemented the same searchable dropdown menu. Check it here: https://shots.jotform.com/welvin/pages/searchable-dropdown-menu.html

    Instructions on how you can implement the same:

    1. Download the Searchable Script & CSS files here: https://shots.jotform.com/welvin/downloads/searchable-dropdown.zip

     

    2. Upload this files to your own server, make sure to ready these files path or direct URL. For example:

    http://www.yoursite.com/chosen.css

    http://www.yoursite.com/chosen.jquery.js


    3. Get your form source codes by following this guide: How to Get Form Source Codes and paste the codes to any text editor you have. Example: Notepad

     

    4. Paste the below codes at the very top of the form source codes:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script src="http://www.yoursite.com/chosen.jquery.js" type="text/javascript"></script>

    <link rel="stylesheet"  target="_blank" href="http://www.yoursite.com/chosen.css">

    Make sure to change the URL's in red color to your own file direct URL from Step 2 instructions

    Screenshot:

     

    5. Copy the codes from this link: http://pastebin.com/g0MmE23d and paste it after the end   tag of the form source codes. You can see this at the bottom part. 

    Screenshot:

     

    6. Last but not the least :), change the Dropdown Class Properties from, for example: class="form-dropdown validate[required]" to class="chosen-select" 

    Screenshot:

     

    7. You're now ready to embed the source codes. You can either paste the modified form source codes directly to your webpage HTML Editor or save the file as an HTML then upload the HTML file to your server and use it as an iFrame. You can generate iFrame Codes from this link: Online iFrame Generator - iFrames Generator.

     

    Let us know if you need further assistance.

    Thanks

  • Profile Image

    Answered by Wtfuck on November 12, 2013 at 05:35 AM

    Everything work like a charm exept that i have another script on the source code.

    I also managed to download the file from the orginal souce because your first link don't work.

    Check this theard and look at the post Answered by abajan on August 28, 2013 at 07:07 PM

    Here is the script that i put on the same html page ?

    Can both work ?

  • Profile Image
    JotForm Support

    Answered by Welvin on November 12, 2013 at 05:56 AM

    I'm sorry. The correct link should be: https://shots.jotform.com/welvin/downloads/searchable-dropdown.zip. Without the "www".

    How do the script works on the HTML Page? The thread is too long and would take me some time to read and understand that. Can you explain it here instead? An excerpt would work.

    I've compiled your form source codes again with the added workaround for searchable dropdown BUT without the script that you've mentioned, please kindly take a look ang let me know the issue here: https://shots.jotform.com/welvin/pages/wtfuck-searchable-dropdown-menu.html

    If this works, you can just copy the codes from this link: http://pastebin.com/DnKrrWi0 and use it instead of your current codes.

    Thanks

  • Profile Image

    Answered by Wtfuck on November 12, 2013 at 06:09 AM

    This script

    <script type="text/javascript">

    (function () {
    $(input_8).observe("change", function () {
    $(input_9).value = this.value.substring(0,5);
    $(input_10).value = this.value.substring(6);
    });
    })();

    </script>
    it's for my XLS Repport i need to split my data on two collums like this screenshot
  • Profile Image
    JotForm Support

    Answered by Welvin on November 12, 2013 at 07:11 AM

    Thank you. I can see NO changes to the field input ID's to your form so the additional scripts should work. I have it added to the HTML Page. Same link: https://shots.jotform.com/welvin/pages/wtfuck-searchable-dropdown-menu.html.

    Just copy the source codes from this link:http://pastebin.com/DnKrrWi0

    Thanks

  • Profile Image

    Answered by Wtfuck on November 12, 2013 at 07:32 AM

    It doesn't work, and i don't know why

    Here is the xls file : http://www.jotform.com/excel/32396083152049

    And here is the form : http://gaby.site40.net/pertes.html

    Thanks

  • Profile Image

    Answered by EliezerN on November 12, 2013 at 09:37 AM

    @Wtfuck

    Your message has been forwarded to my colleague Welvin so that he can reply to you once he's online and helps to identify why this is not working.

    thanks

  • Profile Image

    Answered by Wtfuck on November 12, 2013 at 09:39 AM

    No problem ! ;)

    Maybe abajan can help us ?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on November 12, 2013 at 10:39 AM

    I've made some changes and do some test BUT was failed to fix this. I guess this is a conflict and the codes needs to be updated. I will contact Abajan about this matter for help BUT I would suggest posting this on a separate thread and kindly explain again the problem. You can just post the excerpt just as above your response.

    Start a new thread using this link: http://www.jotform.com/answers/answer.php?

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 12, 2013 at 09:09 PM

    @Wtfuck

    Currently, my best guess is that this is being caused by a conflict between jQuery and Prototype but we'll need to look into it more fully. In the meantime, please have a look at the video below in High Definition (HD) mode (so you can clearly see the changes being made to the code by the presenter) and make the changes explained therein. That may either resolve the issue or at least partially resolve it.


    I realize how frustrating this must be but we'll let you know if we come up with any solutions.

    Thanks

  • Profile Image

    Answered by Wtfuck on November 13, 2013 at 05:10 AM

    Hello,

    I don't find Protype script on the source code.

    Can you help me ?

    If it doesn't work with this script can you try with this one ?

    Thanks

    Don't giveup plz :(

  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 06:04 AM

    Actually, Prototype is there but it's hiding! It's being imported via the following code:

    http://cdn.jotfor.ms/static/jotform.js?3.1.805

    Click that link and you'll see a script that starts with var Prototype ...

    So, according to the video, one of the required steps is to move the line containing http://cdn.jotfor.ms/static/jotform.js?3.1.805 from it's current location and placed before the line containing

    https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

    Anyway, we'll see how best we can help you to get the issue resolved.

  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 06:18 AM

    Hi again,

    I just noticed that the file at http://gaby.site40.net/chosen.jquery.js states at the top:

    // Chosen, a Select Box Enhancer for jQuery and Prototype ...

    Is it possible that jQuery isn't even needed on the page?

  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 07:30 AM

    Getting deeper!

    Upon further investigation, I discovered that while it's true the Chosen plugin can be used with both jQuery and Prototype, the Prototype version differs fairly significantly from the jQuery one. Here's the Prototype version. Compare that to the jQuery version to which your page refers.

    Don't worry, we'll figure this out eventually.

  • Profile Image

    Answered by Wtfuck on November 13, 2013 at 08:38 AM

    So i dont understand ?

    What i need to do abajan to solve this problem ?

    Sorry but i'm a noob on programing code...

    Thank you !

  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 08:56 AM

    My apologies for the confusion. In a nutshell, it appears that one of two routes can be taken. Either stick with the jQuery version of the Chosen plugin and make the changes explained in the video (to avoid possible conflicts between the jQuery library and the Prototype framework) or completely remove jQuery from your page and use the Prototype version of the plugin instead of the jQuery one. (Incidentally, I got the Prototype version of the plugin from this page.)

    We'll see what solutions we can come up with and get back to you if (hopefully when) we figure this out.

  • Profile Image

    Answered by Wtfuck on November 13, 2013 at 01:55 PM

    Okey Keep me in touch !

    Love you guys !

  • Profile Image

    Answered by khrisell on November 13, 2013 at 04:13 PM

    Hello Wtfuck,

    We will surely let you know if there is any update on this.

    Feel free to contact us anytime if you need any assistance.

    Thank you for choosing JotForm.

  • Profile Image
    JotForm Support

    Answered by abajan on November 14, 2013 at 01:17 PM

    @Wtfuck

    Unfortunately, I'm yet to find a solution to this puzzle. What I can state is that jQuery conflicting with Prototype is not causing the fields hidden via the injected CSS not to be populated. When I removed all references to jQuery from this test page containing a clone of the form and substituted the Prototype version of the Chosen plugin, it didn't help. However, once I commented out (removed) the plugin and the script that's connected to it, the Ref and Objet Perdu text boxes became filled whenever an item was chosen in the Objet Perdu dropdown, as can be seen in this page. I also tried editing my script to populate the Ref and Objet Perdu text boxes when the form was submitted instead of when a selection was made in the Objet Perdue dropdown but that failed too.

    We'll keep trying to come up with a solution but I can't promise anything.

    HANG ON... EUREKA!

    After trying just about everything I could think of, the following idea just popped into my head:

    "What if my script were to populate the text boxes upon submission of the form instead of when a selection was made in the Objet Perdue dropdown?" Well that didn't work but then after running some alert(); tests, I realized that removing the first and last lines of my script would solve the problem. BINGO! That did the trick. (Since the text boxes will be hidden, it doesn't matter when they're populated.)

    Replace my old script with the following:

    $$('form')[0].on('submit', function () {
     $(input_9).value = $F(input_8).substring(0, 5);
     $(input_10).value = $F(input_8).substring(6);
    });

    Such a simple solution! lol

    Anyway, should you need further assistance with the form, we would be happy to help.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on November 14, 2013 at 04:03 PM

    Actually, the following script would be compatible with a wider range of browsers:

    $$('form')[0].on('submit', function () {
     $('input_9').value = $F('input_8').substring(0, 5);
     $('input_10').value = $F('input_8').substring(6);
    });

    (Note the extra quotes)

  • Profile Image

    Answered by Wtfuck on November 14, 2013 at 05:16 PM

    WONDERFUL !

    Thank you Abajan for your hard work !

  • Profile Image
    JotForm Support

    Answered by abajan on November 14, 2013 at 06:42 PM

    No problem, Wtfuck! We always love it when a plan comes together. :)


    Cheers