Running WHMCS v6.3? Saving Product Details Bug & Resolution

We recently identified a bug in the latest versions of WHMCS including version 6.3.1.  The bug consists of unexpected behavior when modifying a client’s product details and using the “Enter” key to submit the changes when the product is a cPanel Account.  In previous versions of WHMCS you could change a field, such as the renewal price, and press “Enter” to submit the form.  Over the years we had become accustomed to changing client product settings in this manner as we found it was the most efficient way to do it.

Due to this bug when modifying the details of a client’s product you have to use the “Save” button at the bottom of the form or WHMCS attempts the new “cPanel Single Sign-On” to access the cPanel account of the product.  On the surface this may not sound like a huge deal but over the course of the day the productivity lost over such a simple issue can add up fast.  In some cases the changes entered into the product are lost and even worse the representative may not notice it happened!

As we have also identified a fix we could put in place prior to WHMCS resolving this internally – we wanted to make that available.  This fix applies to both the “blend” as well as the “v4” WHMCS Administration templates.

Step One – Take a backup of your WHMCS Files!

Before you modify anything please make sure to take a good backup of your data. This is always good advice before making changes.

Step Two – Modify “blend” and “V4” Administration Templates.

You will want to open your respective “footer.tpl” file for the appropriate admin theme.  We applied this fix to both themes so that our staff could choose which theme they preferred while still retaining this fix.  The files to modify are:
/whmcs/admin/templates/blend/footer.tpl
/whmcs/admin/templates/v4/footer.tpl

The fix is to insert this block of JavaScript into the “footer.tpl” for each of the two themes just before the closing body tag (“</body>”).:

function getCurrentFileName(){
var pagePathName= window.location.pathname;
return pagePathName.substring(pagePathName.lastIndexOf("/") + 1);
}
if (getCurrentFileName() == "clientsservices.php") {
$('[name="username"]').next().attr('type', 'button');
}

How did you identify this issue and what does this JavaScript do, exactly?

Good question!  When we identified this issue my inner developer caused me to begin investigating the cause of this unexpected behavior.  I quickly determined that I could change the “Login to cPanel” button into a link and then the login still worked as did submitting changes to the product with the “Enter” key.

I reached out to Matt Pugh over at WHMCS seeking advice on the matter.  Matt is an amazing developer and has been wonderful to work with over the years.  I had suggested to Matt that we could use JavaScript to insert new link and then remove the button from the form.  Matt responded that it would likely be easier to just set the type attribute to “button”.

My testing indicated that Matt’s suggestion was a good fix and all I needed was the JavaScript to make it happen.  While I do wish the WHMCS Administration was fully templated, Matt said there are no plans for that currently so JavaScript is the only way to do this.  My next goal was to determine how to identify and modify just the “Login to cPanel” button without inadvertently modifying anything else anywhere else in the administration area.  This was tricky because the button had no ID or Name attribute set and the classes applied were applied to 13 other objects on the same page.

I determined there was only a single “username” field on the page and since the button we needed to modify was just after that my task became much easier.  I used jQuery, which is already baked into WHMCS, to identify the next object and apply the type attribute of “button“.  The next step was to make sure that this only happened on the appropriate page.

I used a simple if statement to determine if the current page was “clientservices.php” to make sure this only executed on this one page.  I thought about other products that wouldn’t have that “Login to cPanel” button, however, as the username field is within a table cell and there isn’t a ‘next’ object in the cell when the “Login to cPanel” button isn’t present the JavaScript doesn’t change anything.

By all means feel free to make use of this modification if it helps you.  If you run into any issues with it let me know in the comments and I’ll do my best to help you.