连接表数据和表单文本字段

时间:2011-08-10 03:05:42

标签: javascript html

我有一个html / css页面应该使用一个充满按钮的html表格布局来模拟t9键盘布局。

在页面上,我有一个包含两个文本字段的表单。我想使用表格/小键盘值通过javascript填写带有数字的文本字段。

我能够将一个变量与一个字符串相关联,该字符串描述了我希望用数据填写哪个字段,但是当我调用该字段的当前值时,我得到一个错误(console.log),表示“不能读取'undefined'的属性'x'。

这是我的功能。

function place(id) {
        var key = ""; //Ensure that this is a string, not number
        key = document.getElementById(id).id; //Get the key value.
        console.log(key);
        var total = ""; //initialize variable.
        console.log(appSettings.padName);
        total = nums.element[appSettings.padName].value; //Grab total.
        //if (total.contains("Click")) total = "";
        console.log(total);
        if (key == "-1") total.slice(0, -1); //backspace.
        else if (key == "-2") numPad(appSettings.padName); //Enter.
        else total += key; //concat to end of the String.
        document.getElementById(appSettings.padName).value += total; //place update.
    }

我用以下html调用此函数

<div id="nums">
<form name="nums">
    <h3>
    Cell number: <input type="text" id="cell" value="" class="inputText"      size="10" onclick="numPad('cell')" name="cell" /><br/><br/>
    <div id='group'>
    Party size: <input type="text" value="" class="inputText" size="10" onclick="numPad('group')" name="group" /><br/><br/>
    </div>
    <input type="submit" value="Submit" class="button" />
</h3>

*请注意,每个字段都有不同的ID系统。

收集变量的函数正在以字符串格式(也称为“cell”)收集div ID。如果您需要更多信息来帮助我乐意提供:P

1 个答案:

答案 0 :(得分:3)

我完全采用不同的方法解决这个问题。最好的解决方案是在click上监听<table>事件,然后从中可以获取已点击的键,并相应地更新其中一个输入。这种做法被称为事件委托,它非常有效。

您当前的javascript存在一些错误。首先,在为其分配预期值之前,您不需要初始化变量并为它们分配&#34;类型&#34;。同样,您不需要通过它的ID查找元素只是为了再次获取ID,这是浪费。我注意到你在你的函数中也提到了一些全局变量,这通常是不好的做法。

另一个注意事项,Chris Lively为您提供的信息,re:半冒号是明显错误的。原始if语句没有问题。您可以从以下帖子中了解更多信息:http://inimino.org/~inimino/blog/javascript_semicolons