使用 JavaScript 实时读取和附加表单数据

Question

我一直在寻找这个问题的解决方案一段时间，并且必须找到一个对新手足够友好的答案，让我能够理解其实现。我的情况如下：

我正在创建一个简单、小型、基于 Web 的文档编号系统，该系统将输入表单的数据组合起来形成文档编号。示例如下：用户输入类别代码 (CCC)、基本号码 (BBBB) 和短划线号码 (DDD)。生成的文档编号将为 CCC-BBBB-DDD。超级简单。我让它将所有这些写入数据库以及所有这些爵士乐。我只想添加一个用户友好的附加组件。

我想要在顶部有一个实时生成的小字符串，显示用户在实际按下提交之前编辑每个字段时的文档编号。有点像这个例子： http://inimino.org/~inimino/blog/javascript_live_text_input

我对 javascript 几乎一无所知，因此了解 1：脚本应该是什么样子，2：以及该脚本如何与 html 表单交互将非常有帮助。

表格如下所示：

        <form action="submit.php" method="post">
        Enter Title:<input type="text" name="title" size="20"><BR>
        Enter Class Code:<input type="text" name="class" size="20"><BR>
        Enter Base Number:<input type="text" name="base" size="20"><BR>
        Enter Dash Number:<input type="text" name="dash" size="20"><BR>
        <input type="submit" value="Submit">

非常感谢您提供的任何帮助。我确信这对于精通的人来说并不是太难。

托马斯

Answer 1

据我了解，这应该按照您的描述进行。

$('#yourForm input').bind('keyup', function(e) {
    var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
    $('#preview').html(docNum);
});​

对于第二个问题，它如何与 HTML 表单交互。第一个 jQuery 选择器 #yourForm input 将查找属于

的任何 代码>.然后它绑定 keyup 事件来触发该函数。该函数从 获取值，其中包含 class、base 和 dash 的 name 值以及一些格式，并创建一个名为 docNum< 的变量/代码>。然后，将 docNum 插入到将 id 设置为预览的元素中，在 Fiddle 示例中，该元素是表单正上方的 div。

http://jsfiddle.net/nuY2M/

Answer 2

在您希望显示文档编号预览的位置包含此 html：

Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>

添加此脚本以填充值：

function updateDocNumPreviewPart(fieldName)
{
    var preview = document.getElementById(fieldName + "Preview");
    var field = document.forms[0][fieldName];
    preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
    updateDocNumPreviewPart("class");
    updateDocNumPreviewPart("base");
    updateDocNumPreviewPart("dash");
}

最后，向表单字段添加一些代码以调用脚本：

<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />