Salsa Blog

Using Javascript to Set a Checkbox in your Signup Page

Howdy! This is Allen. I'm a Senior Support Specialist, one of Salsa's resident technical geeks, and I get to work from the best city in the whole continent, Austin. The focus of today's post is using Javascript to improve the Salsa experience for you and your supporters.

Javascript is a language that runs on the browser. Javascript (or "JS") modifies the contents that the user sees but does not change the Salsa application. In addition to their regular programming tools, Salsa developers use JS to make interesting applications. Data is collected and then displayed, or fancy stuff appears and disappears.

I use Javascript to make changes to the HTML so that you see what you would like to see, and that's what I'd like to share with you in this post.

Challenge: Set a Checkbox in a Signup Page

Our challenge today is to set a checkbox in a group on a Salsa signup page. Doing so will make this the default group to which the new subscriber will be added.

Before

The "before" picture shows a list of groups that a supporter can join. We'd like to help the supporter just a bit by suggesting "Charlie" as a group to join. So let's go ahead and check "Charlie."

Add Javascript

It turns out that signup pages are very Javascript-friendly and have some places where we can put scripts. I've chosen to put this script here:

Procedure

  1. Edit your signup page, then click on the "View Page" anchor in the publishing box to view it.
  2. View the source by choosing "View|Source" from the Firefox menu.
  3. Find the checkbox that you want to check. In this case, I searched for "Charlie" and found this:
  • Write down the checkbox's name. In my case, the checkbox is named "groups_KEY2429_checkbox". Yours will be different!
  • We need to find a space to put some Javascript. Since this is a signup page, that will be easy: we will use the "Content after the submit button" field under the Other Text tab.
  • Time to write the Javascript. Copy these 3 lines and paste them into the "Content after the submit button field":
    <script type="text/javascript">
    	$('input[name="groups_KEY2429_checkbox"]').attr("checked", true);
    </script>
    	
  • Now for the important part. Change "groups_KEY2429_checkbox" to the name that you found for your checkbox. Just type it in there, leaving the quotation marks intact. Double-check your work, and then click the "save" button.
  • Now for the test. Click on the "View Page" button in the publishing box, and Voila! Your checkbox is checked!

After

Here's what my signup page looks like now that the Javascript is inserted:

Summary

We've found out that Javascript runs in the browser, so it affects what you and your supporter will see. And we've found a way to set a checkbox in a signup page by adding one line of javascript.

Next time, we'll find out how to change an abbreviation in the list of states. Until then, hope y'all have an excellent week!

Topics: Supporter Management Salsa