Using jQuery to convert text into form fields (2)

Many months ago I posted a blog entry describing how to use jQuery to turn a text item into a drop down. Read the older entry for more information on what I mean, but the basic gist is - you click an edit link and a piece of text turns into a drop down. This worked fine but a user asked about converting the drop down back into plain text. I worked on it a bit and it turns out it isn't that difficult.

To begin with, I added a new event listener to handle the change event in my drop down. Because the drop downs were created after the document was loaded, I had to use the live() feature. Note - before jQuery 1.4 it was not possible to use live with the change event. If you plan on using my code, be sure you are using the latest jQuery build. Here is the event handler I used:

$(".selector").live("change", function() { //first get the value var val = $(this).val() var name = $(this).attr("name") var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">" s += labels[val-1] + " - " s += "<a href=\"\" class=\"edit\">edit</a>" $(this).parent().html(s) })

As you can see, I simply grab the value and name from the drop down and recreate the text that was there originally. I had to make one more tweak. Since I was now generating edit links on the fly as well, I changed my original click listener for them to a live as well. So basically, I've got two live events. One to listen for "Edit" clicks, one to listen for "Change" events. You can play with a demo of this here. Here is the complete source.


<head> <script type="text/javascript" src=""></script> <script>

$(document).ready(function() {

//used for our drop downs
var values = [1,2,3,4]
var labels = ["Hated It","Disliked It","Liked It","Loved It"]

$(".changeable a.edit").live("click",function() {
    //find the hidden item
    var hiddenItem = $("input:hidden", $(this).parent())
    //get the current val
    var currentVal = hiddenItem.val()
    //get the name
    var currentName = hiddenItem.attr("name");
    //now we can draw our drop down and select the right val
    var s = "&lt;select class=\"selector\" name=\""+currentName+"\"&gt;";
    //hard coded values for our drop down
    for(var i=0;i&lt;values.length;i++) {
        s+= "&lt;option value=\"" + values[i] + "\""
        if(currentVal == values[i]) s+= " selected"
        s+= "&gt;" + labels[i] + "&lt;/option&gt;"
    s += "&lt;/select&gt;"
    //now replace

    return false    

$(".selector").live("change", function() {
    //first get the value
    var val = $(this).val()
    var name = $(this).attr("name")
    var s = "&lt;input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\"&gt;"
    s += labels[val-1] + " - "
    s += "&lt;a href=\"\" class=\"edit\"&gt;edit&lt;/a&gt;"


</script> </head>


<form method="post">

star wars: <span class="changeable"><input type="hidden" name="starwars" value="4">Loved It - <a href="" class="edit">edit</a></span><br/> star trek: <span class="changeable"><input type="hidden" name="startrek" value="3">Liked It - <a href="" class="edit">edit</a></span><br/>

<input type="submit" value="click me like you mean it"> </form>

<cfif not structIsEmpty(form)> <cfdump var="#form#" label="form"> </cfif>

</body> </html>

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.