This is what I have in a page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sandbox</title>
<style type="text/css">
table.twocPC
{
width : 612px;
border-width: 1px;
border-spacing: 1px;
border-style: solid;
border-color: black;
border-collapse: separate;
background-color: white;
vertical-align: middle;
}
table.twocPC td{
border-width: 1px;
padding: 0px;
border-style: solid;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
</style>
<script type="text/javascript">
var VillageCoordList = new Array();
var buttonClick = false;
function addVillage()
{
var villages = document.getElementById("VillageList");
var newCoords = document.getElementById("coordinates").value;
var splitCs = new Array();
var splitCoords = new Array();
var delimUsed = false;
if(newCoords.indexOf(";") > 0)
{
//alert("Coord List entered, processing might take time...");
delimUsed = true;
splitCs = newCoords.split(";");
for(var j = 0; j < splitCs.length; j++)
{
if(ValidateCoords(splitCs[j]))
splitCoords.push(splitCs[j]);
/*else
alert("Invalid: " + splitCs[j]);*/
}
alert("Total valid coords: " + splitCoords.length);
}
if((ValidateCoords(newCoords) && !delimUsed) || (delimUsed && splitCoords.length > 0))
{
villages.innerHTML = "";
var coords = TrimCoords(newCoords);
if(!delimUsed)
VillageCoordList.push(coords);
else
VillageCoordList = VillageCoordList.concat(splitCoords);
VillageCoordList.sort();
//villages.innerHTML += VillageCoordList.length + "<br />";
for(var i = 0; i < VillageCoordList.length; i++)
{
//villages.innerHTML += "---" + i;
villages.innerHTML += VillageCoordList[i] + "<br />";
}
document.getElementById("coordinates").value = "";
}
else
alert("Invalid coordinate entered: " + newCoords);
buttonClick = true;
return false;
}
function submitFromVillageCoords()
{
if(buttonClick)
return false;
else
return true;
}
function clearVillage()
{
var villages = document.getElementById("VillageList");
villages.innerHTML = " ";
VillageCoordList.length = 0;
buttonClick = true;
}
function ValidateCoords(newCoords)
{
var re1='(\\d+)'; // Integer Number 1
var re2='(\\|)'; // Any Single Character 1
var re3='(\\d+)'; // Integer Number 2
var p = new RegExp(re1+re2+re3,["i"]);
var m = p.exec(newCoords);
if(m != null)
return true;
else
return false;
}
function TrimCoords(coords)
{
var re1='(\\d+)'; // Integer Number 1
var re2='(\\|)'; // Any Single Character 1
var re3='(\\d+)'; // Integer Number 2
var p = new RegExp(re1+re2+re3,["i"]);
var m = p.exec(coords);
return m[1] + m[2] + m[3];
}
</script>
</head>
<body>
<form action="sandbox.php" method="post" name="sandbox" onsubmit="submitFromVillageCoords();">
<table class="twocPC" style="text-align : center; border : 1px solid black;">
<tr heigth="15%">
<td width="25%">
Enter Village Coordinates<br/>
<input type="text" name="coordinates" id="coordinates" />
<br />
<!--<input type="submit" name="addVillage" value="Add Village" onClick="addVillage();" />-->
<button type="button" name="addVillage" onClick="addVillage();" >Add Village</button>
<input type="submit" name="addVillage" value="Clear Village List" onClick="clearVillage();" />
</td>
<td width="70%"><input type="submit" name="CalculatePC" value="Calculate Proximity" /></td>
</tr>
<tr heigth="80%">
<td width="25%" id="VillageList"> </td>
<td width="70%" id="ProximityChart"></td>
</tr>
</table>
</form>
</body>
</html>In the code above, the input type=submit will work fine but button won't saying the addVillage function does not exist... I am trying to make the button such that it executes the script without submitting the PHP page the code is to go on...