Form.Element.setValue()

posted December 20th 2005 at 1635 EST in All, Javascript, ajax

You love prototype.js, and you use Form.Element.getValue() all the time. Here is the Form.Element.setValue() counterpart. The setValue() function can be found in my prototypeUtils.js

It works like this


Form.Element.setValue("username","Jehiah");
Form.Element.setValue("usertype","admin");
 

No need to worry if it's a textarea, text field, select box, check box, or a radio box. It just works.

This also allows for some beautifull JSON integration. Say you want to load a form with values that you get back from an ajax call (the Ajax part is an exercise left for you - the reader)


var userdata = {"username":"jehiah","usertype":"admin"};
 

We can write a simple function to unpack those values into the form


function unpackToForm(data){
   for (i in data){
     Form.Element.setValue(i,data[i].toString());
   }
}
 

Now to unpack that data to our form we just use


unpackToForm(userdata);
 

Nice =)

12 Responses

  1. #1 Fernando da Silva Trevisan
    4 years, 2 months ago

    Your entries are really usefull. Everytime I see you wrote something new, it’s really worth to take a look! So, greetings and great job from Brasil.

  2. #2 Dan Allen
    4 years, 1 month ago

    Just to let you know, the link to your prototypeUtils.js is broken (download is mispelled). Great contribution though!

  3. #3 Jack
    3 years, 11 months ago

    May I suggest an addional useful function be added Object2PostData(). This accepts any (simple) object and encodes it’s state as post data (for a query string or HTTP POST request body):

    ajax.Object2PostData = function(Obj) {
    var PostData = ""
    for (var member in Obj) {
    if (typeof(Obj[member])!="function" && typeof(Obj[member])!="undefined'") {
    PostData += encodeURIComponent(member) + "=" + encodeURIComponent(Obj[member]) + "&"
    }
    }
    return PostData
    }

  4. #4 Andy Tandler
    2 years, 11 months ago

    Thank you very much. I love Prototype.js and now your PrototypeUtils.js. setValue() is a great method and make JavaScript more simple for Web 2.0 =)

  5. #5 Ville Walveranta
    2 years, 4 months ago

    This is useful, thanks! One problem with it though: it seems to fail if you try to set value of a field that is currently invisible. I’m trying to standardize to prototype, but some things just seem to be easier to do in jQuery (so I’m using them both concurrently %-).

  6. #6 Juan
    1 year, 7 months ago

    I think your Form.Element.setValue() is not a good implementation as if there are two forms with two inputs using the same name one of them could not be reached. You should not develop functions that take ids and names in the same value as it is incoherent.

    This code seems to be deprecated, isn’t it?

    There is already a Form.Element.setValue() function in prototype but it only works with ids and does not work with checkbox, radio, select.

  7. #7 Jehiah
    1 year, 7 months ago

    @Juan, thanks for your comments

    I’m not sure how you can make an argument that it’s depreciated, and that it does things the one in prototype doesn’t in the same comment, but you did. (and sidenote: this was posted in 2005 when there was no such function in prototype)

    the version in prototype.js does not handle hidden fields, or password fields.

    And when you are using id’s on your page they should be unique for the whole page, not just per form, so that part of the code is fine. (read up on id’s for more info about that)

  8. #8 Joey
    1 year, 6 months ago

    Hi,

    I’ve had a problem with JSON data that contained a NULL value. In that
    case .toString() does fail and thus the entire unpackToForm function fails
    at a certain stage in processing. Quite ugly…

    Here’s a simple patch to fix this problem:

    r87 | joey | 2008-09-02 15:58:28 +0200 (Tue, 02 Sep 2008) | 1 line

    Make sure prototyp doesn’t fail when a NULL value is transmitted

    Index: prototypeUtils.js

    — prototypeUtils.js (revision 40)
    +++ prototypeUtils.js (revision 87)
    @@ -60,6 +60,6 @@

    function unpackToForm(data){
    for (i in data){
    - Form.Element.setValue(i,data[i].toString());
    + Form.Element.setValue(i,data[i]==null?”:data[i].toString());
    }
    }

  9. #9 Joey
    1 year, 5 months ago

    Here’s another patch that fixes and improves the library. The old code
    wasn’t able to uncheck a checkbox which is quite annoying when updating
    the same form several times based on AJAX data. A 1-2 line patch fixes
    this and resets a checkbox if the value does not match. It’s only the else
    part of conditional code.

    http://www.infodrom.org/Infodrom/patches/misc/prototypeUtils_checkbox.patch

  10. #10 Joey
    1 year, 5 months ago

    Here’s another small patch that improves this library. While
    ‘Form.serialize()’ uses the value of input elements of type file
    ‘UnpackToForm()’ simply ignores these elements. However, in this case
    it would be useful to be able to reset their content to the empty
    string to prevent the same files being uploaded with every submit.
    The patch referenced below fixes this.

    http://www.infodrom.org/Infodrom/patches/misc/prototypeUtils_file.patch

  11. #11 Avdhut
    1 year ago

    Hey thanks i was looking for this as i wanted to set a value for a variable using prototype.js

  12. #12 Eric Nguyen
    7 months, 1 week ago

    For those coming across this in more recent years, please note that some of the features of prototypeUtils.js have been folded into the prototype library (I’m looking at v1.6). It will need to be updated substantially to play nicely with these more recent versions.

    Fantastic work, though. PrototypeUtils.js served me well for years. Thanks.