Input value hidden

Question

I have this input:

<input id="tag1" type="text" name="tags" class="tags" value="@Model.list" />

and I want to get this input value in a hidden input, so I used this:

<input type="hidden" name="tag" value="tags" />

Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!

EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input... My full code:

<form>
        <p>
        <input id="tag1" type="text" name="tags" class="tags" value="@Model.list" onblur="setValue()"; /></p>
        <script>
            $('#tag1').tagsInput({
                // my parameters here
            });

        </script>
<style>
#wrapper { 
margin: 20px;    
}


</style>



    <p>
        <input type="submit" value="Create" />
        <input type="hidden" name="taggg" id="tag2" />
        <script type="text/javascript">
            function setValue() {

                document.getElementById("tag2").value = document.getElementById("tag1").value;
            }

            window.onload = setValue;
        </script>


    </p>


    </form>

Answer 1

I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.

The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.

The window.onload = setValue will do the same on page load.

HTML

<input id="tag1" type="text" name="tags" class="tags" value="@Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->

JavaScript

function setValue() {
    document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}

window.onload = setValue;

Answer 2

Try this

<input id="tag1" type="text" name="tags" class="tags" value="@Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />

Jquery:

$("#tag2").val($("#tag1").val());

or

$("#tag1").blur(function() {
  $("#tag2").val($(this).val());
});

Answer 3

You can do like this (and you will need javascript for this).

Give a id to your hidden input also like:

<input type="hidden" id="hidden_input" name="tag" value="tags" />

and then use/paste this code when you need it:

var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;