Simple Pure JS Input Boxes

Welcome to simple pure JS Inputboxes with absolutly Zero Jquery

We use as little code as possible to make things light. Minimal css styling and JS code with 0 libries to depend upon.
This means that you can add your own styling easily with out the need to find and overwrite lots existing code.
To start just use these 3 simple steps.

1. Call required scripts

simply call select.css and select.js from the select folder

<link rel="stylesheet" href="styles.css">
<script src="myscripts.js"></script>

2. Choose you inputbox

SINGLE DROPDOWN

HTML Code

<div class="select_singleframe"></div>

---

MULTIDROPDOWN

HTML Code

<div class="select_multiframe"></div>

---

TAGBOXES

HTML Code

<div class="select_tagframe"></div>

click in the box above. Type your name and press enter

Tagbox with Validation for:urls

here you can add a validation to tag boxes to only accept urls with prefix http:// you can even change the error message if it is entered incorrectly.

HTML Code

<div class="select_tagframe" validation="url" validationmessage="*This url is not Valid try the prefix http://"></div>

This box below will only accept values with a "http://" or "https://" prefix

---

3. Populate your input boxes using js code

Single and multiple boxes have an input field and a dropdown box. Tagboxes only have an inputfield. You can populate these easily with a small line of code.

HTML Code to populate the dropdown box.

Simply fill your array with all of the content you want and then send the array through with the id of the inputbox's dropdown content you want to populate. As the tagbox has no dropdown field there is no reason to use this function on this.

var select_values = new Array("test", "test1", "test2"); select_addvalues(select_values, "boxid");

HTML Code to populate box.

Simply fill your array with all of the content you want and then send the array through with the id of the inputbox's you want to populate.
There last parameter in the select_additems function can either be true, false or left blank. If set to true any values selected here will attempt to strike off options on the dropdown box to show its selected.
If a item isn't listed in a dropdown box it will make a new item

var select_values = new Array("test", "test2", "hello"); select_additems(select_values, "boxid", false);