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.

Never use document.write, unless you are using a time machine to send this code back to 1996... — Useless Code
– Useless Code, Commented Mar 7, 2013 at 23:35

eburgos · Accepted Answer · 2013-03-08 00:09:48Z

6

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>

answered Mar 8, 2013 at 0:09

eburgos

2,06317 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

netizen0911 Over a year ago

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 Over a year ago

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

rodneyrehm · Accepted Answer · 2013-03-07 23:38:56Z

3

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

answered Mar 7, 2013 at 23:38

rodneyrehm

13.6k1 gold badge43 silver badges57 bronze badges

Comments

Useless Code · Accepted Answer · 2013-03-07 23:51:43Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related