Im new in Angular and I stared working in one project witch is using it for front end side. The thing is. I have a dropdown witch has values 1,2,3 etc... and when you select something in dropdown, depending on what you click. currentEntry variable is changing value and im filtering data value="{{entry['properties'][currentEntry]['password']}}". This works perfectly when I have simple input tag.
But when I do this:
<input type="password" name="pasword" ng-model="password" ng-change="addProperty(password,'password')" class="form-control" placeholder="Password" value="{{entry['properties'][currentEntry]['password']}}">
whats happening up there is that ,value properity is changing when i do inspect element in code but not on the client.
Than i realized that value is stored in ng-model, so I need to somehow create this models dinamicaly for example when I click on drop down item witch has value 1 ng-model should look like this ng-model="password1" etc...
I have this number stored in variable "currentEntry" so i tried to do something like this
<input type="password" name="pasword" ng-model="password{{currentEntry}}"......>
but I get syntax error
Token '{' is an unexpected token at column 9 of the expression [password{{currentEntry}}] starting at [{{currentEntry}}].
How to solve this?
You can't do dynamic variables like that in Javascript (this is not php). Instead use a function or an object.
Function
$scope.password = function(){
//use $scope.currentEntry here
return value;
}
and in your view
<input type="text" ng-model="password()"/>
Object
Another possibility would be this
<input type="text" ng-model="passwords[currentEntry]">
Where $scope.passwords is an object containing your passwords as such.
$scope.password= {1: 'a password', 2: 'another password'}
Also see Use dynamic variable names in JavaScript for more on dynamic variables in Javascript.
Related
this is the code of my element
<input type="text" class="nameOfClass" id="someid" name="somename" maxlength="255" placeholder="justholder" ng-model="model" tooltip-placement="top" tooltip-trigger="mouseenter" tooltip-animation="false" style="">
as you can see there is no attribute value, but I can clearly see that there is text in that text field in web app I am trying to automate.
So my problem is, that I don't know how to get value of the text field.
I've tried google chrome inspector to find where is the value but without any luck. Somewhere I read, that caching can causing this problem, but in the network console I can see the values in request response.
Thanks
Assuming that you want to get the value written in the text field, you can get it by invoking val.
cy.get('#someid')
.invoke('val')
.then((value) => {
cy.log(value) //logs the value
})
If you want to apply any assertion on the value, you can:
cy.get('#someid').should('have.value', 'your-value')
If you are referring to type="text", that's not the text the user types in - it's an attribute that tells the input what values to allow.
You can also have type="number", type="date", type="color", etc
Checking that input is of type "text" would be done with this,
cy.get('input#someid').should('have.attr', 'type', 'text')
Checking the value property would be done like this
cy.get('input#someid')
.type('entering a value') // there's nothing in value yet
.should('have.value', 'entering a value')
I'm trying to impliment some CRUD page with AngularJS. So i have input with some validation requirements
<input ng-class="addForm.country.$error.pattern?'bad-input-border':''"
name="country"
ng-model="adding_element.country"
type="text"
pattern="[A-Za-z]+"
class="form-control">
Pattern that match only letters.
Also i have bingding model with that input.
The problem is: when i change input value directly on page, validation works fine addForm.country.$valid == true; but when i'm trying to change my model from code i get addForm.country.$valid == false even if data is valid.
I changing model on button click, that get generated element from my controller:
$scope.generate_country = function()
{
$http.get("/index.php/cars/generate").then(function(response){
$scope.adding_element.country = response.data.item.Country;
});
};
The result in response.data.item.Country is string. It fails input pattern when i click the button, but when i CTRL+C CTRL+V generated result in input it's OK.
How can i solve that? TIA!
I have a form with an input such as
<td class="units_depth_form">
<input id="id_form-0-rain" name="form-0-rain" step="0.01" type="number" />
</td>
and I want to allow a user to enter units. For instance the form could expect values in inches, but I would allow a user to enter '20 cm', and when leaving the text box it would contain '7.87'.
To do this I have in the JavaScript part of the page the following jQuery code:
$(".units_temp_form input").focusout(function() {
// Convert and replace if valid double ending with 'cm'
and I added 'novalidate' at the end of the form tag. The problem is that $(this).val() is empty when the input is invalid. Is there another way to get to the user entered value?
Before anyone suggests the solution, removing the type='number' part would solve the problem but I'd prefer not to do this. This form is created in Django through a ModelForm, and it would involve a lot of hacking that would defeat the purpose of using Django in the first place.
That seems to be the way browsers behave when they find invalid data inside a type="number" input.
Perhaps your best option is to use <input type="text"/> and implement the up and down arrows yourself. There are several options around, I found one that looks nice and another that keeps going on mouse down.
If the form inputs must be created with type="number" because of Django, you can change that on the client as soon as the page loads:
$(document).ready(function() {
$(".units_temp_form input").each(function(){
if ($(this).attr('type') == "number") {
$(this).attr('type', 'text');
}
});
});
Hi I have a datatables based table that holds data. I need to be able to get the values out of the following string that I have been able to do so far.
<input name="jobNo" value="job_no_123" />job_no_123
I need to be able to get the name and the value and store into separate variables that I then pass off to do something else.
However I do also have another 4 fields on the page that I need to capture too:
<input name="item_1" value="data1" />data1
<input name="item_2" value="data2" />data2
<input name="item_3" value="data3" />data3
<input name="item_4" value="data4" />data4
And of top of this, this would only be the data from one row, and I need to do this for multiple rows too. But I need to start somewhere.
Please help.
Thanks
I am not sure what are your needs but here is a code that should help
$('input').each(function(i, val){
$(this).attr('name'); // will get the attribute name
$(this).attr('value'); // will get the attribute value
$(this).attr('text'); // will get the text inside the input
});
This regex can find the values from your code. However, it assumes that the input is strictly in that format, with no variations in even whitespace.
<input name="(.*)" value="(.*)" />
The values will be in captured groups 1 and 2.
Note: I am aware that regex should not be used to parse HTML, but if the input is strict enough, it works.
Using jQuery, I change the value of an input text field through some process. After the process is done, I need to capture this change and apply it to another process. My problem is that I can't seem to capture this change and assign it to a variable. I know the changes are happening because the DOM is getting updated. Furthermore, this variable assignment works in IE, but not for the other browsers I tested.
Below is a snippet to prove my point (and you can see this online here: http://jsfiddle.net/xMwAE/).
<form>
<input type="hidden" name="my_hidden" value="Hidden Field" />
<input type="text" name="my_text" value="Text Field" />
</form>
$().ready(function() {
$('input[name=my_hidden]').val('Hello Hidden Field');
$('input[name=my_text]').val('Hello Text Field');
// Display
var temp = $('form').html();
// Though the DOM is updated with the new values. The variable temp
// does not capture the changes to the input text field, but captures
// the change in the hidden field. When in IE, temp captures the
// changes in both fields.
alert(temp);
});
Obviously, I need consistent behavior across browsers. Any ideas what's going on?
I don't get any trusted idea what happens, but somehow there should be a difference between setting the value as a member (input.value) or setting the value as a attribute-node.
This works for me :
$('input[name=my_text]').each(function()
{ this.setAttribute('value','Hello Text Field');});
I guess its a bug in innerHTML, see bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=535992
Alternatively, you can store the values of your fields into array and use however you like like this:
var data = [];
$('form :input').each(function(){
data.push(this.value);
});
Now you can check for values like this:
alert(data[0]);
alert(data[1]);