The form below has a date field, a time field, and a numerical field.

Using JavaScript, I've made a change in the time field trigger code to check if the time is less than 24 hours in the future. This can be used to add a premium to last-minute bookings, disable submission, whatever you need to have happen.

In the current example, a message is shown and the value in the numerical field is changed if the date/time selected is less than 24 hours in the future.

The code to accomplish this is below:

(function($){
    // Set variable to current date and time
    const now = new Date();
    let stamp = now.getTime();
    let tomorrow = stamp + (86400000);
    $('#field_time').change(function(){ 
        let date_array = $('#field_date').val().split('/');
        let time_array = $('#field_time').val().split(':');
        const time_slot  = new Date(date_array[2],(date_array[0] - 1),date_array[1],time_array[0],time_array[1]);
        let time_stamp = time_slot.getTime();
        if( time_stamp < tomorrow ) {
            $('#field_price').val(100);
            $('#field_notif').html('Your selected time is less than 24 hours in the future. Last-minute bookings are subject to a surcharge.');
        } else {
            $('#field_price').val(50);
            $('#field_notif').html('Your selected time provides adequate notice, so no surcharge will be levied.');
        }
    });
})(jQuery)

This is useful when displaying data side-by-side in situations where you don't want to use a table, and the height of individual elements may vary.

Also good for situations where you want your elements to lay out responsively in neat little rows without being forced to set an absolute height or min-height, and without using a "masonry" approach.

It also makes sense to bind this to the window re-size event or other events on occasion, but I'll leave that to you.

[vc_row][vc_column][vc_column_text]I need to do this all the time, but just infrequently enough that I have to figure it out all over again every time. No more. Now I have a handy-dandy inter-web-net-highway marker! 😛

All you need to do is replace the elements mentioned in the comments with references to your own, and you're off to the races!

[/vc_column_text][vc_text_separator title="Try It!" color="black"][vc_raw_html]JTNDZm9ybSUzRSUwQSUzQ3RhYmxlJTNFJTBBJTNDdGhlYWQlM0UlM0N0ciUzRSUwQSUzQ3RoJTNFU2VsZWN0JTIwJTNDYnIlM0UlM0NpbnB1dCUyMHR5cGUlM0QlMjJjaGVja2JveCUyMiUyMG5hbWUlM0QlMjJzZWxlY3RlZF9wbGFucyUyMiUyMHZhbHVlJTNEJTIyYWxsJTIyJTIwaWQlM0QlMjJjaGVja2JveGFsbCUyMiUyMCUyRiUzRSUzQyUyRnRoJTNFJTBBJTNDdGglM0VOYW1lJTNDJTJGdGglM0UlMEElM0MlMkZ0ciUzRSUwQSUzQyUyRnRoZWFkJTNFJTBBJTNDdGJvZHklM0UlMEElM0N0ciUzRSUwQSUzQ3RkJTNFJTNDaW5wdXQlMjB0eXBlJTNEJTIyY2hlY2tib3glMjIlMjBuYW1lJTNEJTIyc2VsZWN0ZWRfcGxhbnMlNUIlNUQlMjIlMjB2YWx1ZSUzRCUyMjElMjIlMjAlMkYlM0UlM0MlMkZ0ZCUzRSUwQSUzQ3RkJTNFTnVtYmFoJTIwV2FuJTIxJTNDJTJGdGQlM0UlMEElM0MlMkZ0ciUzRSUwQSUzQ3RyJTNFJTBBJTNDdGQlM0UlM0NpbnB1dCUyMHR5cGUlM0QlMjJjaGVja2JveCUyMiUyMG5hbWUlM0QlMjJzZWxlY3RlZF9wbGFucyU1QiU1RCUyMiUyMHZhbHVlJTNEJTIyMiUyMiUyMCUyRiUzRSUzQyUyRnRkJTNFJTBBJTNDdGQlM0VOdW1iYWglMjBUb28lMjElM0MlMkZ0ZCUzRSUwQSUzQyUyRnRyJTNFJTBBJTNDdHIlM0UlMEElM0N0ZCUzRSUzQ2lucHV0JTIwdHlwZSUzRCUyMmNoZWNrYm94JTIyJTIwbmFtZSUzRCUyMnNlbGVjdGVkX3BsYW5zJTVCJTVEJTIyJTIwdmFsdWUlM0QlMjIzJTIyJTIwJTJGJTNFJTNDJTJGdGQlM0UlMEElM0N0ZCUzRU51bWJhaCUyMFRoZSUyMFJlZSUyMSUzQyUyRnRkJTNFJTBBJTNDJTJGdHIlM0UlMEElM0MlMkZ0Ym9keSUzRSUwQSUzQyUyRnRhYmxlJTNFJTBBJTNDJTJGZm9ybSUzRSUwQQ==[/vc_raw_html][vc_raw_js]JTNDc2NyaXB0JTNFJTBBalF1ZXJ5JTI4ZG9jdW1lbnQlMjkucmVhZHklMjhmdW5jdGlvbiUyOCUyNCUyOSUyMCU3QiUwQSUwOSUyN3VzZSUyMHN0cmljdCUyNyUzQiUyMCUwQSUwOSUyNCUyOCUyNyUyM2NoZWNrYm94YWxsJTI3JTI5LmNsaWNrJTI4ZnVuY3Rpb24lMjglMjklMjAlN0IlMEElMDklMDl2YXIlMjBjaGVja0JveGVzJTIwJTNEJTIwJTI0JTI4JTIyaW5wdXQlNUJuYW1lJTVFJTNEc2VsZWN0ZWRfcGxhbnMlNUQlMjIlMjklM0IlMjAlMjAlMEElMDklMDljaGVja0JveGVzLnByb3AlMjglMjJjaGVja2VkJTIyJTJDJTIwJTI0JTI4dGhpcyUyOS5wcm9wJTI4JTIyY2hlY2tlZCUyMiUyOSUyOSUzQiUwOSUwQSUwOSU3RCUyOSUzQiUyMCUwQSU3RCUyOSUzQiUwQSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_js][/vc_column][/vc_row]

