Javascript：如何在表单内的指定 <p> 标签内创建隐藏的输入元素？

Javascript: HOw to create hidden input elements inside specified <p> tag inside the form?

提问by netizen0911

I've been trying to figure this out. I want to create hidden input tags inside the specified paragraph tag inside the form. I have a variable input name and value within the arrays. What I want to happen is to append the hidden input elements with auto increment once the submit button is clicked, before processing the form. Here's what I did, which is obviously not correct:

我一直在想办法解决这个问题。我想在表单内的指定段落标签内创建隐藏的输入标签。我在数组中有一个变量输入名称和值。我想要发生的是在处理表单之前，一旦单击提交按钮，就使用自动增量附加隐藏的输入元素。这是我所做的，这显然是不正确的：

<script type="text/javascript">

function insertInput(){

        hname=["name1","name2","name3","name4"];
        hvalue=["value1","value2","value3","value4"];

    var i=0;

    for (;hname[i];){
        var para, hiddenInput, br;
        para = document.getElementById('hidden');
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = hname[i];
        hiddenInput.value = hvalue[i];
        para.appendChild(hiddenInput);
        br = document.createElement('br');
        para.appendChild(br);
        return false; 
        i++;
    } 

</script>

<form id="form1">
        <p><label>Username:</label> <input type="text" name="username" size="10" /></p>
        <p><label>Password:</label> <input type="password" name="password" size="10"/></p>

        <p id="hidden">
        <!-- Insert Hidden input tags tag here -->
        </p>

        <button type="submit" onclick="return insertInput();">Log In</button>
</form>

Here's what I want to achieve after submit button is clicked:

这是单击提交按钮后我想要实现的目标：

<form id="form1">
 <p><label>Username:</label> <input type="text" name="username" size="10" /></p>
 <p><label>Password:</label> <input type="password" name="password" size="10"/></p>

 <p id="hidden">
        <!-- Insert Hidden input tags tag here -->
            <input type="hidden" name="name1" value="value1"/><br/>
            <input type="hidden" name="name2" value="value2"/><br/>
            <input type="hidden" name="name3" value="value3"/><br/>
            <input type="hidden" name="name4" value="value4"/><br/>
 </p>

        <button type="submit" onclick="return insertInput();">Log In</button>
</form>

Please help! Thank you in advanced!

请帮忙！先谢谢了！

回答by Derek

There are several problems in your code.

您的代码中有几个问题。

1. Missing a }for the insertInput function
2. The return statement in the for loop, the problem is the loop exit after first iteration.
3. It seems that you don't need a <br />for separate the hidden field.
4. Creating variable without varkeyword, it will result create a global variable instead of local variable.
5. i++can put in the post statement (for loop)

1. 缺少}insertInput 函数的 a
2. for循环中的return语句，问题是循环第一次迭代后退出。
3. 似乎您不需要<br />单独的隐藏字段。
4. 创建没有var关键字的变量，将导致创建一个全局变量而不是局部变量。
5. i++可以放入post语句（for循环）

JavaScript

JavaScript

<script tpe="text/javascript">
    function insertInput(){

        var hname=["name1","name2","name3","name4"];
        var hvalue=["value1","value2","value3","value4"];

        var i=0;

        for (;hname[i]; i++){
            var para, hiddenInput, br;
            para = document.getElementById('hidden');
            hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = hname[i];
            hiddenInput.value = hvalue[i];
            para.appendChild(hiddenInput);              
        } 
        return false;
    }
</script>