Salsa Blog

Success through Javascript: Auto-Selecting a Custom Field Checkbox

Welcome back! Today in "Success through Javascript", we'll tackle a common problem with signup pages. Several members have noted that they would like to use a custom field checkbox in the signup, and that the checkbox should be checked when the member sees it.

This is a perfect place to use Javascript, since the Salsa product does not provide a way to set a checkbox when it is displayed, and Javascript can check the checkbox in the browser.

Challenge: Check a checkbox for a custom field

We will meet this week's challenge by finding the name for the custom field then adding some Javascript to the signup page to check the field's checkbox. When we are done, you should have a pretty good idea of how to do this with any logical (true/false) custom field.

Before

This is the "before" condition using one of the signup pages from my test account. You'll see that the checkbox is not checked, and I really would like people to start receiving the Longhorn Letters.

Inserting the Javascript

Signup pages have a lot of places to put Javascript, so we'll put this javascript into the "Content after the submit button" field. You can find that at the bottom of the "Other Text" tab when you are editing the signup page.

Procedure

This is where we will find the custom field's name and insert some Javascript to make it be checked when it is viewed. The only prerequisite is that you have a signup page with a custom checkbox on it that you want checked on. So let's get started!

  1. We'll start by viewing the signup page. Click on the "View Page" link, and the signup page will appear.
  2. Next, view the HTML for the page. This sounds complicated, but it's not. All you have to do is to type control-U on a PC, or command-U on a Mac. You can also right-click on the page (or control-click on a Mac) and choose "View Source".

    When you do, then the HTML page will pop up. If you think that it looks like a lot of gobbledy-goop, then you would be correct! However, it is useful goop, since it tells the browser how to display the page to the user.

  3. Now, search for the text that's right by the checkbox. In my case, the text starts off with "I would like to", so I am searching for that.
  4. Once you have found the text, then you will see something very similar to this:
  5. Now that you've found the label with the text that you were looking for, go to the next <input> tag, and find the name. Highlight the name and the equal sign and the quoted value. In my case, I am highlighting "name='longhorn'". Once it's highlighted, copy it using control-C or command-C.

Now to add the Javascript to the signup page.

  1. Edit the signup page.
  2. Click on the "Other Text" tab.
  3. Paste in the text that we copied from the goop. We do not want to lose it!
  4. Next, copy the script (below) and paste it in underneath the text that we just copied. When you are done, you should see something like this:

    name='longhorn'
    &lt;script type="text/javascript"&gt;
    $("input[oooo]").attr('checked', true);
    &lt;/script&gt;
    		

    Update March 18, 2012. There have been some changes to Salsa, (and a typo found), so please use this Javascript instead:

    &lt;script type="text/javascript" src="/salsa/include/loadjquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    jQuery("input[oooo]").attr('checked', 'checked');
    &lt;/script&gt;
    			
  5. Now select and cut the name='whatever' string again, and replace "oooo" with it. When you are done, you will have something like this:

    &lt;script type="text/javascript" src="/salsa/include/loadjquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    jQuery("input[oooo] ").attr('checked', 'checked');
    &lt;/script&gt;
    				
  6. Save your signup page, and you are done!

After

Now, when you run your signup page, you'll see that the checkbox custom field is already checked. Here's what mine looks like:

Summary

We've seen that it's possible to automatically put a checkmark into a custom field checkbox. We did this by finding the checkbox's label, then remembering the checkboxes name. The name got put into some Javascript in the page configuration, and we have success!

I hope that this was all very helpful to you. If you have questions or suggestions, then please send me some mail at support@salsabs.com. Hope y'all have an excellent week!

Topics: Supporter Management Salsa