This project has moved. For the latest updates, please go here.

NewForm.aspx (Custom List Form)

Feb 4, 2011 at 4:00 PM

Is there a trick to getting this to work on Custom List Forms?

And/Or is there a way to have onclick event handlers for Radio Buttons?

OOB Surveys and List forms do not display the way I need them to. I have created a Custom List Form so that I can move
field descriptions around and "make it pretty."

The SPUtility code does find the fields correctly when using the OOB forms.

I get Object Errors when using Custom List Forms.

Secondly, in my scenario, I hide a Comments field on page load.

There are 5 multiple choice questions using Radio Buttons (Highly Satisfied to Very Unsatisfied); If a user selects the later, I want the Comments field to redisplay.

Hence, the onclick handler.

Feb 4, 2011 at 4:48 PM

No love on the Custom List Form, but I did figure out how to add OnClick event handler to radio buttons. The full code I used is thus...

You have to view source of your rendered page to get the radio button IDs.

function InitLoad() {

//declaring the first radio button and attaching “onclick” event handler to itvar Q1D = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl04");Q1D.attachEvent("onclick",showFields);
var Q1C = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl03");Q1C.attachEvent("onclick",showFields);
var Q1B = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02");Q1B.attachEvent("onclick",showFields);
var Q1A = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01");Q1A.attachEvent("onclick",showFields);

var Q1 = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00");Q1.attachEvent("onclick",showFields);
function showFields(){var Q1D = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl04");if (Q1D.checked==true){ SPUtility.GetSPField('Comments').Show();// alert('Onlick Works');}var Q1C = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl03");if (Q1C.checked==true){ SPUtility.GetSPField('Comments').Hide();// alert('Onlick Works');}var Q1B = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02");if (Q1B.checked==true){ SPUtility.GetSPField('Comments').Hide();// alert('Onlick Works');}var Q1A = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01");if (Q1A.checked==true){ 
SPUtility.GetSPField('Comments').Hide();// alert('Onlick Works');}var Q1 = document.getElementById("ctl00_m_g_8a1be6f2_c21e_4b9b_9dac_46a7bc9aec80_ctl00_ctl01_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00");
if (Q1.checked==true){  SPUtility.GetSPField('Comments').Hide();// alert('Onlick Works');}

Feb 4, 2011 at 8:07 PM

RE: Your first post...

It should work with Custom List forms (I usually test with a WSS 3.0 custom list form).

What version of SharePoint are you using? Did you remember to include prototype.js? Is the "Comments" field a rich text field? Can you post your code?

If you just need to Hide and Show fields, you might try using SPUtility.HideSPField('Comments') or SPUtility.ShowSPField('Comments'). I just included these functions in the 0.6 release.

RE: Your second post...

Another undocumented feature I think you will find useful is that the SPField objects (returned from SPUtility.GetSPField) contains some additional properties depending on the type. For a choice field that has radio buttons, you can use the "RadioButtons" property:

var choiceField = SPUtility.GetSPField('Radio Button Choice');
// this is a radio button choice field so the RadioButtons property is set
// RadioButtons is a hashtable
choiceField.RadioButtons.each(function (pair) {
    var labelText = pair.key;
    var radioButton = pair.value;
    if (labelText !== 'Highly Satisfied') {
        Event.observe(radioButton, 'click', function () {
            alert('onclick works!');

This should save you some time trying to find all the IDs of each element.

Sorry, I'm a bit behind on the documentation and I wasn't quite sure about the properties yet.