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!

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!

• javascript
• forms
• function
• input

• So what goes wrong? What's 'obviously not correct' about this? – David Thomas Commented Mar 8, 2013 at 1:59
• 1 You return before incrementing? I don't get your for loop... – elclanrs Commented Mar 8, 2013 at 2:05
• @David Thomas It doesn't create input elements after clicking submit button. – netizen0911 Commented Mar 8, 2013 at 2:13

1 Answer 1

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 var keyword, it will result create a global variable instead of local variable.
5. i++ can put in the post statement (for loop)

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>