将添加的字段中的数据保存到javascript表单时出现问题 [英] Problems saving data in added fields to a javascript form
本文介绍了将添加的字段中的数据保存到javascript表单时出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
摘要:我正在尝试将字段添加到组织中用javascript编写的在线个人资料中.我真的是这种语言的新手，所以我发现自己需要一些帮助.
背景(工作原理):该脚本允许用户单击添加"按钮，并在表单中填写基本字段(名字，姓氏，位置，照片，等等等等) )，然后通过php脚本将数据存储在mysql数据库中.添加人员后，他们进入显示照片和姓名的列表；可以通过单击每张照片来编辑个人资料.用户可以根据需要添加其他人.参见下面的图片，以了解界面的含义(为保护无辜者免受...之害，对真实人物的图像/姓名进行了像素化处理):
我正在尝试做的事情(什么不起作用):所以所有这些都很好用……可能是因为我没有写那部分.当我尝试在原始字段下方的弹出式表单中添加一组字段(ownership_percentage，edu，技能，教授，教授，奖项，社区，年份和薪酬)时，麻烦就来了:
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—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;
},
和
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"),
}
问题(如何解决):
- 当我单击加号按钮时，这些新字段在弹出窗口上显示得很好
- ...但是不保存任何数据，尽管它不会禁止存储上面代码中"ownership_percentage"上方列出的任何内容.
- 在显示这些新字段的情况下，我无法通过单击图像来编辑任何现有信息(不弹出任何内容).
- 保存表单时，无论是否有数据，我都会为每个新字段收到未定义属性"错误消息.
我已经检查了php保存脚本，并且一切正常.似乎我在JavaScript中缺少某些东西，无法将这些新值传递到php进行处理的数组中.
非常感谢您的帮助，并在此先感谢您！
的txt文件的链接- 调用javascript并接收其输出的php函数
- 将输出保存到数据库的php函数
- 有问题的javascript
解决方案
由RUJordan提供的抗气候问题解决方案，是针对我发布的有关无法识别的表达错误"的另一个问题
来源: https://stackoverflow.com/a/18541225/2540204
问题是我在所有新表单字段中都缺少右括号，所以
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);
}
蜜饯
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);
}
Abstract: I'm attempting to add fields to a sort of online personal profile for members in an organization, written in javascript. I'm really REALLY new to this language and so I'm finding myself in need of some help.
Background (what's working): The script allows a user to click an "add" button, fill out a form with basic fields (first name, last name, position, photo, blah blah blah) and then store the data in a mysql database through a php script. Once the person is added, they go into a list that displays photo and name; profiles can be edited by clicking on each photo The user can add as may people as desired. See image below to get an idea of the interface (images/names of real people have been pixilated to protect the innocent...from...something):
What I'm trying to do (what's not working): So all that works great...probably because I didn't write that part. The trouble comes when I try to add a set of fields (ownership_percentage, edu, skills, prof, awards, community, years, & compensation) to the pop-up form right below the original fields:
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—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;
},
and
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"),
}
The Problem (how it's not working):
- These new fields display just fine on the pop-up when I click the plus button
- ...but don't save any data, though it does not inhibit the storing of anything listed above "ownership_percentage" in the code above.
- With these new fields present I cannot edit any existing information by clicking on the images (nothing pops up).
- When I save the form I get "Undefined Property" error messages for every new field, regardless of whether or not it has data.
I've checked the php save script and everything is in order; it seems as though I'm missing something in my javascript to pass these new values into an array for the php to process.. I cannot think of what might be causing this difference and am looking for ideas.
Any help is greatly appreciated and thanks very much in advance!
Here's a link to a txt file containing
- The php function calling the javascript and receiving its output
- The php function that saves the output to a database
- The javascript in question
解决方案
Anticlimactic solution courtesy of RUJordan on a separate question that I posted about the "unrecognized expression error"
Source: https://stackoverflow.com/a/18541225/2540204
The issue was I was missing closing brackets on all my new form fields so
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);
}
Became
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);
}
这篇关于将添加的字段中的数据保存到javascript表单时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
