Update Value Attribute of Input with jQuery

Question

I am attempting to update the value of a form input with jQuery. Here is my HTML:

<div class="form-group">
    <label for="fb-updateDefaultValue">Default Value</label>
    <input type="text" class="form-control" id="fb-updateDefaultValue">
</div>

Here is my jQuery:

var currentDefaultValue = formElement.find('input').attr('value');
alert(currentDefaultValue); //This is just used to verify my code is working. This line does successfully alert the value in the input attribute
$("#fb-updateDefaultValue").val(currentDefaultValue); //This line is not updating the value attribute of the input even though the alert has the correct value

For some reason $("#fb-updateDefaultValue").val(currentDefaultValue); is not working. Any suggestions?

@sbaglieri I know, I am trying to set the current value of one input field to another. — three3, Jan 26 '15 at 21:10
`Val` is used for inputs. Label is not an input. Use `text` instead. — Gosha_Fighten, Jan 26 '15 at 21:10
@Gosha_Fighten I am not trying to update the label, I am trying to update the input. — three3, Jan 26 '15 at 21:14
In what way is your code "not working"? It's not clear to us what you expect to happen. — Blazemonger, Jan 26 '15 at 21:17
@Blazemonger I have an input on my page that a user types into. When they type into that input, I am retrieving that value with this line of code `formElement.find('input').attr('value');`. This line is successfully retrieving the value. I know this because of the alert. The alert has the value typed into the input tag. I am then attempting to update the value of a different input on the page with the value the user originally typed in. However, the line of code I wrote to do this is not working. That line of code is: `$("#fb-updateDefaultValue").val(currentDefaultValue);`. — three3, Jan 26 '15 at 21:20
Does your HTML have multiple elements with ID `fb-updateDefaultValue`? — Stryner, Jan 26 '15 at 21:21
[Your code works fine for me](http://jsfiddle.net/mblase75/m7c1p169/). You need to show us how to reproduce the problem. — Blazemonger, Jan 26 '15 at 21:23
Is the code get using ajax? Are you running your code on domready? — Irvin Dominin, Jan 26 '15 at 21:25
Please [don't ever use attr() to get the value of an input, it doesn't do what you think it does](http://stackoverflow.com/a/5876747/209259). — Erik Philips, Jan 26 '15 at 21:32

score 0 · Answer 1 · answered Jan 26 '15 at 21:21

0

Use val() to get the input value and text() to set text. So this would work in your case:

$(".form-group label").text($(".form-group input").val())

answered Jan 26 '15 at 21:21

Brendan Ritchie

2,285
15
22

Howard Renollet · Answer 2 · 2015-01-26T21:32:30.683

If I understand you correctly, you are trying to do something like this...

I think that part of the problem is that you don't have an event handler attached. In the example below, I attach the function to a button click.

$("#button").click(function (){
  $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

<input type="button" id="button" value="Update" />

In this example, similar to the first, I'm showing how you can automatically update the value when the value of the first input changes.

$("#input1").change(function (){
      $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

These are just two basic examples, but based on your comments, I think the problem may be that you don't have an event handler assigned.

Another option would be if you just want the code to run once. In this case, you need to run the code after the DOM is loaded. You can do that by using jQuery's ready() function like this

$(document).ready(function (){
  $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" value="defaultValue" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

score 0 · Answer 3 · edited Jul 04 '18 at 21:44

You can try this, with this code each time you type on the input1 you get the same value on the input2

<label for "input1">Value 1</label>
<input type="text" id="input1" />
<br />  


<label for "input2">Value 2</label>
<input type="text" id="input2" />
<br />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script>

<script type="text/javascript">
   $(function() {
     $("#input1").change(function() {
       var input1 = $("#input1").val();
     $("#input2").val(input1);
   });
});
</script>

Update Value Attribute of Input with jQuery

3 Answers3