CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
lolcatIV
lolcatIV

Reputation: 35

How to use $_POST to save a Div which is contentEditable="true"?

I'm trying to store the editable content of a Div in an SQL database. However from what I can tell isset($_POST["des"]) never returns true.

(I haven't done much website coding so I am probably missing something quite fundamental/trivial)

overview_page.php:

<?php session_start();
include_once("php_includes/check_login_status.php");
?>

<?php
    if(isset($_POST["des"]))
    {
    echo "Inside IF statement";
    include_once("php_includes/db_conx.php");
    $des = mysqli_real_escape_string($db_conx, $_POST['des']);    
    $sql = "UPDATE users SET project_description='$des' WHERE   username='$log_username'";
    }
?>

<!DOCTYPE html>
<html>
<head>

    <script src="js/main.js"></script> <!--Points to external java script file-->
    <script src="js/ajax.js"></script> <!--Points to external java script file-->

    <script type="text/javascript">

    function save_description()
    {
        var des = _("project_description").value;
        var ajax = ajaxObj("POST", "overview_page.php"); 
        //ajax.onreadystatechange = function() sorry this one shouldn't be here
        ajax.send("des="+des); 
    }

    </script>
</head>    
<body>    

  <?php include_once("template_pagetop.php"); ?>  

  <div id="pageMiddle">
    <div id="left_window">

            <div id="project_description" name="project_description" contentEditable="true">
            Please enter project description...
            </div>
            <center>
            <button id="save" onclick="save_description()">Save</button>
            </center>
    </div>
  </div>      
</body>    
</html>

and external scripts:

ajax.js:

function ajaxObj( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
   return true; 
}}

main.js:

function _(x)
{
return document.getElementById(x);
}

Upvotes: 3

Views: 2083

Answers (2)

Ross
Ross

Reputation: 3070

So I took your code over to jsFiddle and created a new fiddle and the first thing that came up in the console (F12 in your browser - at least in Chrome) was that the event wasn't actually firing.

So I moved your save_description() method into an event bind (there are other approaches to this):

document.getElementById('save').onclick = function () {
    var des = _("project_description").innerHTML;
    var ajax = ajaxObj("POST", "overview_page.php");
    //ajax.onreadystatechange = function() sorry this one shouldn't be here
    ajax.send("des=" + des);
}

Also note I changed the des = _("project_description") access to innerHTML.

This then seems to at least make the request with a value. After that, check your server-side script.

Upvotes: 1

Drk_alien
Drk_alien

Reputation: 307

I will assume that your post is sending the "des" value.

BUT your code is in the "overview_page.php" file? If not, you are sending the "des" value to an not existing file or you have no code in that file. In this case your if(isset($_POST["des"])) never return true.

You need to have the overview_page.php file.

In case that you are not sure that your ajax code works as required use some Jquery post function into your "save_description()" function.

Upvotes: 0

Related Questions