Javascript: How to append hidden input tag into a form when submit button is clicked?

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.

Solution 1

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>

Solution 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);

Solution 3

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>

Comments

[netizen0911]

This one seems to work. Thanks man! One more question... How do I go about setting it to auto increment if I have the variable hname and hvalue equal to array like: hname=["BMW","Volvo","Saab","Toyota"]; hvalue=["Sports","Luxury","Premium","Hybrid"];

[eburgos]

I guess you want to first send BMW, then Volvo, then Saab, then Toyota. Try having hiddenInput.name = hname[index] and hiddenInput.value = hvalue[index] and then increment index every time you call the function (be careful if you call it more than a certain amount of times (i.e. the length of the array, in this case 4) then you would get an array of out bounds error).