We Keep Coding

Input field extends after setting value?

In my app I have few forms where users can pick the value and that value will show in text input field. These values are usually one to three characters. Once I pick the value my input field extends (changed the width). Input field has enough space (size set to 10) and there is no reason to be extended. I have checked if my values are trimmed and nothing is odd with the value. I'm wondering if this is related to JQuery .val() that I use or something else? Here is example of my code.
HTML:
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
JQuery:
//Looping through the table with the records where users choose desired code/value for their input field
$('#searchTbl tbody tr').on('click', function(){
var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table
$('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated
});
I have attached image where you can see input field before and after user selects the value. There is obvious difference in field size. Nothing changed in HTML structure (I monitored in my dev tools after value is set).

If I'm correct, you're not only setting a value, but also applying a style: .css('font-weight','bold');, I suspect it's the reason you have a change of your input's width...
Try removing this call to .css() to check, and if it confirms, try applying your style once on rendering the page...

How to set prefilled input field active with Jquery/javascript?

I'm using a calculator widget where I can enter random values into an inputfield and then the widget automatically calculates when clicking the "go"-button.
Now I want to insert/prefill the value into this input field, since the value which needs to be calculated comes from a server. The issue though is, that this input field apparently only reacts on keypress. I tried to do this:
$('input[name="value"][data-type-money]').val('150.000').focus();
and
$('input[name="value"][data-type-money]').val('150.000').select();
which prefills the input field with the desired value but when I click the "go" button the calculation fails as long I dont enter the value manually into the input field. So, in the end my solution does not work.
Does anyone know how I can solve this?

If data changes frequently you can also use the setInterval function:
<input name="value" data-type-money="money">
setInterval (function(){
var moneyValue = "150.000";
$('input[name="value"][data-type-money]').val(moneyValue);
},1000);
fiddle here: http://jsfiddle.net/85pbnnu1/
or you can just do:
$(document).ready(function(){
$('input[name="value"][data-type-money]').val('150.000').change();
});

Edit, Updated
the input field is -
and reacts only on keypress, I mean when value is entered manually
If input value property cannot be changed , try replacing the element in DOM with value set at html using .replaceWith()
$('input[name="value"][data-type-money]')
.replaceWith("<input name=value data-type-money type=text value=150.00 />")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="value" data-type-money type="text" />

jQuery - Change name of an input field by using value of another input field filled at the same time

I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks

You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!

you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});

How to make Mootools get('html') including values of inputfields

When I have HTML input fields and a change them by direct input they should actually change there value attribute. But when I try to get the whole HTML record it just shows the old value attributes.
Somehow this is clear to me, couse the HTML is not overwritten, but I need the HTML containing the changed input values. How can I approach it?
Example:
$('input').addEvent('blur', function(){
alert($('adiv').get('html'));
});
<div id="adiv">Enter something in input box and press tab<div>....<input id="input" type="text" value="1">the mootools will grep the old value of 1 again....</div></div>
http://jsfiddle.net/hJtzc/1/
alerts allways:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="1">the mootools will grep the old value of 1
> again....</div>
but what I need to get is:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="[VALUE FROM USER]">the mootools will grep the old
> value of 1 again....</div>

Attribute value in HTML sets initial, default value of the element, DOM property value contains the actual, real value of the element . To change the default value of input element change defaultValue property:
$('input').addEvent('blur', function(){
this.defaultValue = this.value;
alert($('adiv').get('html'));
});
This is normal behavior that is not related to mootools framework

Binding value to input in Angular JS

I have input like this
<input type="text" name="widget.title" ng-model="widget.title" value="{{widget.title}}"/>
I want to change input value dynamically so i use that but it doesn't change the value:
$scope.widget.title = 'a';

You don't need to set the value at all. ng-model takes care of it all:
set the input value from the model
update the model value when you change the input
update the input value when you change the model from js
Here's the fiddle for this: http://jsfiddle.net/terebentina/9mFpp/

If you don't wan't to use ng-model there is ng-value you can try.
Here's the fiddle for this: http://jsfiddle.net/Rg9sG/1/

Use ng-value for set value of input box after clicking on a button:
"input type="email" class="form-control" id="email2" ng-value="myForm.email2" placeholder="Email"
and
Set Value as:
$scope.myForm.email2 = $scope.names[0].success;

Some times there are problems with funtion/features that do not interact with the DOM
try to change the value sharply and then assign the $scope
document.getElementById ("textWidget") value = "<NewVal>";
$scope.widget.title = "<NewVal>";

{{widget.title}}
Try this it will work