Pass variable value from JS to PHP

Question

I have a problem in passing a value from JS to PHP so that it can be used as a parameter for a PHP function. The JS function will be trigger by onclick event once the link was clicked. Here is the JS + HTML code:

<script type="text/javascript">
   function insertIntoDb() {
      $.GET OR POST("insert.php");
      return false;
   }
</script>

<a href="#" onclick="insertIntoDb();">INSERT MY USERNAME</a>

PHP (insert.php):

<?php
    session_start();

    function insert($username){
        $username = mysql_real_escape_string($username);
        $query = mysql_query("INSERT INTO List(Username) VALUES('$username')") or die(mysql_error());
    }

    if(isset($_POST['Username'])){
        insert($_POST['Username']);
    }
?>

Thank you for the one who can help me.. I am very new to PHP and JS so please forgive my stupidity.

Answer 1

<script src="http://code.jquery.com/jquery-latest.min.js" type='text/javascript'></script>
<script>
   $(document).ready(function(){ 
       $("#insert").click(function(event){
           $.post('insert.php',{username:$(this).html()});
       })
   });
</script>
<a href='javascript:void(0);' id='insert'>Username</a>

<?php
function insert($username){
    $conn = mysql_connect("host","user","passwd");
    if($conn){
        $username =  mysql_real_escape_string($_POST['username']);
        $result = mysql_query("INSERT INTO test.user(username) VALUES('".$username."')") or die(mysql_error());
        mysql_close($conn);
    }
}
if(isset($_POST['username'])){
    insert($_POST['username']);
}
?>

Answer 2

You pass data from the browser to your server. Javascript is a language for manipulating the browser. PHP is your server side language.

You can pass data in a get or post request such as "mypage.php?Username=john"

What you want is a form so that you can interact with the user

<script type="text/javascript">
    function insertIntoDb() {
      document.getElementById("myform").submit();
      //or if you want to use jquery and ajax
      $.post("insert.php", $("#myform").serialize());
      return false;
    }
</script>

<form id="myform" method="post" action="insert.php">
    <a href="#" onclick="insertIntoDb();">INSERT MY USERNAME</a>
    <input type="text" name="Username"></input>
</form>