JavaScript Archives - K.B. Carte

Do you have a web-to-lead form on your website? Do you get annoyed that people can still submit the form without verifying the captcha? Sure it looks like it went through, but no record are added to Salesforce. Which is good, but if an actual user submits a form and they just forgot the captcha, it’ll look like it went through to them, but nothing is created….

A good way to approach this is disable the submit button until the captcha is verified. Great! So how do we do that?

As is the answer to most dev questions these days…… JavaScript…..

Don’t worry, it’s very little JS, and we’ll even use jQuery to make it even simpler!

First, we should know that Google gives us a callback we can hook into for the captcha called data-callback. By passing it a function, we can call that function once the captcha returns.

Next, lets disable the submit button by adding disabled="disabled". The submit button should be close to the end of the generated form code:

<input disabled="disabled" class="submit-button-captcha" type="submit" name="submit">

This is what the captcha tag will look like when Salesforce generates a web-to-lead form:

<div data-sitekey="YOUR_SITE_KEY"></div><br>

Now, we just need to add the callback to it. We’re also going to add a class to it so we can target the element in JS:

<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="recaptcha_check"></div><br>

So far so good! Next up is the callback function itself. It’s very simple, just grab that submit button and remove disabled:

function recaptcha_check(){
    jQuery(".submit-button-captcha").removeAttr('disabled');
}

And that’s it! That JS function can either go in your /js/scripts.js or directly after the generated form code itself with <script></script> tags.

And some quick bonus tips for styling. We can target the disabled/enabled submit button in CSS. This is good if you want to grey out the text, or remove hover animations to help drive home that it’s disabled. The next couple of snippets are for example and the important part is the selector itself so you will know how to target it.

/* 
    only when enabled, pseudo selector :enabled 
*/
form input[type=submit]:enabled {
    border: 1px solid #00b7ea;
}

/* 
    lets scale the button up a touch and play with the background
    on hover ONLY when submit is enabled 
*/
form input[type=submit]:hover:enabled {
    transform: scale(1.1);
    background: #424242;
}

Recently I was tasked with generating a CSV file using the data from a table. Normally I would do this in php where the actual data was coming from, but I didn’t see the need to go hacking around on the back-end when this could be done in JS after all the data was loaded. The data was loaded via AJAX, so it took a bit to populate.

The table also uses DataTables to make it pretty, sortable, and paged, but since it was paged I couldn’t just grab the data from the <td>’s. So instead I made an array, then pushed the ‘row’ data to it inside the ajax call. Once all the data is in, the download button appears and you get a CSV file.

Note: This is mostly pulled from a gist example, link is commented in the snippet below.

var csv_arr = [];
// add header first before pushing data
csv.push(["Bruh", "Data", "Date", "Ect"]);

// push some data, I did this inside the ajax call
// mentioned in the copy above
for(var i = 0; i <= somedata.length; i++){
    csv_arr.push(somedata[i]);
}

// found: https://gist.github.com/yangshun/01b81762e8d30f0d7f8f
document.querySelector("#muh_epic_button").addEventListener("click", function (){
    var csvString = csv_arr.join('\r\n'); // Windows newline
    var a = document.createElement('a');
    a.href = 'data:attachment/csv,' + csvString;
    a.target = '_blank';
    a.download = 'data.csv';
    document.body.appendChild(a);
    a.click();
});

GitHub Link

Category: JavaScript

Web-To-Lead Verify Captcha

JS Array to CSV Download