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)">
Related
I have a reactive form containing input having attribute in it:
<input type="text" [attr.data-challengeId]="value.id" [formControlName]="value.label">
On submitting form I get only value, but I need the attribute value too.
Tried adding tag reference #inputTag, but that doesn't help.
Let me know how I can read the attribute inside tags.
One solution to our problem is to create input hidden
<input type="hidden" name='data-challengeId' [value]="value.id" ngModel>
I have the following code:
<div data-ng-controller="MainController">
<input class="amount" type="text" name="" value="" />
<input class="result" type="text" name="" value=""/>
</div>
I want to take a numerical value from $scope and add it to a number entered by a user in the input with class "amount" and display the result in the input with class "result". So, basically, the variable is defined in the MainController function as the following:
$scope.cost = 100;
I'm a bit confused as to what the best way is to do this, I see there are ng-value and ng-model directives at my disposal but I am having a hard time understanding which is the right one for this application (and how to properly use them).
Seems like your application is asking for an inputs and they are going to submit there values OR gonna store it somewhere in DB. So ng-model (two way binding) will suits you application, which will update the value on model & view both.
Markup
<div data-ng-controller="MainController">
<input class="amount" type="text" ng-model="cost"/>
</div>
Above field will pre-populated as 100 and as you update it will also change $scope.cost value and the value if it is displayed on view anywhere.
Don't think about the ng-value that is only one way sort of binding. You can assign the value to input using ng-value="cost" that will only update the value attribute of input but when you update input from html you will never get those changes reflected inside cost scope variable as ng-value is meant for single way binding. Thinks like you should use use ng-value only when you want to display a value.
you should use ng-model
ng-value : Its a directive useful for evaluating expression and the value is bound to $scope used for evaluating expressions
ng-model : helps in two-way data binding ,view-->controller and vice versa moreover its a directive binds the value of HTML controls
I have a form with a dynamic name containing fields with dynamic names.
I want to show a visual error feedback using ng-show if the field is invalid.
But since the field is set using a variable, I need to do something like:
ng-show="{{form.name}}.{{form.field.name}}.$dirty && {{form.name}}.{{form.field.name}}.$invalid"
How do I do that?
(The above code is obviously not working)
just do it not using interpolation, ng-show doesn't need it:
HTML form
<form name="testForm">
<input name="testInput" value="123">
</form>
validation ng-show:
ng-show="testForm.testInput.$dirty && testForm.testInput.$invalid"
so, in short just treat the variable name as normal and use it...
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.
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.