Create a Jump menu with Niceforms

Category

Blog Development
24 December, 2014 0

We’ve been trying out niceforms.js, a javascript api for web forms customization created by Thomas Watson. Thanks to him, forms look much nicer now. ?

You can download it and see an intro on how to use it here: http://www.emblematiq.com/lab/niceforms/

We used it to transform a jump menu that looked like this:

into this:

It is quite easy to use, but my problem started when I wanted to use <select> as a jump menu. The way to do this is to create the select tag and then use the onchange event to navigate to the selected page. Your original select would look something like this:

<select onchange=”submit()”><option selected=”selected” value=”page1″>Go to page1</option><option value=”page2″>Go topage2</option></select>

This works perfectly fine without using niceforms, but the select tag doesn’t look nice at all (the look & feel is browser dependent). To make it look nicer, we used niceforms, but…

Since niceforms hides the original select tag and creates <div>’s to render a nicer select, the select’s onchange event never gets called. Thomas wrote something about this problem, but since we had to dig a bit deeper into the implementation to see how to access the original selection, we are putting our solution here.

In order to call the original onchange event of the select tag, you need to edit the original niceforms.js and replace the line 538:

el.lnk._onclick = el.onclick || function () {};

with this (call the original onchange event when the selected div gets clicked):

el.lnk._onclick = el.onclick || function () {  if (this.ref.oldClassName.indexOf(“NFOnChange”) > -1){    this.ref.options[this.pos].selected = “selected”;    //Call the original onchange event    this.ref.onchange();  }};

After doing this, you need to add the NFOnChange class to your select tag, like this:

<select class=”NFOnChange” onchange=”submit()”>

That’s it! After these 2 easy steps you’ll have a nice jump menu!

COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *

bkadmin
Wednesday December 24, 2014 - 22:12 Blog, Development
Recent posts
Managing React server state: a simpler approach

The role of the state The state is a property of each component that holds its data, it gives personality […]

Read More…

Continue reading
17 May, 2021
The Importance Of Retrospectives Meetings

What are retrospectives and why are they important? If you know SCRUM you will be familiar with the retrospective meeting […]

Read More…

Continue reading
10 May, 2021
Using Mockito to create Java Unit Test

Let’s start with the definition given by the official page. “Mockito is a mocking framework that tastes really good. It […]

Read More…

Continue reading
1 December, 2020
From idea to deploy

When the great idea and background just isn’t enough […]

Read More…

Continue reading
11 August, 2020