Ajax not fully posting data to php file

Question

Getting a really strange error with Ajax not sending the entire string data across to the php script.

The string is

"<p class="MsoNormal" style="text-align:justify"><b><u><span lang="DE" style="font-size:10.0pt;mso-bidi-font-size:11.0pt;
font-family:&quot;Verdana&quot;,sans-serif;mso-ansi-language:DE">Gold GoldGold Gold Gold Gold<o:p></o:p></span></u></b></p>

<p class="MsoNormal" style="text-align:justify"><span lang="EN-GB" style="font-size:10.0pt;mso-bidi-font-size:11.0pt;font-family:&quot;Verdana&quot;,sans-serif">&nbsp;</span></p>"

but what arrives at the php script is only (Seen through DB submission and the php $result test.

"<p class="MsoNormal" style="text-align:justify"><b><u><span lang="DE" style="font-size:10.0pt;mso-bidi-font-size:11.0pt;
font-family:"

I have tried to check through multiple methods of why this is happening but just cant figure it out at all.

Here is my Javascript code and php code.

JS:

function Send_upload_news()
    {
        get_title = document.getElementById('Germ_title');
        get_date = document.getElementById('Germ_date');

        input_title = get_title.value;
        input_date = get_date.value;
        input_content = $("div.nicEdit-main").html();

        //console.log(input_content);

        var Data = '&input_title='+input_title+'&input_date='+input_date+'&input_content='+input_content;
        //console.log(Data);
        $.ajax({
            url : "uploadNews.php",
            type: "POST",
            dataType: 'text',
            data : Data,
            success: function(result){alert(result);},
            /* success: function() {
                 alert('Post has been uploaded to Database');
            }, */
           error: function(XMLHttpRequest, textStatus, errorThrown) {
           alert('There is an error, screenshot this error and send to Admin : ' +textStatus+" - "+errorThrown);
           }
        });
        nicEditors.findEditor( "Germ_content" ).setContent( '' );
        get_title.value = "";
        get_date.value = "";
        $('html, body').animate({ scrollTop: 0 }, 'slow');

    };

pHp:(uploadNews.php)

<?php
//Database info
$db_host = "localhost";
$db_username = "";
$db_pass = "";
$db_name = "";
//connect db    
$connMS = new mysqli ( $db_host, $db_username, $db_pass, $db_name );
//grab data 

$this_title = $_POST['input_title'];
$this_date = $_POST['input_date'];
$this_content = $_POST['input_content'];

$result = file_put_contents ( "test.txt", $this_content);
//create query and execute  
$sqlupdate_news = "INSERT into news_content(germ_title, germ_date, germ_content) values ('$this_title','$this_date','$this_content')";
mysqli_query ($connMS,$sqlupdate_news); 
//close
mysqli_close($connMS);
?>

Im using WYSWYG Nicedit as my text area

If there is somebody that can help me figure this out I would be very grateful.

[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, Jul 14 '16 at 13:56
Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server? — Jay Blanchard, Jul 14 '16 at 13:56
check in ajax request body wheather u passing expected data or not — RIYAJ KHAN, Jul 14 '16 at 13:58
`var Data = '&input_title='...` <-- why the leading `&`? And you really should be using `var` — epascarello, Jul 14 '16 at 13:59

Ahmad · Answer 1 · 2016-07-14T14:05:15.737

1

You have to escape(encode) sent parameters to the server, to avoid confusion of characters like ampersand(&)

Change this:

var Data = '&input_title='+input_title+'&input_date='+input_date+'&input_content='+input_content;

To this:

var Data = '&input_title='+encodeURIComponent(input_title)+'&input_date='+encodeURIComponent(input_date)+'&input_content='+encodeURIComponent(input_content);

edited Jul 14 '16 at 14:05

answered Jul 14 '16 at 14:00

Ahmad

5,551
8
41
57

Incorrect, dataType has nothing to do with the form. – epascarello Jul 14 '16 at 14:03
Even though this was the original answer and it DID work for me. I moved the correct answer to Espascarello post because it worked and the code presented cleaner and easier to understand – GenGen Jul 14 '16 at 14:20

epascarello · Accepted Answer · 2016-07-14T14:18:02.573

The problems with your code is you are not encoding the values. So that will mess up the values. Plus you have a leading & which makes no sense. You can manually encode all the values with encodeURIComponent or you can let jQuery handle that for you.

jQuery does the encoding for you when you use an object.

function Send_upload_news() {

    var get_title = document.getElementById('Germ_title');
    var get_date = document.getElementById('Germ_date');

    var Data = {
        input_title : get_title.value,
        input_date : get_date.value,
        input_content : $("div.nicEdit-main").html()
    };

    $.ajax({
        url : "uploadNews.php",
        type: "POST",
        dataType: 'text',
        data : Data,
        success: function(result){alert(result);},
       error: function(XMLHttpRequest, textStatus, errorThrown) {
       alert('There is an error, screenshot this error and send to Admin : ' +textStatus+" - "+errorThrown);
       }
    });

    nicEditors.findEditor( "Germ_content" ).setContent( '' );
    get_title.value = "";
    get_date.value = "";
    $('html, body').animate({ scrollTop: 0 }, 'slow');
}

And you really should use var so your application is not full of global variables.

Thanks. I can see what you mean, the code is also much neater and easier to read. — GenGen, Jul 14 '16 at 14:15
Marked this as correct answer, it works and its easier to understand, looks a lot neater — GenGen, Jul 14 '16 at 14:20

BeetleJuice · Answer 3 · 2016-07-14T14:14:33.223

0

Encode your string properly before firing off the Ajax.

 var title = encodeURIComponent(input_title);
 var date = encodeURIComponent(input_date);
 var content = encodeURIComponent(input_content);
 var Data = 'input_title='+title+'&input_date='+date+'&input_content='+content;
 $.ajax({
    ...
    data : Data,
    ...

To make your life easier, why not just use object notation and let jQuery handle the encoding?

 $.ajax({
    ...
    data : {
        input_title:   input_title, 
        input_date:    input_date, 
        input_content: input_content
    },
    ...

edited Jul 14 '16 at 14:14

answered Jul 14 '16 at 14:00

BeetleJuice

39,516
19
105
165

I tried this, it did not work. Edit: I tried your first comment, before edit. I havent tried this latest comment – GenGen Jul 14 '16 at 14:10

Ajax not fully posting data to php file

3 Answers3

Linked