[removed] How to append hidden input tag into a fo

Question

I have variable name and value for hidden input tag that I want to append into form right when submit button is clicked. How do I go about coding it?

Here's my code:

<script type="text/javascript">

hname="reference";
hvalue="1";

function insertInput(){
document.write( "<input type='hidden' name='" + hname + " ' value=' " + hvalue + " '/><br/>");
}

</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 tag here --></p>

    <button type="submit' onClick="insertInput();">Log In</button>  
</form>

I can't seem to get it work. Please help! Thanks in advanced!

Answer 1

That won't work because document.write only works while the page is loading, trying to use it after the page has loaded will fail.

You could do it with pure DOM scripting but I would suggest using a DOM library like jQuery, they make doing things like this much easier.

Here's a way you could do it with jQuery:

<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>

    <button type="submit">Log In</button>  
</form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
    var hname = "reference",
        hvalue = "1";

    $("#form1").on("submit", function () {
        $(this).append("<input type='hidden' name='" + hname + " ' value=' " + hvalue + " '/><br/>");
    });
});

</script>

Answer 2

document.write() only works while the document is being parsed. As soon as the document is in ready state (i.e. the DOMContentLoaded event has been fired), document.write will implicitly call document.open(), which in turn resets your document.

You want to use the DOM methods for this:

var form = document.getElementById('form1');
form.addEventListener("submit", function() {
  var input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'reference';
  input.value = '1';
  this.appendChild(input);
}, true);

Answer 3

Try this:

<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 tag here --></p>

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



<script type="text/javascript">

    hname="reference";
    hvalue="1";

    function insertInput(){
        var para, hiddenInput, br;
        para = document.getElementById('hidden');
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = hname;
        hiddenInput.value = hvalue;
        para.appendChild(hiddenInput);
        br = document.createElement('br'); //Not sure why you needed this <br> tag but here it is
        para.appendChild(br);

        return false; //Have this function return true if you want to post right away after adding the hidden value, otherwise leave it to false
    }

</script>