It’s bound to happen, you’re going to be in a hurry and put the snazzy, slick Mail Chimp sign-up form on your website.  The pop-up, after all, looks great, but I highly recommend testing it because there are some serious assumptions the API author makes, one being that your JQuery library, which this pop-up behavior requires is, for some reason, in the same folder as the path from which the pop-up is being called from.

That’s a problem since most URL paths in WordPress sites don’t actually exist.  See the problem?!

This article helps explain the best ways to fix this issue, if you’re not sure, use the “embedded form” option in Mail Chimp instead OR be sure to install the JQuery library before the Mail Chimp pop-up script gets called.  I hope this saves another PHP developer/Wordpress developer some time finding the solution.  I just wish Mail Chimp would CDN the version of JQuery if it can confirm JQuery isn’t already loaded, this would ensure no version conflicts and make the process much easier.

To view the solutions to this Mail Chimp pop-up problem, click here!


Accessing the Google Map API for your own in-form location input widget which allowss users to “pin” their location on a Google map and allow you to store their map location, latitude and longitude in your database is easy with this library.  It’s just like the JQuery calendar widget — it’s as simple, clean and reliable!

Here’s a sample of how to use this code.

<fieldset class=”gllpLatlonPicker”>
<div class=”gllpMap”>Google Maps</div>
<br/>
<input type=”hidden” class=”gllpLatitude”/>
<input type=”hidden” class=”gllpLongitude”/>
<input type=”hidden” class=”gllpZoom”/>
<input type=”text” class=”gllpLocationName” size=42/>
</fieldset>

To learn more, check this powerful library out and check out the demo here!


The JQuery UI library’s Datepicker function is very convenient.  Here’s a way to override the date field if you want to allow the user to also input the time of day along with it without adding an extra field and deal with merging the values in the backend.  You can also add “+d.getSeconds()” if you want to allow seconds, but I find that’s wasted space.

  $('.datepicker').datepicker({
        dateFormat: 'yy-dd-mm',
        onSelect: function(datetext){
            var d = new Date(); // current time
            datetext=datetext+" "+d.getHours()+":"+d.getMinutes();
            $('.datepicker').val(datetext);
        },
    });

 


On occasion, you’re going to have some mammoth form that doesn’t validate properly with any Javascript validation library.   One event is when the form you are given to deploy has a lot of checkboxes and one of those checkboxes needs to be checked to be valid.  The easiest way to make sure this happens is to create a form submission even listener then if there’s at least one checkbox checked, it returns true at which time it triggers the form validation OR it sends the “e.preventDefault()” command, which will stop any further processes, in this case, triggering the form submission which would then trigger the validation.  It’s kind of pre-submit validation, but to me, it’s the fastest way to “piggyback” on the existing form validation if everything else works properly.

Here is a sample, and this is the form library that I think is incredibly reliable, clean, and very easy to use:

http://jqueryvalidation.org/documentation/

$("#mainForm").on('submit',function(e){

   if ( $("input[type='checkbox']:checked").length > 0) {


   }
   else {
         e.preventDefault();

         alert("Please check at least one category you wish to be listed in.");
         return false;
   }

   return true;

});


$("#mainForm").validate();

This works well CDN’d with Symfony form projects.


In a jQuery form post, here is how you add more data to the serialized form data.  This is useful if you find yourself needing to pass some extra data along with the AJAX post.  This is a barebones example of a blind AJAX post to a form handler script called “form_handler.php”.

I find jQuery’s “serialize” and “serializeArray” functions are very efficient when collecting form data, you can’t get much easier than that.  The beauty of using a framework, whether it’s a Javascript framework, or PHP framework, these built-in libraries and functions save coding time.

var data = $('#myForm').serializeArray();

data.push({name: 'wordlist', value: wordlist});

$.post("form_handler.php", data);

I hope this saves someone time!  This solution works well in many different instances you have to post a form through Javascript.

– Aaron  Belchamber