Put this in your functions.php or a plugin:

add_action('wp_ajax_nopriv_bsn_search_users','bsn_search_users');
function  bsn_search_users() {
	$user = get_user_by( 'email', $_REQUEST['user_email'] );
	if(false === $user) { // user doesn't exist
		// do something like:
		echo 'email not found'; // replace 'yourstatusmessageclass' with some class you define to hold the message
		exit();
	} else {
		// show the form
		echo ""; // replace 'form_wrapper_div' with the id of a div you place the form in
		exit();
	} 
}

Then in your page, go:

Enter the email of the person who sent you here:


Please select a valid form

[vc_row full_width="" parallax="" parallax_image=""][vc_column width="1/1"][vc_column_text]THE PROBLEM: Scripts can often impair loading of pages. Browsers choke, users get frustrated with waiting, customers go elsewhere.

THE CAUSE everybody uses the jQuery(document).ready(); event to load their scripts. Everything is trying to load all at once and bogging down the processor and working memory on the client machine.

THE FIX: don't use jQuery(document).ready() to load everything.
Bind your scripts to user actions like mousemove, mouseenter, click, etc.

This way your scripts only load when they're needed and the page loads quickly, without hanging browsers and annoying users.

That's it! Easy peasy. NEVER forget![/vc_column_text][/vc_column][/vc_row]

jQuery("#first_field").change(function(){
    // change this bit to whatever you need to
    if( jQuery(this).val() == 'Whatever' ) {
        jQuery('#second_field').val('Saved Vaue');
    }
})

"What's the point" you ask?

The point is that you can't just bind willy-nilly to ajaxComplete on a page where there are multiple elements using ajax. You have two options: either filter the results like so:

jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    jQuery( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
});

Or, as is sometimes the case, you want to reload or redirect the entire page on completion of a particular action, usually triggered by a click. You can use the method above to do it, but I find the .click method more readable if I wander back six months later and have to try to figure out what I was doing, which is often the case.

jQuery(document).ready(function() {
  jQuery('.mss-item-cell').click( function(){ 
   jQuery ( document ).ajaxComplete( function() {
      // do your stuff
	 // i.e. to reload the page after the action is complete go:
	 // location.reload(); 
     });
   });
});

A simple function to easily retrieve GET parameters by name.
Example:
for the URL: https://www.example.com/?prodID=1234

var prodId = getParameterByName('prodId');

Sets the javascript variable "prodID" to "1234" as defined on the GET string.

/* 
 * function getParameterByName(name)
 * returns value defined in URL parameter
 */
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}