jQuery .submit Not Being Called

Attempting to use Ajax/jQuery for the first time and running into an issue where form submission isn’t being handled by my jQuery function (for a plugin I’m developing). Can’t for the life of me understand why!

I have a plugin admin page which has a button (‘Add New’) … clicking the ‘Add New’ button changes the contents of another div on the page (loads a form consisting of two input fields and a submit button). I can get the contents of the div to display (clicking the ‘Add New’ button), but can’t get jQuery to handle the clicking of the form’s submit button.

Here’s the code in the main plugin file which adds the submenu (‘Race Types’), enqueues the scripts (I have two separate script files) and builds the HTML page

/* ******************************************************
 * Create the submenus for managing race report options *
 * ******************************************************/

/* Adds the submenus for managing race report options */
// Hook for adding admin menus
function swt_race_reports_add_pages() {
	global $raceTypesPage;
	global $raceReportsPluginDir;

	$raceReportsPluginDir = get_settings('home').'/wp-content/plugins/'.dirname(plugin_basename(__FILE__));

	// add the new sub-menus
	$raceTypesPage = add_submenu_page( "edit.php?post_type=swt_race_report", "Race Types", "Manage Types", "manage_options", "race_report_types", "swt_raceReports_manageReportTypes");

	// add any required scripts for Race Type page
	add_action( "admin_enqueue_scripts", 'swt_raceReports_admin_head' ); // general JavaScript for Race Report plugin
	add_action( "admin_enqueue_scripts", 'swt_raceReports_raceType_scripts' ); // general JavaScript for Race Report plugin
}
add_action('admin_menu', 'swt_race_reports_add_pages');

/* ******************************************************
 * All scripts for managing race report options 		*
 * ******************************************************/

/* Adds to the page header for this plugin */
function swt_raceReports_admin_head($hook) {
	global $raceReportsPluginDir;
	global $raceTypesPage;

	if ($hook != $raceTypesPage) {
		// we aren't on the $raceTypesPage, so skipout
		return;
	}

	wp_enqueue_script('swt_raceReports_js', $raceReportsPluginDir . '/js/swt_raceReports.js');
	wp_localize_script( 'swt_raceReports_js', 'swt_raceReports_pluginPath', array( 'plugin_dir' => $raceReportsPluginDir ) );
	echo "<link rel='stylesheet' href='$raceReportsPluginDir/raceReports.css' type='text/css' />\n";
}

/* Adds the script for handling form submission */
function swt_raceReports_raceType_scripts($hook) {
	global $raceReportsPluginDir;
	global $raceTypesPage;

	if ($hook != $raceTypesPage) {
		// we aren't on the $raceTypesPage, so skipout
		return;
	}

	wp_enqueue_script('swt_raceReports_raceType_ajaxHandler', $raceReportsPluginDir . '/js/swt_raceTypes.js', array( 'jquery' ));
}

/* ******************************************************
 * All pages for managing race report options 			*
 * ******************************************************/

function swt_raceReports_manageReportTypes() {
	echo "<h1>Race Types</h1>";
	echo "<section id='race_type_selection'>";
		echo "<label for='selected_race_type'>Available Race Types</label>";
		echo "<select name='selected_race_type'>";
			echo "<option value='nothing'>No Race Types Exist</option>";
		echo "</select>";
		echo "<button type='button' class='button-primary' onclick='loadCreateNewRaceType()'>Add New</button>";
	echo "</section>";
	echo "<hr />";
	echo "<section id='selected_race_type_section'>";
		echo "<p>Please select a race type<p>";
	echo "</section>";
}

On click of the ‘Add New’ button I’m calling the loadCreateNewRaceType() method which is stored in the file swt_raceReports.js. This script handles clicking of the ‘Add New’ button and displays a the contents read from a PHP file (swt_raceReport_raceTypeCreateForm.php)

function  loadCreateNewRaceType() {
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("selected_race_type_section").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET",swt_raceReports_pluginPath.plugin_dir+"/swt_raceReport_raceTypeCreateForm.php",true);
	xmlhttp.send();
}

Here’s the code for building the form that was loaded in the JS above … the code is stored in the swt_raceReport_raceTypeCreateForm.php file:

echo "<h2>Create New Race Type</h2>";
echo "<div id='failureMessage' class='statusMessage'><p>There was a problem creating your race type.</p></div>";
echo "<form id='swt_createRaceTypeForm' action='' method='post'>";
	echo "<p><label for='raceTypeName'>Race Type Name</label>: ";
	echo "<input type='text' name='raceTypeName' placeholder='Name your race type' required='required' /></p>";
	echo "<p><label for='parentRaceType'>Parent Race Type</label>: ";
	echo "<select name='parentRaceType'>";
		echo "<option value='noParentRaceType'>No Parent Type</option>";
	echo "<p></select></p>";
	echo "<p><input type='submit' name='swt_createRaceTypeButton' class='button-primary' value='Create Type'></p>";
echo "</form>";

Here’s the JS which I want called when the submit button in the swt_createRaceTypeForm form is clicked … this code is saved in a file called swt_raceTypes.js. For now I just want to display a test alert message to indicate this is working:

jQuery(document).ready(function( $ ) {
	alert('loading jQuery ready function');
	$('#swt_createRaceTypeForm').submit(function(e) {
		alert('test');
		e.preventDefault();
	});
});

Up until clicking of the form submit button, everything works as expected. When my page first loads (before anything is rendered), I see the “Loading jQuery ready function” alert popup, so I can confirm the script file is loaded (at this point the swt_createRaceTypeForm form isn’t displayed on the screen yet, that only happens once the ‘Add New’ button is pressed and the form gets displayed).

Once the swt_createRaceTypeForm is displayed and the submit button is pressed, I’d expect the “Test” alert message to popup … instead the entire page is refreshing and I start all over (of course this is the default behaviour of a PHP form with an empty action … which is done on purpose since I’m expecting the jQuery statement to intercept the submit action). In addition to displaying the test alert message, e.preventDefault() should be preventing my page from reloading and it’s not.

Any ideas, suggestions or help would be greatly appreciated.