Enviar dados de javascript para um banco de dados mysql

JavaScript, conforme definido em sua pergunta, não pode funcionar diretamente com o MySql. Isso ocorre porque ele não está sendo executado no mesmo computador.

O JavaScript é executado no lado do cliente (no navegador), e os bancos de dados geralmente existem no lado do servidor. Você provavelmente precisará usar uma linguagem intermediária do lado do servidor (como PHP, Java, .Net ou uma pilha JavaScript do lado do servidor como Node.js) para fazer a consulta.

Aqui está um tutorial sobre como escrever algum código que vincule PHP, JavaScript e MySql, com código sendo executado no navegador e em um servidor:

http://www.w3schools.com/php/php_ajax_database.asp

E aqui está o código dessa página. Ele não corresponde exatamente ao seu cenário (ele faz uma consulta e não armazena dados no banco de dados), mas pode ajudá-lo a começar a entender os tipos de interações que você precisará para fazer isso funcionar.

Em particular, preste atenção a esses bits de código desse artigo.

Bits de Javascript:

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();

Bits de código PHP:

mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);

Além disso, depois de entender como esse tipo de código funciona, sugiro que você use a biblioteca JavaScript jQuery para fazer suas chamadas AJAX . É muito mais limpo e fácil de lidar do que o suporte AJAX embutido, e você não terá que escrever código específico do navegador, já que o jQuery tem suporte entre navegadores embutido. Aqui está a página para a documentação da API do jQuery AJAX .

O código do artigo

Código HTML/Javascript:

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

Código PHP:

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>