We Keep Coding

How do I get a function to run with the .onsubmit event?

There is probably a really easy solution to this but I cannot for the life of me work out how to fix this issue, and nothing I have found so far has done the trick.
I'm trying to get the function "validate" to run when the form "apply" is submitted:
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
applyForm.onsubmit = validate;
}
Validate looks like the following:
function validate() {
alert("If this alert is up then validate is running");
var dateOfBirth = document.getElementById("dob").value;
var state = document.getElementById("state").value;
var postcode = document.getElementById("postcode").value;
etc.
The function "setJobValue" is running (so I know init is working) and there are no errors in the console, but what adjustments would I have to make for validate to be called?

Well, what happens is that when you put your code above in the head, the script runs when the HTML gets rendered. So during that time, it allocates different memory and function blocks. So when you call that function again, then it gives you different results and no errors because of the existing references. Well its a bit weird but its the way JS works and it is always recommended to put your JS code at the bottom of the page.

You can directly call validate method from your init method instead.
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
validate();
}

When we assign a function to an event, it will fire at last.
so in your case, This should work
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
applyForm.onsubmit = functionToSave;
}
And call your validation method on the submit button onclick event.

Function is being called when page loads instead of on click event

I am trying to get this function to be called via click event, but for some reason it is being called when page loads. I am completely baffled on why my function is reacting this way.
Here is my function
var registerTab = function(panel){
var active = 'off';
if($('#'+panel).css('left') <= '0'){
$('#'+panel).animate({left: '0'});
active = 'on';
} else {
$('#'+panel).animate({left: '-380px'});
}
};
$(function() {
tabRegister.on('click', registerTab('sidePanel'));
});
The weird thing is if i call it when i remove the passed variable and hard-code the selector in it works fine which again makes no since to me. Please any help would be very helpful and save me some hair.

registerTab('sidePanel')
This call will cause the function to be called immediately. I think what you really want is this:
tabRegister.on('click', function () {
registerTab('sidePanel')
});

Passed speed variable to jQuery slideToggle() is ignored if in milliseconds

I'm having a strange issue, and my google-fu is failing me. I'm working on a WordPress plugin, and I'm passing variables from the settings page to the jQuery script. It's all passing perfectly fine, except that within the script, it's completely ignoring the value for the speed in slideToggle().
For the record, I'm loading a jQuery script (jQuery UI - v1.11.2): core and effects.
Here is my script:
jQuery(document).ready(function($) {
var $show_open_by_default = wp_settings.expanded;
var $showtext = wp_settings.show;
var $hidetext = wp_settings.hide;
var $speed = wp_settings.toggle_down;
var $easing = wp_settings.easing;
if($show_open_by_default != 1) { // if setting is unchecked...
$('.comment .children').hide(); // hide all children on load
}
$('.comment-list > li').each(function() {
if( $(this).find('.children').length > 0 ) {
$(this).find('.children').before('<div class="replylink"><span class="show">'+$showtext+'</span></div>');
}
});
$('.replylink').hover(function() { // when hovering the replylink...
$(this).css('cursor','pointer'); // change the cursor...
}, function() {
$(this).css('cursor','auto');
}).click(function() { // and on click...
// change the text
$(this).text( $(this).text() == $hidetext ? $showtext : $hidetext);
// animate the visibility of the children
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length == 0 ) {
$visibleSiblings.slideToggle($speed, $easing);
} else {
$nextDiv.slideToggle($speed, $easing);
}
});
});
It all works perfectly fine, except for the slideToggle() call at the end. If I place alert($speed); just before the slideToggle() call, it does, indeed, alert the correct setting just fine. However, the slideToggle ignores it and reverts to the default speed.
What's funny is, if I manually put in a value, it works just fine. But with the passed value, it ignores it. I am completely stumped on this. I've tried everything I can think of to make it pay attention to that number, but it will only do so if I hard-code it in the slideToggle() call. If it's passed, it won't pay attention to it. Am I missing something?
Any help would be appreciated. Thanks!

Just wanted to post the the solution was found - but the answer is in the comments. Basically, the passed value is a string, not numeric. So I have some conversion to do in my PHP file to be sure the value is passed correctly based on the type.

Selector to apply jQuery event to two DOM ids

I have two select menus (#id1 and #id2) that, when validated as containing a user error, should instigate some DOM changes (remove error notice) when either one of them gets interacted with.
Again:
var Heat_Check = jQuery('#id1' or '#id2').change(function() { ... });
PS. I know there's no return value from that chain.

May be you wanted to check if change is triggered from either of those select. Try below,
var Heat_Check = false;
jQuery('#id1, #id2').change(function() { Heat_Check = true; });
function heatCheck () {
if(Heat_Check) {
//Do your stuff
console.log('It is hot');
}
}

The comment from #Vega is right, but for completeness you can also do this:
heatChangeHandler = function() {
// ....
};
$('#id1').change(heatChangeHandler);
$('#id2').change(heatChangeHandler);
In general it is better to put multiple selectors in one $(), but it's worth knowing that functions can be addressed as variables, and thus referenced many times.

What is the difference between this.click() and $(this).click()?

In the end, I have decided that this isn't a problem that I particularly need to fix, however it bothers me that I don't understand why it is happening.
Basically, I have some checkboxes, and I only want the users to be able to select a certain number of them. I'm using the code below to achieve that effect.
$j( function () {
$j('input[type=checkbox].vote_item').click( function() {
var numLeft = (+$j('#vote_num').text());
console.log(numLeft);
if ( numLeft == 0 && this.checked ) {
alert('I\'m sorry, you have already voted for the number of items that you are allowed to vote for.');
return false;
} else {
if ( this.checked == true ) {
$j('#vote_num').html(numLeft-1);
} else {
$j('#vote_num').html(numLeft+1);
}
}
});
});
And when I was testing it, I noticed that if I used:
$j('input[type=checkbox]').each( function () {
this.click()
});
The JavaScript reacted as I would expect, however when used with:
$j('input[type=checkbox]').each( function () {
$j(this).click()
});
It would actually make the counter count UP.
I do realize that it isn't the most secure way to keep count using the counter, however I do have server side error-checking that prevents more than the requisite amount from being entered in the database, that being the reason that I have decided that it doesn't actually need fixing.
Edit: The $j is due to the fact that I have to use jQuery in noConflict mode...

$(this) contains a jQuery wrapper (with lots of functions) whereas this is solely the DOM object.

The fact that counter is going up gave me the clue that there is a link between checked attribute, which you are using, and firing the click event manually.
I searched Google for 'jquery checkbox click event raise' and found this link, where author faces the exact same problem and the workaround he used.
http://www.bennadel.com/blog/1525-jQuery-s-Event-Triggering-Order-Of-Default-Behavior-And-triggerHandler-.htm
On a side note, I think you can simplify your code further:
$j('input[type=checkbox].vote_item').click(
function()
{
var maxNumberOfChoices = 5;
//get number of checked checkboxes.
var currentCheckedCount = $j('input[type=checkbox].vote_item :checked');
if(currentCheckedCount > maxNumberOfChoices)
{
//It's useful if you show how many choices user can make. :)
alert('You can only select maximum ' + maxNumberOfChoices + ' checkboxes.');
return false;
}
return true;
});

this.click() calls the browser DOM method click().
$(this).click() calls the jQuery method click(), which does more than just call the browser method: see the implementation of the function trigger for details.