javascript - 如何接受姓名和号码输入并将其添加到文档/网页

Question

我在 Word 中制作了一份文档，希望人们在其中添加自己的姓名以及他们的教学经验。我已将其保存为网页并发布到此处:

http://epicforum.net/TS

...但操作部分实际上就是这样:

http://epicforum.net/TSTest

它类似于请愿书，名称附加到文档底部，但它需要更多功能，因为我想获取“年经验”字段的总和并将该总和插入到文档本身中(即“我们，以下签名者，代表“XXX”年的经验......”等)。一旦人们点击“将我的名字添加为签字人”按钮，它就会获取他们的姓名和年经验并将其输入到下一个可用的空行中，然后在下一行中添加下一个人的信息，依此类推。一旦他们点击“提交” ，该信息不可编辑。我不需要高安全性 - 没有人会足够关心此文档来执行任何恶意操作 - 但我想避免用户错误，例如删除以前签名的某人的名字。

我找到并编辑了 HTML，它将创建两个字段来获取输入:

<form action="action_page.php">
Add my name as a signatory:<br>
<input type="text" name="FLName" value="Name">
<br>
Years Experience:<br>
<input type="number" name="YrsExp" value="Years Experience">
<br><br>
<input type="submit" value="Submit">
</form>

...但我不知道如何获取输入字段并用它填充文档中的空行，也不知道如何将输入的数字限制为正数选择，并将 YrsExp 总额求和我能找到的任何帖子都没有解决该文档。我认为，使其更漂亮(将输入字段切换到与文本对齐)非常简单(？)。

我更希望它是一个单独的弹出窗口来接受输入，并发现这段代码据说可以做到这一点:

<script>
window.onload=function()
{
    var el=document.getElementById('button');
    el.onclick=function(){
        var my_text=prompt('Enter text here');
        if(my_text) alert(my_text); // for example I've made an alert
    }
}
</script>

...但这并没有创建弹出窗口，而且我不确定如何将输入传递到文档中。

我不知道如何问这个问题，所以这不是一个“为我编码”的问题，因为情况非常具体。

我该去哪里寻找如何做到这一点？

Answer 1

我不建议使用word创建网页。这是因为word有时非常简单，仅适用于静态页面。这意味着没有令人惊叹的效果，没有响应式设计，但主要是没有交互性(弹出表单等)警报代码应为:

<script>

    window.onload=function()
    {
        var el=document.getElementById('button');
        el.onclick=function(){
            var my_text=prompt('Enter text here');
            if(my_text) {alert(my_text); // for example I've made an alert
        }
    }
    </script>

现在，如果您想要一个用户可以输入内容的表单，您可以这样做:html

<input type="text" id="years">
<button onclick="experience()">Alert</button>
javascript
<script>

function experience(){
var user_input=document.getElementById('years');
alert("You have "+user_input.value+" years of experience");
}

</script>

另外，如果您想保存每个提交的值，您将需要服务器端语言，例如 PHP。而且提交的值无法保存在原始文档文件中。因此您最好创建一个新的 .php 文件或.html 文件从头开始。这是我发现的一个关于 php 和表单提交的好网站 http://www.html-form-guide.com/php-form/php-form-tutorial.html