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将查找属于<input>的任何<form id='yourForm'>。然后它绑定keyup事件以触发该函数。该函数采用<input>的值，其值为name class，base和dash以及一些格式，并创建一个名为docNum的变量。然后将docNum插入元素中，并将id设置为预览，在小提琴示例中，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()" />

使用javascript阅读和附加表单数据

2 个答案: