title: calling a PHP script from Javascript to insert data to a mysql database
body: <p>There is a button in my html file upon click I need two things to be done. (Insert data to a database and reload the page) So I call a javascript function in the onclick event.</p>
  
  <p>This is the function inside the javascript file:</p>
  
  <pre><code>function grandFinale()
  {
       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 &amp;&amp; xmlhttp.status==200)
   {
    //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
  }
  xmlhttp.open("GET","insert.php?q=",true);
  xmlhttp.send();
  document.location.reload();
  
  }
  </code></pre>
  
  <p>This is the insert.php file which is mentioned above</p>
  
  <pre><code>&lt;?php
      $con = mysql_connect("localhost","uname","password");
  if (!$con)
    {
     die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db("SnakeDB", $con);
  
  $sql="INSERT INTO masterTable (Name, Score) VALUES ('$_GET[name]','$_POST[txtScore1]')";
  
  if (!mysql_query($sql,$con))
    {
    die('Error: ' . mysql_error());
    }
  echo "1 record added";
  
  mysql_close($con);
  ?&gt;
  </code></pre>
  
  <p>Here is the part of HTML file which contains the places I want to update to the database</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
   &lt;p&gt;You scored :: &lt;/p&gt;&lt;p id="txtScore1"&gt;&lt;/p&gt;
  &lt;input type="text" placeholder="Your Name" id="name"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>The issue is the database is not updated!! Only the reloading happens. Please suggest me a solution</p>