How to make Javascript work inside a page called with AJAX?
Hello guys,
I am using a form validation class I got from the internet. Now I have a main page wherein I have a <div id="form"></div> that, using AJAX, displays other pages with forms like textboxes, etc. for a user to input.
Here is the code for my main page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Community Mapping and Profiling System - Home</title>
<link rel="stylesheet" type="text/css" href="../mainDesign.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script language="JavaScript" src="../Javascript/validation.js" type="text/javascript" xml:space="preserve"></script>
</head>
<body onload="initialize()">
<center>
<table class="center" width="1200">
<tr>
<td align="right" colspan="6" class="greeting">Welcome, <?php echo $user ?>! <a href="../Login/dLogout.php">Logout</a></td>
</tr>
<tr>
<td>
<?php include("../Header/headerPO.php"); ?>
</td>
</tr>
<tr>
<td>
<table width="1200" class="white">
<tr>
<td valign="top" align="center" width="200">
<form name="myform2">
SOME TABLE HERE WITH CHECKBOXES (deleted it cause it is too long)
</form>
</td>
<td valign="top" align="center">
<div id="map_canvas"></div>
</td>
<td valign="top" width="400" align="left">
<div id="form">
Click the map where you want to add information.
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><?php include("../Header/footer.php"); ?></td>
</tr>
</table>
</center>
</body>
</html>
Then this is an example page of what goes into to the <div id="form"></div>
Code:
<form id="myform" name="myform" action="dAddThreat.php?lng=<?php echo $lng; ?>&lat=<?php echo $lat; ?>" method="post">
<table>
<tr>
<td colspan="3"><font color="red">* - Required Fields</font></td>
</tr>
<tr>
<th colspan="2" align="center" class="sidemenu">Add Possible Threats</th>
</tr>
<tr>
<td align="right">Type:</td>
<td align="left">
<select name="threatList" style="width:99%;">
<?php getDropdown(); ?>
</select>
</td>
<td><font color="red">*</font></td>
</tr>
<tr>
<td align="right">Name:</td>
<td align="left">
<input type="text" name="txtName" maxlength="50" style="width:99%;" />
</td>
<td><font color="red">*</font></td>
</tr>
<tr>
<td align="right">Address:</td>
<td align="left">
<textarea name="txtAddress" style="resize: none; width: 300px; height: 150px; white-space: nowrap;">
</textarea>
</td>
<td><font color="red">*</font></td>
</tr>
<tr>
<td align="right">Notes:</td>
<td align="left">
<textarea name="txtNotes" style="resize: none; width: 300px; height: 150px; white-space: nowrap;">
</textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" name="back" value="Back" onClick="show_pageAdd('back',<?php echo $lat; ?>,<?php echo $lng; ?>)" />
<input type="submit" name="s" value="Add" />
</td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript" xml:space="preserve">//<![CDATA[
var frmvalidator = new Validator("myform");
//frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("txtName", "req", "Please enter a name.");
//]]>
</script>
With this, the form still submits even thought the textbox "txtName" is empty. I have used this form validation for every project I developed and I know that this would work in a solo page (no AJAX calls to display it in <div> or whatsoever)
I hope you get what my question is! Please help me!! I am desperate!! Thanks!!
