jquery dynamic adding hidden field

Question

$().ready(function() 
  {
  $("#add").click(function() 
    {
    var vals = $("#txtaddfeature").val();
    if(vals !='')
      $('#FeatureLists').prepend('<option value="' + vals + '" selected="selected">' + vals + '</option>');
    $('#txtaddfeature').val('');
    });
  });

Ok after adding the value to the select list as above

$('#FeatureLists').prepend('<option value="' + vals + '" selected="selected">' + vals + '</option>');

I want to create a dynamic hidden field with id=vals defined above and set it value to value entered in the textbox . how can i do that

Answer 1

You can do like:

$("input").attr("type", 'hidden').val($('#txtaddfeature').val()).appendTo('selector_here');

Answer 2

I couldn't tell exactly what you wanted. It seems like you want both the ID and the value of the new hidden input to be the value of vals. Is that right?

var $hiddenInput = $('<input/>',{type:'hidden',id:vals,value:vals});

Then you would append it wherever you want.

$hiddenInput.appendTo(selector);

EDIT:

For clarification, selector is the reference to the element where you want to append your new input.

If you want to append it to the body tag, do:

$hiddenInput.appendTo('body');

If you want to append it to an element with the class someClass, do:

$hiddenInput.appendTo('.someClass');

Answer 3

I would check to see if it was on the page first, then add.

function SetHiddenInput(val)
{
    var $txtaddfeaturehidden == $("#txtaddfeaturehidden");

    if ($txtaddfeaturehidden.length == 0)
    {
        $("input").attr({
            id : "txtaddfeaturehidden", 
            type : "hidden",
            value : $('#txtaddfeature').val()
        }).after('#txtaddfeature');
    }
    else $txtaddfeaturehidden.val(val);
}