how to pass multiple parameters through jquery to php

Question

I'm using the contenteditable feature, I am trying to update multiple fields, however when I try to pass through 2 fields this does not seem to work, it works perfectly with one. When I click the save button I don't even get an error message.

I believe I am not passing the data through correctly and this is because of my lack of knowledge.

index.php

<?php
        //get data from database.
        include("db.php");
        $sql = mysql_query("select * from datadump where id='1'");
        $row = mysql_fetch_array($sql);     ?>
<div id="wrap">
    <header><h1>Contenteditable Database driven</h1></header>

    <div id="status"></div>

    <div id="maincontent">

    <div id="editable" contentEditable="true">
<?php
        echo $row['content'];
    ?>      
    </div>  
    <div id="editablea" contentEditable="true">
    <?php
        echo $row['name'];
    ?>
    </div>
    <button id="save">Save</button>
    </div>

js/js.js

$(document).ready(function() {

    $("#save").click(function (e) {         
        var content = $('#editable').html();    
    var name = $('editablea').html();

        $.ajax({
            url: '/save.php',
            type: 'POST',
            data: {
            content: content,
            name: editablea
            },              
            success:function (data) {

                if (data == '1')
                {
                    $("#status")
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
                else
                {
                    $("#status")
                    .addClass("error")
                    .html("An error occured, the data could not be saved")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
            }
        });   

    });

    $("#maincontent").click(function (e) {
        $("#save").show();
        e.stopPropagation();
    });

    $(document).click(function() {
        $("#save").hide();  
    });

});

save.php

<?php
include("db.php");
$content = $_POST['content'];
$name = $_POST['editablea'];//get posted data
$content = mysql_real_escape_string($content);  //escape string 

$sql = "UPDATE datadump SET content = '$content', name = '$name' WHERE id = '1' ";

if (mysql_query($sql))
{
    echo 1;
}
 ?>

Answer 1

Instead of

data: {
            content: content,
            name: editablea
            }, 

Try:

data: {
            contentLabel: content,
            nameLabel: name
            }, 

edittablea is not a defined javascript variable.

     $("#save").click(function (e) {         
            var content = $('#editable').val();    
            var name = $('#editablea').val();
            alert(content); 
            alert(name);

            $.ajax({
                url: 'save.php',
                type: 'POST',
                data: {
                contentLabel: content,
                nameLabel: name
                },              
                success:function (data) {

     //save.php
    <?php
    $content = $_POST['contentLabel'];
    $name = $_POST['nameLabel'];

Also, if save.php is located in the same folder as your ajax calling script, then you don't need the slash in front of /save.php