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 =)

10 Responses

  1. #1 Fernando da Silva Trevisan
    2 years, 10 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
    2 years, 10 months ago

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

  3. #3 Jack
    2 years, 8 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
    1 year, 8 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
    1 year 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
    3 months, 2 weeks 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
    3 months, 2 weeks 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
    2 months, 2 weeks 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
    2 months, 1 week 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 month, 3 weeks 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

Leave a comment