"+" character in the js echoed edited data from html page is replaced with empty space in the database

Question

I am building an webpage that has editable data fields linked with MySql database.

<th>CONTACT 1 NUMBER*</th>
<td bgcolor="#FFFFFF" contenteditable="true" data-old_value="<?php echo $rows["emr1_number"]; ?>"  onBlur="saveInlineEdit(this,'emr1_number','<?php echo $rows["safr_id"]; ?>','<?php echo $userRow['userId']; ?>')"><?php echo $rows["emr1_number"]; ?></td>

The above code is used in html side to show data and get new data if the fields are edited.

function saveInlineEdit1(editableObj,column,id,uid) {
    // no change change made then return false
    if($(editableObj).attr('data-old_value') === editableObj.innerHTML)
    return false;
    // send ajax to update value
    $(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
    $.ajax({
        url: "saveInlineEdit1.php",
        cache: false,
        data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id+'&uid='+uid,
        success: function(response)  {
            console.log(response);
            // set updated value as old value
            $(editableObj).attr('data-old_value',editableObj.innerHTML);
            $(editableObj).css("background","#FDFDFD");         
        }          
   });
}

Above JS is used to get edited data and make an AJAX call.

this is saveInlineEdit1.php

<?php
include_once("db_connect.php");
$sql = "UPDATE coin_location set ".$_REQUEST["column"]."='".$_REQUEST["value"]."' WHERE  coin_id='".$_REQUEST["id"]."' AND userId='".$_REQUEST["uid"]."'";
mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
echo "saved";
?>

Everything is working fine. Only problem I have is, If am editing the data field with "+" sign, For ex, changing the data "hello" with "+hello" in webpage. Actually the data altered in database must be "+hello" but i get " hello". An empty space is replaced in the place of "+" sign.

Please, help me to get rid of this.

Thanks.

The data retrieved from database is "hello" and it is displayed in the webpage. The User of the webpage changes "hello" to "+hello". But in the database "+hello" is stores as " hello" — I_am_Manu, Mar 14 '17 at 14:48
check this: http://stackoverflow.com/questions/332872/encode-url-in-javascript — Bhaskar Jain, Mar 14 '17 at 15:00
stackoverflow.com/questions/332872/encode-url-in-javascript, here '+' is used for appending, but I want the character '+' from editable html table cell to be stored in the database. — I_am_Manu, Mar 14 '17 at 15:04

GertG · Answer 1 · 2017-03-15T07:45:38.020

0

PHP is (correctly) treating a + in a GET parameter as a space. You need to encode your value as url before sending it, e.g. with encodeURIComponent. Then on the server side you can use urldecode to get the original value.

Edit after comment:

So in your JavaScript you would do something like

data:'column='+column+'&value='+encodeURIComponent(editableObj.innerHTML)+'&id='+id+'&uid='+uid,`

And in PHP:

$sql = "UPDATE coin_location set ".$_REQUEST["column"]."='".urldecode($_REQUEST["value"])."' WHERE  coin_id='".$_REQUEST["id"]."' AND userId='".$_REQUEST["uid"]."'";

IMPORTANT WARNING: That code shows how to solve your current issue, but you should NEVER insert unchecked user input into SQL like that.

edited Mar 15 '17 at 07:45

answered Mar 14 '17 at 15:03

GertG

959
1
8
21

Thanks a lot for your response, Is there any other possible approach for this problem, or only this URL way. I don't know how the URL method is applicable for the application architecture I have built. – I_am_Manu Mar 15 '17 at 07:25
I think you've misunderstood. You don't need to change anything, just encode and decode the value. I'll edit the answer to make it clearer. – GertG Mar 15 '17 at 07:33
I tried it, but same problem prevails. I tried both GET and POST. i think something like this is to used separately, and then appended into ajax url, `var encoded = encodeURIComponent(str);` . Isn't both same ? – I_am_Manu Mar 15 '17 at 08:05
Am getting "object Object" get stored in the database while trying encode and decode as you said. – I_am_Manu Mar 15 '17 at 08:27
edited the code, now am not getting "object Object". But still "+" sign is replaced with empty space. – I_am_Manu Mar 15 '17 at 08:46

score 0 · Answer 2 · answered Mar 15 '17 at 08:54

As @GertG suggested URL Encode Decode is the way.

in Javascript,

data:'column='+column+'&value='+encodeURIComponent(editableObj.innerHTML)+'&id='+id+'&uid='+uid,

in PHP,

$sql = "UPDATE coin_location set ".$_REQUEST["column"]."='".rawurldecode($_REQUEST["value"])."' WHERE  coin_id='".$_REQUEST["id"]."' AND userId='".$_REQUEST["uid"]."'";

Using rawurldecode($str) instead urldecode($str) solves the problem !

"+" character in the js echoed edited data from html page is replaced with empty space in the database

2 Answers2