"Undefined property" when trying to save javascript form data to mysql database via php

Question

I'm attempting to add fields to a profile form for different people in an organization, however, for my new fields I'm getting an "undefined property" error when I try to save. In the javascript below, the fields fname, lname, title, bio, photo and owner work like a charm. But the fields ownership_percentage, edu, skills, prof, awards, community, years, and compensation (all of which I added) are throwing the "undefined property error when I try to save.

(function($) {
if(typeof upsmart === "undefined") { upsmart = {} }
upsmart.people = {
    people: [],
    pcounter: 0,
    acceptFileTypes: ["image/png","image/jpeg","image/jpg","image/gif"],

    init: function() {
        $("#new").click(upsmart.people.showAddDialog);
        $("#team .person").live("click",upsmart.people.showEditDialog);
        $("#form").submit(upsmart.people.prepareSubmit);
    },

    prepareSubmit: function() {
        $("#form input[name=json]").attr("value",JSON.stringify(upsmart.people.people));
    },

    createForm: function(n) {
        item = $("<table> \
            <tr><th>Name</th><td class='twoinput'><input name='pfname' placeholder='Jane'/><input name='plname' placeholder='Smith'/></tr> \
            <tr><th>Title</th><td><input name='ptitle' placeholder='Chief Executive Officer'/></tr> \
            <tr><th>Short Bio</th><td><textarea name='pbio'/></textarea></td></tr> \
            <tr><th>Photo</th><td><input id='photo_upload' name='photo'/> <input type='button' id='photo_button' value='Open Media Library'/></tr> \
            <tr><td colspan='2'>(Optional) Upload a photo of <acronym title='Replace this with their first name?'>this person</acronym>. The bigger the better&mdash;don't worry, we'll scale this down for you.</td></tr> \
            </table>\
            <br/>\
            <table>\
            <tr><th>Education</th><td><textarea name='pedu'/></textarea></td></tr> \
            <tr><th>Relevant Skills</th><td><textarea name='pskills'/></textarea></td></tr> \
            <tr><th>Professional Experience</th><td><textarea name='pprof'/></textarea></td></tr> \
            <tr><th>Awards & Recognition</th><td><textarea name='pawards'/></textarea></td></tr> \
            <tr><th>Community Involvement</th><td><textarea name='pcommunity'/></textarea></td></tr> \
            <tr><th>Years with the Company</th><td><input type='text' size='2' maxlength='2' name='pyears'/>years</td></tr>\
            <tr><th>Compensation Details</th><td><textarea name='pcompensation'/></textarea></td></tr> \
            </table>\
            <br/>\
            <table>\
            <tr><td id='ownershipquestion' colspan='2'>Does this person have an ownership stake?</td><td id='ownershipbox'><input type='checkbox' id='part_owner' name='owner' value='1'/>Yes</td></tr>\
            <tr><td id='ownershipperquestion' colspan='2'>What percentage does this person hold?</td><td id='ownershipperanswer'><input type='text' size='3' maxlength='3' id='ownership_percentage' name='ownership_percentage'/>%</td></tr>\
        </table>");
        if(n < upsmart.people.people.length) {
            p = upsmart.people.people[n];
            item.find("input[name=pfname]").attr("value",p.fname);
            item.find("input[name=plname]").attr("value",p.lname);
            item.find("input[name=ptitle]").attr("value",p.title);
            item.find("textarea[name=pbio]").attr("value",p.bio);
            item.find("input[name=photo]").attr("value",p.photo);
            item.find("input[name=owner]").attr("value",p.owner);
            item.find("input[name=ownership_percentage]").attr("value",p.ownership_percentage);
            item.find("input[name=pedu]").attr("value",p.edu);
            item.find("input[name=pskills]").attr("value",p.skills);
            item.find("input[name=pprof]").attr("value",p.prof);
            item.find("input[name=pawards]").attr("value",p.awards);
            item.find("input[name=pcommunity]").attr("value",p.community);
            item.find("input[name=pyears]").attr("value",p.years);
            item.find("input[name=pcompensation]").attr("value",p.compensation);
        }
        return item;
    },

    showAddDialog: function() {
        $("#dialog").data("person",upsmart.people.pcounter);
        $("#dialog").html(upsmart.people.createForm(upsmart.people.pcounter));
        $("#photo_button").click(open_media_library);
        upsmart.people.pcounter++;
        $("#dialog").dialog({
            width: 600,
            modal: true,
            buttons: {
                "Add": upsmart.people.addPerson,
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
    },
    showEditDialog: function() {
        pid = $(this).data("person");
        $("#dialog").data("person",pid);
        $("#dialog").html(upsmart.people.createForm(pid));
        $("#photo_button").click(open_media_library);
        $("#dialog").dialog({
            width: 600,
            modal: true,
            buttons: {
                "Save": upsmart.people.addPerson,
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
    },

    addPerson: function() {
        //Create a json object for this person.


        var person = {
            id: $("#dialog").data("person"),
            fname: $("#dialog input[name=pfname]").attr("value"),
            lname: $("#dialog input[name=plname]").attr("value"),
            title: $("#dialog input[name=ptitle]").attr("value"),
            bio:   $("#dialog textarea[name=pbio]").attr("value"),
            photo: $("#dialog input[name=photo]").attr("value"),
            owner: $("#dialog input[name=owner]").attr("value"),
            ownership_percentage: $("#dialog input[name=ownership_percentage]").attr("value"),
            edu: $("#dialog input[name=pedu]").attr("value"),
            skills: $("#dialog input[name=pskills]").attr("value"),
            prof: $("#dialog input[name=pprof]").attr("value"),
            awards: $("#dialog input[name=pawards]").attr("value"),
            community: $("#dialog input[name=pcommunity]").attr("value"),
            years: $("#dialog input[name=pyears]").attr("value"),
            compensation: $("#dialog input[name=pcompensation]").attr("value"),
        }

        $(this).dialog("close");

        upsmart.people.finishAddPerson(person);
    },
    finishAddPerson: function(person) {
        upsmart.people.people[person.id] = person;
        if($("#person"+person.id).length == 0) {
            box = $("<div class='person'></div>").attr("id","person"+person.id);
            box.data("person",person.id);
            box.insertBefore($("#new"));
        } else {
            box = $("#person"+person.id);
            box.html("");
        }

        box.append($("<img/>").attr("src",person.photo));
        box.append($("<div/>").attr("class","label").html(person.fname+" "+person.lname));
    }
}

$(document).ready(upsmart.people.init);
}(jQuery));

The javascript above is embedded in a page created with the following php function:

function create_people_form() {
    global $wpdb;

    $people = $wpdb->get_results($wpdb->prepare("SELECT * FROM my_database WHERE wordpress_id=%d",get_current_user_id()),ARRAY_A);

    $out = '';

    if(count($people) > 0) {
        $out .= "<script type='text/javascript'>jQuery(document).ready(function() {\n";
        foreach($people as $i => $p) {
            $p['id'] = $i;
            unset($p['wordpress_id']);
            unset($p['person_id']);
            $out .= "upsmart.people.finishAddPerson(".json_encode($p).");\n";
        }
        $out .= "upsmart.people.pcounter = ".($i+1).";});</script>";
    }

    $media_url = admin_url("media-upload.php?type=image&amp;TB_iframe=true");
    $out .= <<<EOHTML
    <script type="text/javascript">
        media_input = "#photo_upload";
        function open_media_library() {
            tb_show("", "{$media_url}");
            window.send_to_editor = function(html) {
                imgurl = jQuery("img",html).attr("src");
                jQuery(media_input).val(imgurl);
                tb_remove();
            }
            return false;
        }
    </script>
    <style type="text/css">
        #TB_overlay {z-index: 2000 !important;}
        #TB_window {z-index: 2002 !important;}
    </style>
    <div id='team'>
    <div id='new'>+</div></div>
    <br/>
    <div id='dialog'></div>
    <form method='post' id="form">
        <input type='hidden' name='json'/>
        <input type='submit' value='Save'/>
    </form>
EOHTML;
    return $out;
}

And is saved by the following php function

function create_people_save() {
    global $wpdb;

    $data = json_decode(stripslashes($_POST['json']));

    $wpdb->query($wpdb->prepare("DELETE FROM my_database WHERE wordpress_id = %d",array(get_current_user_id())));

    foreach($data as $p) {
        if($p == null) continue;
        $result = $wpdb->query($wpdb->prepare("INSERT INTO my_database
                        (wordpress_id,fname,lname,title,bio,photo,owner,percent_owner,founder,edu,skills,prof,awards,community,years,compensation)
                        VALUES(%d,%s,%s,%s,%s,%s,%d,%d,%d,%s,%s,%s,%s,%s,%d,%s)",
                        array(
                            get_current_user_id(),
                            $p->fname,
                            $p->lname,
                            $p->title,
                            $p->bio,
                            $p->photo,
                            $p->owner,
                            $p->ownership_percentage,
                            $p->founder,
                            $p->edu,
                            $p->skills,
                            $p->prof,
                            $p->awards,
                            $p->community,
                            $p->years,
                            $p->compensation,
                        )
        ));
        echo mysql_error();

        if($result === false) return false;
    }
    return true;
}

Any help is greatly appreciated.

Thanks for any help you might be able to give

which browser are you using ? and is that a php error or javascript error ? — karthikr
– karthikr, Commented Sep 3, 2013 at 19:10
@karthikr Hey thanks for the reply! ...not a question I was expecting but I'm using Firefox. I'll see if the problem replicates in chrome. Update: problem replicates in chrome as well — neanderslob
– neanderslob, Commented Sep 3, 2013 at 19:12
well, i do see you would face issues in internet explorer due to the dangling , at the end. Nevertheless, if this is a php error, it would not matter what browser you are using — karthikr
– karthikr, Commented Sep 3, 2013 at 19:13
@karthikr thanks for the catch on the comma (even if it isn't the root issue) where did you see it in the code? — neanderslob
– neanderslob, Commented Sep 3, 2013 at 19:58
I believe he is referring to the end of your array: $p->compensation, for the insert query. — Matthew
– Matthew, Commented Sep 3, 2013 at 20:14

Matthew · Accepted Answer · 2013-09-03 20:10:37Z

2

I note you are calling echo $_POST['jason']; at the end of your script which I would expect to cause this error - just a typo in the question? You have it correctly as 'json' earlier.

Update

Ok - think I see it:

Defined pcompensation:

<textarea name='pcompensation'/></textarea>

Reading it:

item.find("input[name=pcompensation]").attr("value",p.compensation);

Which should be:

item.find("textarea[name=pcompensation]").attr("value",p.compensation);

Same for your other textarea custom fields.

edited Sep 3, 2013 at 20:10

answered Sep 3, 2013 at 19:18

Matthew

9,9584 gold badges50 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

neanderslob Over a year ago

Thanks for the catch! it was a typo. It didn't change the errors though.

neanderslob Over a year ago

That's it! I also needed to rename "ownership_percentage" one of my fields but you got the big issue. Thanks so much!

Collectives™ on Stack Overflow

"Undefined property" when trying to save javascript form data to mysql database via php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related