Text from one textbox to another using JavaScript

Question

I have a textbox as

 @Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData" })

And on losing focus from this textbox I want the text in it to be displayed in another textbox(with id =customerbarcode_field)

I am using the javascript

<script>
    function CloneData() { 
        var value = document.getElementById("#barcode1").value

        document.getElementById("#customerbarcode_field").value = value;
    }
</script>

However the function is not being triggered when I lose focus from the first textbox.

What did i miss ?

onblur = "CloneData()" <-- notice the brackets, also remove the starting # inside getElementById — Kyle Needham
– Kyle Needham, Commented Apr 14, 2014 at 12:22

Christos · Accepted Answer · 2014-04-14 12:28:45Z

3

You have to change the onblur=CloneData, to the the following one:

onblur=CloneData()

Also, you have to change the selecting of the DOM elements. I mean you should change the# tag in the document.getElementById() method. There we pass the Id of the DOM element we want to select without prepending the # before the Id. For instance, you should use this

document.getElementById("customerbarcode_field")

insted of this

document.getElementById("#customerbarcode_field")

If you were using JQuery, then you would have selected this element as:

$('#customerbarcode_field')

edited Apr 14, 2014 at 12:28

answered Apr 14, 2014 at 12:23

Christos

54.1k9 gold badges82 silver badges114 bronze badges

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

Comments

Ehsan Sajjad · Accepted Answer · 2014-04-14 12:23:59Z

2

Modify the TextBox like this:

@Html.TextBoxFor(m => m.SingleUnitBarcode, 
                new { @class = "form-control",
                      @id="barcode1", 
                      onblur = "CloneData()" })

and script like this, in javascript you are mixing javascript with jquery:

<script>
    function CloneData() { 
        var value = document.getElementById("barcode1").value

        document.getElementById("customerbarcode_field").value = value;
    }
</script>

if you want to do with jquery then:

<script>
        function CloneData() { 
            var value = $("#barcode1").val();

            $("#customerbarcode_field").val(value);
        }
    </script>

answered Apr 14, 2014 at 12:23

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Comments

Govind Singh · Accepted Answer · 2014-04-14 12:23:15Z

1

replace onblur = "CloneData" by onblur = "CloneData()" and remove # from id

function CloneData() { 
    var value = document.getElementById("barcode1").value

    document.getElementById("customerbarcode_field").value = value;
}

answered Apr 14, 2014 at 12:23

Govind Singh

15.5k14 gold badges77 silver badges108 bronze badges

Comments

csharpwinphonexaml · Accepted Answer · 2014-04-14 12:23:30Z

0

Replace

@Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData" })

with this:

@Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData();" })

answered Apr 14, 2014 at 12:23

csharpwinphonexaml

3,71810 gold badges34 silver badges64 bronze badges

Comments

Honorable Chow · Accepted Answer · 2014-04-14 18:50:59Z

0

It's bad practice to put your javascript event in the html in that manner. Since you are using jquery already you can attach a listener without polluting your html;

$("body").on('blur', '#barcode1', function(){
     $("#customerbarcode_field").val($(this.val());
});

answered Apr 14, 2014 at 18:50

Honorable Chow

3,1833 gold badges26 silver badges22 bronze badges

Collectives™ on Stack Overflow

Text from one textbox to another using JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related