How to send data through ajax function in JavaScript

Question

i am trying to create an ajax favorite button in php similar to instagram and twitter.

my code seems to be fine and i am doing everything correctly and tried to get it working this way:

php code:

       $user_id = $_SESSION['active_user_id'];
        extract($_POST);
        extract($_GET);
        if(isset($_GET['message']))
        {
            $id=$_GET['message'];

            $q=$db->prepare("SELECT msgid,date,text

            FROM messages 
            WHERE to_id=? and msgid=?");
            $q->bindValue(1,$user_id);
            $q->bindValue(2,$id);
            $q->execute();
            $row2=$q->fetch();
            $d=$row2['date'];


            $fav_questionq=$db->prepare("SELECT *
            FROM messages
            LEFT JOIN users
            ON messages.to_id=users.id
            WHERE users.id=? AND messages.msgid=?

            ");
            $fav_questionq->bindValue(1,$user_id);
            $fav_questionq->bindValue(2,$id);
            $fav_questionq->execute();
            $frow=$fav_questionq->fetch();

            $fquestion= $frow['text'];


            $result = $db->prepare("SELECT * FROM fav_messages
                                WHERE username=? AND message=?");
            $result-bindValue(1,$user_id);  
            $result-bindValue(2,$id);               
            $result->execute();


        if($result->rowCount()== 1 )
        {
            $deletequery=$db->prepare("DELETE FROM fav_messages WHERE message=?");
            $deletequery->bindValue(1,$id);
            $deletequery->execute();
        echo("<script>location.href = 'index.php?a=recieved';</script>");
        }
        else
        {
        $insertquery = $db->prepare("INSERT INTO fav_messages (username,message,fav_question,fav_date) values(?,?,?,?)");
        $insertquery->bindValue(1,$user_id);
        $insertquery->bindValue(2,$id);
        $insertquery->bindValue(3,$fquestion);
        $insertquery->bindValue(4,$d);
        $insertquery-execute();
        }
        echo("<script>location.href = 'index.php?a=recieved';</script>");
        }

javascript code:

          <script>
            function GetXmlHttpObject() { 
        var xmlHttp=null; 
        try 
            { 
            // Firefox, Opera 8.0+, Safari 
            xmlHttp=new XMLHttpRequest(); 
            }
        catch (e) 
            { 
            // Internet Explorer 
            try 
                { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } 
            catch (e) 
                { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
            } 
        return xmlHttp; 
    }
   function ajaxfav(){
        var xmlHttp=GetXmlHttpObject();
        var url="favorite.php?message="+document.msgidform.fav_message.value;
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
            alert("Message is favorited");

            }
        }
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);

    }
  </script>

HTML form and link code:

        <form name="msgidform" method="post">
            <input type="hidden" name="fav_message" id="" <?php echo "value= '$msg_id'"; ?>></p>
        </form>

        <a class="msg-icon" href="" onclick="ajaxfav();"><img
                src="images/linedfav.png" id='img'></img></a>

but i kept getting an error in the console that reads:

"Uncaught TypeError: Cannot read property 'value' of undefined at ajaxfav" but i've fixed it and now it immediately goes to the alert message, but nothing is inserted into the database, meaning that the data was not sent to the php file. can someone advise me on what i can do? network tab of the ajax call

please i would appreciate any help or suggestion. the php file is called but does not insert anything into the database.

Answer 1

You can use document.msgidform.elements['fav_message'].value

in your ajaxfav() function to get name field value.