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.

score 1 · Accepted Answer · answered May 28 '20 at 19:39

1

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

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

answered May 28 '20 at 19:39

Mohammedshafeek C S

1,916
2
16
26

1

still gives me the same error, knowing that the value is there in the hidden input – May 28 '20 at 19:41
1

im getting the value now by using getElementbyid, but its still not processing the php file. – May 28 '20 at 19:45
Check network tab in your browser to check whether to check your server call hits correct or not? – Mohammedshafeek C S May 28 '20 at 19:47
2

please any help? this is an important issue i need to solve – May 28 '20 at 20:32
It is probably because the input is hidden, try it again after removing hidden. – Berk Kurkcuoglu May 28 '20 at 20:38
1

i am getting the value of the input but nothing is being inserted into the database even though everything seems find and even the network executre the favorite.php file @BerkKurkcuoglu – May 28 '20 at 20:43
Click that php call and check what response inside .php file... – Mohammedshafeek C S May 28 '20 at 20:47
Try to call that URL through browser URL and pass one static message and check what would be d result – Mohammedshafeek C S May 28 '20 at 20:48
1

@MohammedShafeek i did what you said, i had some minor erros in my favorite.php file, now it is inserting in the database, but my browser still reloads after i click the link why is that? – May 28 '20 at 20:54
https://stackoverflow.com/questions/41020403/reload-a-page-with-location-href-or-window-location-reloadtrue – Mohammedshafeek C S May 28 '20 at 20:59
1

@MohammedShafeek shouldn't using ajax prevent the reloading of the browser? thats the whole idea of ajax, so why does it reload? – May 28 '20 at 21:02

How to send data through ajax function in JavaScript

1 Answers1