AJAX POST XMLHttpRequest javascript and php cant save into text file

Question

I am trying to send data entered on html text box to javascript. Then through ajax i am sending the data to php so it can be saved in a text file. The problem is the ajax does direct it self to the php, but the php doesnt receive the data. so each time data is entered on the form, the text file indents. Meaning it adds null value to the text file. What should i do to so that php is able to receive the data sent by javascript?

HTML

<html lang="en">
<head>
        <meta charset="utf-8"/>
        <link href="list.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <script src="list_java.js" type="text/javascript">
        </script>
    </head>

<h1> 
<center><input id="box" type="textbox"  name="box" value="Enter Movie:"  />  <input id="add" type="submit" value="" onClick="addStuff();" /> </center>

</h1>

    <body>
        <div id="status" ></div>
        <h2>MOVIE NAME:  </h2> <h3>      LIKES </h3>
            <ul id ="list" name="list">
        </ul>   
        <ul id ="likes_list" name="likes_list">
        </ul>   

    </body>

</html>

JAVASCRIPT

    function addStuff()
        {
        var f=1;
        var movie_name_entered=document.getElementById("box").value;
        var movieList= document.getElementById("list"); //get the list from html

         $("#list li_a").each(function () {
  var thisVal = $(this).text();

  if ( (thisVal ==movie_name_entered) ) 
  {
     alert("Sorry this movie already exists in the list");
      f=0;
      return false;
  }
   /* var hr= new XMLHttpRequest();
    var url= "http://localhost/php_bollywood_romance.php ";
    var vars='movie_name_entered=' + movie_name_entered;
    hr.open("POST",url,true);
    hr.setRequestHeader("Context-type","application/x-www-form-urlencoded");//// Set content type header information for sending url encoded variables in the request
    hr.send(vars);
    hr.onreadystatechange= function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.reponseText;
            document.getElementById("status").innerHTML=return_data;
        }
    }*/
})


 if(f==0)
    return false;    


    var new_movie_element = document.createElement("li_a");
    var new_list_value=document.createTextNode(movie_name_entered);
    new_movie_element.appendChild(new_list_value); //put value in element
    //new_movie_element.setAttribute("href", "trailer.html");
    movieList.appendChild(new_movie_element); //put element in the old list



    // -----------------adding likes button

     var likes_list=document.getElementById("likes_list");
     var likes_Button = document.createElement("like");

     likes_Button.style.backgroundImage="url('pop.png')";

     var count=1;
     var counter_value=document.createTextNode(count);
     likes_Button.appendChild(counter_value);
     likes_Button.onclick=function()
     {
        var now= parseInt(counter_value.nodeValue);
        counter_value.nodeValue=now+1;
     }
     //put value in element
    //Assign different attributes to the element. 
    likes_list.appendChild(likes_Button);



    var hr= new XMLHttpRequest();
    var url= "http://localhost/php_bollywood_romance.php ";
    //var url="php_bollywood_romance.php";
    hr.open("POST",url,true);
    hr.setRequestHeader("Context-type","application/x-www-form-urlencoded");//// Set content type header information for sending url encoded variables in the request
    hr.send("film=movie_name_entered&like=count");
    hr.onreadystatechange= function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.reponseText;
            document.getElementById("status").innerHTML=return_data;
        }
    }

    document.getElementById("status").innerHTML = "processing...";
}

PHP

              <?php

                  {
                     $name = $_POST["film"];
                     $file ='data_bollywood_romance.txt';
                      $current=file_get_contents($file); //gets existing content from the file
                     $current ="$current \n $name \n";
                      file_put_contents($file,$current); //put newstuff
                      return 'yes';
                      }

                   ?>

Thank you in advance!!!

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Check out this SO response which shows a properly formatted post. It looks like you are missing the content length header. You probably need something like the following.

hr.setRequestHeader("Content-length", "film=movie_name_entered&like=count".length);

And for good measure

hr.setRequestHeader("Connection", "close");

to close the connection when you are done.

It might make life easier to use a param variable as the example shows. That way you can set the content length header without having to put the parameter in directly.

var param = "film=movie_name_entered&like=count";
hr.setRequestHeader("Content-length", param.length);
hr.setRequestHeader("Connection", "close");
hr.send(param)

edited May 23 '17 at 11:50

Community

1
1

answered Jul 18 '14 at 17:34

wolffer-east

1,065
7
14

It worked i copy pasted a part of the link you sent me. I used this part of the code and deleted my part of the code.. – ishita srivastava Jul 18 '14 at 18:23
It might have been the location of the .send() in your code. You have it before the on ready state change, while the example has it after. – wolffer-east Jul 18 '14 at 18:25

score 0 · Answer 2 · answered Jul 18 '14 at 17:34

0

As i see you are using jquery why don't you use $.ajax() or $.post() instead of writing lots of code. And you need to change your input button from type="submit" to type="button" to prevent it from submitting form in a normal way and load page.

answered Jul 18 '14 at 17:34

Rofhiwa Sikhauli

11
2

AJAX POST XMLHttpRequest javascript and php cant save into text file

2 Answers2