jQuery get value from hidden field onclick and add value to another textfield

Question

HTML:

From: <input id="from" name="from" type="text" class="form-control input-md">
To: <input id="to" name="to" type="text" class="form-control input-md">

<input type="text" name="fromHidden" value="">
<input type="text" name="toHidden" value="">

jQuery:

<script type="text/javascript"> 

    $(document).ready(function() {

        $('#from').click(function() {
            var input = $( '#from input').val();
            $("#fromHidden").attr("value", input);
        });

        $('#to').click(function() {
            var input = $( "#to").val();
            $("#fromTo").val(input);
        });

    }); 

</script>

I want to get the values from the HTML input fields, 'to' and 'from', and add them to the hidden text fields 'toHidden' and 'fromHidden'. This is to be done at any time the 'to' and 'from' are changed.

The jQuery I have wrote isn't currently working.

Any help would be appreciated.

Answer 1

You can use attribute selector for name to get the named tags.

$('#from,#to').change(function () {
    $("[name=fromHidden]").val($('#from').val());
    $("[name=toHidden]").val($('#to').val());

});

Answer 2

  $(document).ready(function() {

        $('#from').blur(function() {
            var input = $( '#from').val();
            $("input[name=fromHidden]").val(input);
        });

        $('#to').blur(function() {
            var input = $( "#to").val();
            $("input[name=toHidden]").val(input);
        });

    }); 

Answer 3

If you want to update the values on change then use following script

$('.form-control').on('input propertychanged', function () {
    var input = $(this).val();
    $('[name=' + this.id + 'Hidden]').val(input);
});