input value showing one value but in display coming another value - javascript

I am facing one rare issue can some one help me here.
<input class="testVal" type="number" id="GT_FIRING_TEMPERATURE" value="-17" name="degC" onchange="angular.element(this).scope().unitConversion(value,name, id)">
here value is "-17" but in display in input[type='number'] box it is showing my old value "1"
in div it is showing proper value -17
it works perfect in div instead of input filed :) I can't understand the problem
Please find image here

Hello something must be wrong with your code,
it is very simple though to bind your input text to a variable.
HTML
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="number" ng-model="mynumber">
{{mynumber}}
</body>
JS
$scope.mynumber = 0;
live example: https://plnkr.co/edit/Inr3vKhuWaulXhythSDk?p=preview

Try this as you have not provided full details:
in your unitConversion function pass this.value
<input class="testVal" type="number" id="GT_FIRING_TEMPERATURE" value="-17" name="degC" onchange="angular.element(this).scope().unitConversion(this.value,this.name, id)">

here is the solution I found my self
<input class="testVal" type="text" id="{{item.param_type_value}}" ng-model="item.testCondition" value="{{item.testCondition}}" name="{{item.defUnit}}" onchange="angular.element(this).scope().unitConversion(this.value,name, id)">
I missed ng-model, and value should be the same ng-model and input type should be text.

Related

How i can pass value vue to hidden textbox

i need to pass value from vue to textbox, doing for one day but still didn't work.
my html input type code
<input type="hidden" id="variation" name="variation" v-model="variation">
second is my is my value is appear on paragraph
<p name fs="paragraph" fw="semi-bold" color="dark">{{ getVariantTitle(variant) }}</p>
its works for passing value to paragraph but not working for passing value into hidden html textbox. i really need value for passing into form post.
As the input type is hidden, instead of v-model just try using v-bind:value, as you don't need two way binding for a hidden input
I am sure there is better way to achieve what you're trying to do but for a quick fix you can try using v-bind instead of v-model
<input type="hidden" id="variation" name="variation" v-bind:value="variation">
This means the hidden text field will always have the same value as this.variation
EDIT:
<input type="hidden" id="variation" name="variation" :value="getVariantTitle(variant)">

Input type ="number" Value does not update in html is this normal

I have not used this before just now and noticed it does not update its value in html?
Basically i have a Html Table with this in it , and user will update it to a quantity needed and Submit and i will take the Html parse it to get the things.
But in the html i see the value of input box is always 1, i it never updates itself
<input type="number" id="testNumber" value="1" min="1" max="100" />
While yes, the markup indicates that the value is still 1, if this form were to be submitted, the displayed value of the number input would still get returned.
You can verify this by running the following in your browser's console:
var input = document.getElementById('testNumber');
input.value;
EDIT 1:
If you want the value of the html to match the value of the dom element, assign it yourself, like so:
input.setAttribute('value', input.value);
This is just a sample. But it handles the INCREASE(+)/DECREASE(-) buttons clicked and updates the input value.
$("input[type=number]").click(function(e) {
$(this).attr( 'value', $(this).val() );
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
jQuery('#input1').keyup(function(){
jQuery("#testNumber").val(jQuery(this).val());
});
});
</script>
</head>
<body>
<form>
Change Value:
<input type="text" name="input1" id="input1">
<br/>
<br/>
result
<input type="text" id="testNumber" value="1" min="1" max="100" readonly="" />
</form>
</body>
</html>
if I understood this question right, you need to change the number input on event.
here is you can try
$("#quantity").val(1);
on event it will change the #quantity to 1 even you would see this on the browser.
My input had type="number" and I was setting a non numeric value to it using JavaScript. This is a really subtle mistake and hard to notice.
PS: Probably not an answer to the question above, but all my google searches returned this page as a first result.

How to get textbox value? that exsist in input tag but not in textbox

I have a textbox which is empty, but when i inspected, it has following html:
<input data-bind="value: optionName, namePath: true" id="QuestionOptions_0__Text" name="QuestionOptions[0].Text" onkeyup="AddToGroupOption(this.id);" type="text" value="Male"></input>
I am trying to get value of textbox as:
$('#QuestionOptions_0__Text').val()
and
$('#QuestionOptions_0__Text').attr('value')
but it always returns ""
How can i get the value,
Plz guide me,
Thanx
Ok,
I have found the solution, I can access the value by:
$('#QuestionOptions_0__Text').prop('defaultValue')

Angular JS getting a value to appear in an input text

I have this value here:
{{step1.$valid}}
which returns false. What I am trying to do is get the text "false" to appear in an input text box:
<input type="text" ng-model="user.stepValidation" ng-value="{{step1.$valid}}"/>
I have also tried value and ng-bind and neither of these get the value from {{step1.$valid}} to appear in my input text...please help.
Try this:
<input type="text" ng-model="user.stepValidation.step1.$valid"/>
Here's a Fiddle.

Angular.js: update binding after manual modification

I'm only starting to dive into angular.js and have found this issue that I can't seem to get around. Consider this simple code:
<input type="text" ng-model="test">
<input type="text" value="{{test}}">
When I write in the first field, the second one is updated nicely. When I write in the second field and then go back to the first one, the binding is not updated anymore. Interestingly though, the HTML attribute value does get updated - it's just not displayed.
Equivalent (at least roughly) code in vanilla javascript does not suffer from this:
<input type="text" id="model">
<input type="text" id="binding">
<script>
var model = document.getElementById("model");
var binding = document.getElementById("binding");
model.addEventListener("keyup",function() {
binding.value = model.value;
});
</script>
Here's a fiddle for you to test both: http://jsfiddle.net/Q6b5k/
Any idea why this happens when using angular.js and how to fix this?
[EDIT] Judging by the initial replies, it appears I have not made it clear. I do not want the second field to update the first one. The binding is to be one-way only, e.g. to allow filtering or even manual corrections (such as automatic creation of a URL alias in a blog post creation form). http://jsfiddle.net/Q6b5k/1/
The value attribute is only used when rendering the initial HTML. After the page load, everything else happens in the Angular Event Loop and therefore you need to do something that event loop can pick up. You can use ng-change for what you are looking to do:
<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">
This happens because {{value}} does not create a binding, it is used for interpolation.
The simplest solution is to use ng-model in both the fields
<div ng-app>
Angular.js:<br>
<input type="text" ng-model="test">
<input type="text" ng-model="test">
</div>
Demo: Fiddle

Categories