sid78669 0 Junior Poster

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 = "&nbsp;";
        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">&nbsp;</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...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.