Consider the following code snippet:
inputTextField=document.getElementById("Phone_input");
var value = inputTextField.value;
value=value.substring(0,10);
where Phone_input is an <input type="text"/> element. Why during the running of this script there is no changes of actual value of the <input type="text"/>. We're changing value by the reference which indicates to inputTextField.value.
The variable value is not a reference, so after the change you must write it back into the textfield:
value=value.substring(0,10);
inputTextField.value = value;
Or, in one line:
inputTextField.value = inputTextField.value.substring(0,10);
Javascript always passes by value, but in an array or object, the value is a reference to it, so you can 'change' the contents.
In this case you have to do it this way:
var inputTextField=document.getElementById("Phone_input");
inputTextField.value = inputTextField.value.substring(0,10);
Related
I'm attempting to get the value of text typed by a user in an input box but the problem is that instead of getting the value which the user has typed, I get the preset value of the input which is 'undefined'.
HTML
<input type="text" id="userInput" value="" name="title"
placeholder="Enter the name here" required="required"/>
<input type="button" id="text_value" value="Set Input"/>
<!-- I have this button here because I think maybe
I should have a button to change default value but
I don't know the javascript to do this -->
Javascript
// Gets input value id
var theuserInput = $("#userInput").val();
The reason I haven't shown query string code is because the input value is passed along in the url but the problem is that the default input value 'undefined' is passed instead of actual user input.
Any solutions?
ADDITIONAL CODE
Ok so here is the querystring, when you click the 'pass' button the input is passed along in querystring:
$('.pass').click(function() {
window.location.href = 'http://lala.com/passing.php?input=' + theuserInput + '';
return false;
});
Try this instead:
$('.pass').click(function() {
var theuserInput = $("#userInput").val();
window.location.href = 'http://lala.com/passing.php?input=' + theuserInput + '';
return false;
});
The this is removed before the call to the val() method.
The reason why you get undefined is because theuserInput is not defined inside the anonymous function scope passed to #click method. The JS engine tries to find theuserInput inside the "englobing" scopes recursively until reaching the global scope or finding theuserInput value in one of the successive "englobing" scopes. Since, the variable theuserInput can't be found in any scope, it is affected the default value undefined.
DEMO 1
DEMO 2
var theuserInput = document.getElementById("userInput").value;
I'm trying to assign a variable to another variable and try to do only one way binding. But when value is updated in view, it updates to original variable too. How do I stop this two way binding while assigning variable to another.
For example:
function personController ($scope) {
var templateValue= "original value";
$scope.myVal= templateValue;
}
In view:
<input type="text" ng-model="myVal" />
Result:
When we type something in textbox, it updates value in myVal and templateValue too, i.e value in templateValue changes to whatever I just typed in the input box. Is there a way to assign variable to another variable doing only one way binding? I want two way binding between $scope.myVal and the input box but not between templateValue and input box.
You can't "force one-way binding" because of the weay JavaScript works.
In your example, updating myVal will not actually update templateValue.
function personController($scope) {
var templateValue = "original value";
$scope.myVal = templateValue;
}
If you have the following structure, then yes, changing myVal.test will update templateValue.test because they both reference the same object in memory.
function personController($scope) {
var templateValue = { test: "original value" };
$scope.myVal = templateValue;
}
if you want myVal and templateValue to reference different objects but have the same content, make a copy of the original object:
$scope.myVal = angular.copy(templateValue);
I also suggest familiarising yourself with Javascript by reference vs. by value.
If I have a text input and have set a default value in the HTML, is there anyway to access the original value after jquery has changed the current value using .val()?
It was my understanding that jQuery should be changing the value property and not the value attribute?
Edit: Note I'm not asking how I could store the default value to retrieve it later (e.g. in data or in a var) I'm interested in why jQuery is modifying the attribute of the input field (and in turn the defaultValue) and not just the property.
For this example:
<input id="me" type="hidden" value="starting value" />
<script>
var $field = $('#me');
console.log($field.val());
console.log($field.prop('defaultValue'));
console.log($field.val('new value'));
console.log($field.val());
console.log($field.prop('defaultValue'));
console.log($field.attr('value'));
console.log($field.prop('value'));
</script>
We see:
starting value
starting value
[input#me, context: document, selector: "#me", jquery: "2.1.0", constructor: function, toArray: function…]
new value
new value
new value
new value
Fiddle:
http://jsfiddle.net/jLsqmxg7/1/
jQuery "val" setter always change both the attribute and the property. They do this to not confuse the developer with a ambiguous behavior. If you really want to change only the property and let the tag attribute with the same value do this:
var $input = $("<input>", {value: 'original'}); // Using the jQuery constructor to create a input :)
$input[0].value = "foo"; // Changing the value property of this HTMLInputElement instance
console.log($input.val()); // foo
console.log($input.prop('value')); // foo
console.log($input.attr('value')); // original
With this, you're changing only the HTMLInputElement value property, not the tag attribute.
So, was I say, this turns the code a little confunsing.
Do you know why this
function deleteInputOnClick(input){
champ = document.getElementById(input);
if(champ.value =='E-mail'){
champ.value = "";
}
}
works but this way
function deleteInputOnClick(input){
champ = document.getElementById(input).value;
if(champ=='E-mail'){
champ= "";
}
}
it doesn't ?
It's probably a stupid little error but I really don't see where it could be.
Thank's
You're not setting the value back on the element in the second way, you're just assigning it to a local variable, you still need to do document.getElementById(input).value = champ;
That is because is champ is a variable that has been assigned the value of the input element.
Changing its value will not change the value of the input (as it is not a two-way binding, you just assigned the value to it)
So you need to directly target the value property of the input to alter its value
If you are trying to avoid using the .value to a lot of places you can cache both the input element and its value for different uses..
function deleteInputOnClick(input){
var champ = document.getElementById(input),
value = champ.value;
if(value=='E-mail'){
champ.value = "";
}
}
document.getElementById(input).value returns a string value while document.getElementById(input) returns a reference (an object). So in one case only the value of the local variable is changed, in the other the original object still links to the DOM value.
Have a look at this question: Javascript by reference vs. by value
function fkey(a) {
a || (a = {});
if (!a.fkey) a.fkey = $("input[name='fkey']").attr("value");
return a
}
I guess a is actually a function, but how to understand (!a.fkey) ?
a is an object in this case, it's setting the .fkey property on it if it isn't set (or is falsy) already.
For SO chat, this allows the fkey input to either be provided or gotten from the page, it's a hidden input at the bottom of your page, populated with a value used to authenticate your request and such.
Currently it's always pulling from the DOM, so really this function just adds the property, it would leave it alone if it were provided though.
a is not a function, it's an object.
The a.fkey is accessing a member of the a object. The ! in front means that if the member does not exist or the value is falsy, the expression evaluates to true and the fkey member is set to $("input[name='fkey']").attr('value');, which can also be accomplished with .val() instead of .attr('value')
The function you posted adds a member named fkey to a if it did not already exist. The !a.fkey part essentially means "does not already exist" (this works because once assigned, the member does not evaluate to false).
The function takes an object and adds an fkey property to it, which will be the value of
<input name="fkey"> field.
For example:
<input name="fkey" value="WATCH ME HERE">
var temp = {}; // make a new object
fkey(temp); // expand it with fkey's value
alert(temp.fkey); // WATCH ME HERE