Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

Create a select/input form field

So I have a select element that has a few options in it e.g.

  <select>
    <option value="100">Main Organization</option>
    <option value="50">Other Important Organization</option>
    <option value="0">Other Non-Important Organization 2</option>
    <option value="">Create New Non-Important Organization</option>
  </select>

I am trying to figure out a way that when a user has the proper role they can select "Create New Non-Important Organization" and the select becomes an input and allows them to create another Organization and save it.

I've Googled it thinking someone somewhere has done this, but I haven't found anything like it yet. Any help is appreciated.

2 Answers

Josh Alling
Josh Alling
17,172 Points
Josh Alling
Josh Alling
17,172 Points

Do you mean that you only want to give a logged in user the option to create a new organization if they have the correct permissions? If so, that can easily be done using a combination of PHP (or whatever backend language you are using) and JS. You just need to have some kind of variable that checks if the user has permission. for example:

<select>
    <option value="100">Main Organization</option>
    <option value="50">Other Important Organization</option>
    <option value="0">Other Non-Important Organization 2</option>
    <?php if ($user_has_permission): ?>
        <option value="">Create New Non-Important Organization</option>
    <?php endif; ?>
</select>

<?php if ($user_has_permission): ?>
    enter create organization form here...
<?php endif; ?>

You could then use JS to show or hide the form when the create organization for is selected. Neither the option or the form will be generated for users that don't have permission to create organizations.

If this isn't what you had in mind let me know and I will try to answer your actual question.

John Weland
John Weland
42,478 Points

This is almost exactly what I want. here they use datalist but it doesn't have enough support some of my clients are still kicking the IE 9 can down the road.

http://jsfiddle.net/BobStein/ty640uva/

John Weland
John Weland
42,478 Points

or like this but preferably without the god forsaken jQuery UI https://jqueryui.com/resources/demos/autocomplete/combobox.html

Josh Alling
Josh Alling
17,172 Points
Josh Alling
Josh Alling
17,172 Points

Ok, so you want to combine a text input and a select input where a user can either select one of the current options from the list or type in their own and save it. And you want to build it yourself rather than use jQuery UI or some other library. Is that right?

John Weland
John Weland
42,478 Points

I actually did take the build it yourself approach and its working out fine right now basically I have an select and an input. the input is hidden and disabled and if you select the option "<create new>" the input is shown, and enabled and the select is hidden, its value is reset to the first option in the list and its disabled. if you click the x icon on the input it reverses that.

On save if the input is enabled the data from it is used in the form submission if it's not the value of the select is used. its not perfect but I absolutely despise jquery ui.