insert jquery variable into html input

Question

Aim is to get value from one input cell and insert to another.

To get value I use

var name = $('#test').val();

And the above works.

Then I need to insert. If I insert simple text (not variable), then it works

$("#test3").val("Dolly Duck");

But how to insert variable (var name) instead of val("Dolly Duck")?

Below if whole code

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

//This works
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

//But his does not work
//at first get value from input form (define variable) and alert to check if it works
var name = $('#test').val();
//alert(name);

//now need to insert
//$("#btn4").click(function(){

//below does not work None of them
//$("#test").name;
//$("#test4").$('#test').val();
//$("#test4").jsvar: $('#test').val();

});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse1"></p>
<p>Name: <input type="text" id="test3" value="Mickey Mouse2"></p>
<p>Name: <input type="text" id="test4" value="Mickey Mouse3"></p>
<button id="btn1">Show Value</button>
<button id="btn3">Set Value</button>
<button id="btn4">Set Value</button>
</body>
</html>

Unfortunately $("#test").val(varName); does not work. Working example is accepted answer. — user2232696
– user2232696, Commented Apr 14, 2013 at 7:28
I guess I should have made it more clear that you were supposed to replace varName with your variable name (which happens to be name) — asifrc
– asifrc, Commented Apr 14, 2013 at 7:38

Blender · Accepted Answer · 2013-04-14 07:02:41Z

2

Pass in the variable:

$("#test3").val(name);

I would also fetch the value right before you want to set the value of the other textbox, as the name variable won't update by itself:

$("#btn3").click(function() {
    var name = $('#test').val();
    $("#test3").val(name);
});

Also, make sure that your code that interacts with the DOM is inside of a $(document).ready() callback:

$(document).ready(function() {
    $("#btn3").click(function() {
        var name = $('#test').val();
        $("#test3").val(name);
    });
});

answered Apr 14, 2013 at 7:02

Blender

300k55 gold badges462 silver badges511 bronze badges

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

4 Comments

user2232696 Over a year ago

Thank you. As I understand I can define multiple $(document).ready(function() in one file? Now used two and all works....

Blender Over a year ago

@user2232696: You can, but I wouldn't do it.

user2232696 Over a year ago

Thanks. But in such case.. you wrote: fetch the value right before you want to set the value of the other textbox. The textbox is within <body></body> but in <head></head> I need to call other functions within document ready... Not fully understand: name variable won't update by itself: If in <head></head> I define variable name, then latter the variable may be unset (disappear/change)? For what reasons?

Blender Over a year ago

@user2232696: Well, if you change the textbox's value afterwards, name won't reflect that change, as you grabbed the value at the very beginning.

Collectives™ on Stack Overflow

insert jquery variable into html input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related