This is my first html textbox with javascript code
<div>
<input type="text" onchange="getTheValue(this)" id="12345" />
</div>
and this is my second html tag
<input type="hidden" id="12345_hiddenField" ng-model="hiddenField"/>
And on onchange event i am calling this javascript function
function getTheValue(data) {
document.getElementById("12345_hiddenField").value = data.value;
}
i want first textbox value to be assigned to second textbox ngmodel value with pure javascript no angualrjs methods in that, becoz that onchange function is written in seperate pure javascript file,is their anyway to do this?
I would do it like this.
document.getElementById("12345").addEventListener('change',function() {
document.getElementById("12345_hiddenField").value = document.getElementById("12345").value;
See fiddle https://jsfiddle.net/9fh8rxck/
<input type="text" ng-model="textboxValue" id="12345" />
and your hidden:
<input type="hidden" id="12345_hiddenField" value="{{textboxValue}}"/>
Your input text is bound to the $scope property textboxValue
Your hidden input uses that variable as value {{textboxValue}}, everything is 2-way data-bound.
Related
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)">
I am trying to data bind a form element in knockout.js. However I don't want the element to be editable in the form, or even display the element to the user.
I'm able to correctly data-bind the value to an input element. But I would prefer if I could just pull the value from the HTML or a labels text, or a span. So the below works, but I'm not able to change it so it's not an input that the user can change.
<input id="txtProvider" name="txtProvider" type="text" data-bind="value: $root.session().Resource().provider" />
I tried just using a hidden element with a placeholder, but this didn't work.
<input id="txtProvider" name="txtProvider" type="hidden" placeholder="WebEx" data-bind="value: $root.session().Resource().provider" />
Any suggestions?
Thanks in advance for the help.
What you're doing works, or should work, fine:
<form>
<input type="hidden" data-bind="value: myHiddenVal" />
</form>
function ViewModel() {
self.myHiddenVal = ko.observable('Foo');
}
ko.applyBindings(new ViewModel());
This will yield:
<input type="hidden" data-bind="value: myHiddenVal" value="Foo">
Example: https://jsfiddle.net/thebluenile/myves32x/
Though I have to say, I of course don't know your exact use case, but "pulling values from HTML elements" is sort of antithetical to how Knockout, or any other data binding framework, works. If the user doesn't have to edit the field you can just keep it out of the UI altogether. The only valid use case for hidden elements I can think of would be if you were submitting the form to a server side script for processing, instead of sending its contents via AJAX.
I am trying to set the value of a hidden form field with the value entered in a textfield when submitting my form.
I have tried combining the answers to various questions but the closest I have come is getting the 'id' of my source field - but not the value.
Text field name = wpcf-available-stock
Hidden field name = wpcf-total-stock
The hidden field simply needs to be set to the same value as the text field on form submit using Jquery?
I cannot seem to find a simple sample in other questions asked... thanks
To achieve expeccted result, use below
HTML:
<input type="hidden" name="wpcf-total-stock">
<input type="text" name="wpcf-available-stock" value="test">
JS:
$("input[name='wpcf-available-stock']").on('keyup',function(){
$("input[name='wpcf-total-stock']").val($(this).val());
alert($("input[name='wpcf-total-stock']").val());
});
Codepen- http://codepen.io/nagasai/pen/RRBwjA
First of all: Why would you fill a hidden form field from a text field when you're going to send it anyway?
Second, the jQuery looks like this:
var fieldValue = $('#wpcf-available-stock').val();
$('#wpcf-total-stock').val(fieldValue);
You can obviously chain that together, but this is pretty clean.
Here's a demo: https://jsfiddle.net/u5Lj8cLz/
Pure JavaScript solution.
updateHidden = function(x) {
document.querySelector("[name=bar]").value = x;
}
<input name="foo" value="" onchange="updateHidden(this.value)" type="text">
<input name="bar" value="sometext" type="hidden">
Update
updateHidden = function() {
document.querySelector("[name=bar]").value = document.querySelector("[name=foo]").value;
}
document.querySelector("[name=foo]").addEventListener("change", updateHidden);
/*
or,
document.querySelector("[name=foo]").addEventListener("keyup", updateHidden);
*/
<input name="foo" type="text">
<input name="bar" type="hidden">
I am new to angularjs. Trying to use it to build simple applications. I have a textbox in html with a default initial value of "Abc".
<input type="text" value="Abc">
Now, I want to fetch the value which is there in textbox. For that I am using ng-model directive.
<input type="text" ng-model="demo" value="Abc">
But as soon as I enter ng-model directive in input, the default value in text box disappears and it shows a blank textbox. Any ideas why?
That is the desired functionality - Angular way
<input type="text" ng-model="demo" value="Abc">
function Main($scope) {
$scope.demo = 'Abc';
}
Another workaround is by using ng-init:
<input type="text" ng-model="demo" ng-init="demo='Abc'" value="Abc">
For reference : Input default value
The elements & the code.
HTML
<input value="" name="data[Filter][address]" type="text" />
<input value="" name="data[Filter][client]" type="text" />
<input value="" name="data[Filter][tenant]" type="text" />
<input value="" name="data[Filter][contract_end_date]" type="text" />
Javascript
console.log($("[name*='data\\[Filter\\]'][value!='']").serialize());
The problem: even if they are all empty, they are serialized.
Why?
You're looking at the value attribute. You can filter off of the value property instead:
http://jsfiddle.net/Y2P6w/
var $filledElems = $("[name*='data\\[Filter\\]']").filter(function () {
return $.trim(this.value).length;
});
The point is when the input tag gets inserted to the page, no matter it is in the page load or in your dynamic JavaScript codes, if it has the value attribute your selector query would use it or if you change your input's value using setAttribute in JavaScript or .attr() in jQuery, their value attribute actually gets changed, but if you change it with .value in JavaScript or .val() in jQuery or simply change the value in the page as a textbox, the attribute won't change, so you better not use value attributes in your selectors, because they are not reliable, an instead use $("[name*='data\\[Filter\\]']") and filter it as #JasonP has pointed out.