How to Append Prefix Value in AngularJs model text box dynamically - javascript

I have over 50 text box elements in page. I am trying to append minus symbol in every text box after enter value (ng-blur) by using one common javascript function. but i am unable to pass ng-model name to javascript function from jsp element ng-blur call to append minus symbol after enter value. any solution.
JSP element:
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model1.rate')" ng-model="buzz.model1.rate"/>
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model2.rate')" ng-model="buzz.model2.rate"/>
JS Function:
$scope.appendMinusSymbol = function(model){
// append minus symbol as prefix to ng model value
};
Note : Edited my question (model1, model2, model3 like having 50 fields)

Check my solution on this fiddle. If you can, then pass only model name like in the fiddle, otherwise you will need additional parsing. Of course you need here additional check when to append minus sign if already exists.
<input type="text" maxlength="10" ng-blur="appendMinusSymbol('model1')" ng-model="buzz.model1.rate"/>
$scope.appendMinusSymbol = function(modelName){
$scope.buzz[modelName]['rate'] = '-'+$scope.buzz[modelName]['rate'];
};

Related

Associating two fields with the same ID

The website I'm writing uses the ID of one date field to return some data associated with it from an API. I need to implement a new date field, giving the user two input options. How can I associate the date submitted on the new field I'm creating with the ID of the old field that is used to return the data?
<input class="dateinput" type="text" id="startDate" name="startDate">
Is later used by
var input_startDate = document.getElementById("startDate");
to return data. I need to add another input field just like the first one as an option for the user.
Merely changing getElementById to getElementsByClassName wasn't enough for it to work.
It would actually be better if I could somehow "copy" the value from one field to the other, thus registering the value from the new field into the old one and then keeping getting the element ID.
You can use getElementsByClassName in the below way to work.
var input_startDate_1 = document.getElementsByClassName("startDate")[0].value;
var input_startDate_2 = document.getElementsByClassName("startDate")[1].value;
console.log (input_startDate_1);
console.log (input_startDate_2);
<input class="dateinput startDate" type="text" value="01-01-2021" name="startDate_1" />
<input class="dateinput startDate" type="text" value="02-01-2021" name="startDate_2" />

Selecting form field on a html page

I'm trying to prepare my first Greasmonkey script (with no experience in javascript/websites technologies) and I have problem with selecting field on a page. It is:
<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
I've tested:
document.querySelectorAll("input.form-control");
document.querySelectorAll("input.form-control.u-text-normal");
document.getElementById("user/fullName").value
but non of them is returning what I need... and what I need is possibility to fill that form field with the script. Could you help, please?
EDIT:
The methods given in the following answers I try to run in the browser console and they do not return me any element. Maybe someone could try to run it and tell me what I'm doing wrong? The website is a shopping cart on the pizza site :) But to see it you need to add pizza to cart ("Do koszyka") for a minimum of 20 zł and then go to payment ("Do kasy"). Then the first field "Imie i nazwisko" is what I would like to fill at the beginning.
If you need to get a single element, give the html element an id example:
<html>
<input id='id_here'data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
</html>
then get the element using
document.getElementById('id_here');
For multiple elements that share the same class you could use the query selector
document.querySelector('.form-control')
Is this what you wanted?
var example = document.querySelector('.form-control').value;
document.write(example);
<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal" value="test">
If you only want to select this element, use the most specific thing, in this case data-testid:
var x = document.querySelectorAll("[data-testid='user/fullName']")
console.log(x[0].value)
to select the element (here we select with the class and the data property to be the most accurate) =>
var element = document.querySelector('.form-control[data-testid="user/fullName"]');
After if you want add some value in this input =>
element.value = "My_value";
Regards
You can add 'id' or select your field by querySelector
let input = document.querySelector('[data-testid="user/fullName"]')
input.value='abc';
myField.value += '123';
<input id="myField" data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
Update
I try my method and it works pizza site which you mention in your question update:
But it looks like that console 'see' dom input element after you find it using right click> inspect element - strange

How to edit dynamic form fields to create a single hidden field comprised of the value of two fields

I need to send a form off to where a single hidden field is comprised of two of the other fields that will be dynamically populated by a user (post/zip code and first line of address) where after regular expression only the numbers remain "123|456".
I have attempted to start, using the code below, where I monitor the output in the console. I have managed to dynamically edit a textfield so that all that is shown are the numbers but this is not suitable for a user. So I was trying to store the edited textfield data into the hidden field whilst leaving the complete line of address but I could not see how this can be done.
Also, can someone explain why if I remove the commented line the variable is not stripped of any letters albeit just 1?
$(document).ready(function() {
$("#testMe").on('propertychange change click keyup input paste', function() //attaching multiple handlers
{
var removedText = $("#testMe").val().replace(/\D/, '');
$("#testMe").val(removedText); //only removes once if removed
console.log(removedText);
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="hidden" id="hide" value="">
<input type="text" id="testMe" value="">
<span id="test2"></span>
The question was kind of unclear to me, but I did my best to answer.
https://jsfiddle.net/ccu6j6xu/
<input type="hidden" id="hide" value="">
<input type="text" id="zip" value="">
<input type="text" id="address" value="">
<span id="test2"></span>
In the HTML, all I did was add another input, because I think that's what you wanted to do?
$(document).ready(function() {
$("#zip, #address").on('propertychange change click keyup input paste', function() {
var concatText = $("#zip").val().replace(/\D/g, '') + "|" + $("#address").val().replace(/\D/g, '');
$("#test2").text(concatText);
$("#hide").val(concatText);
});
});
Then in the JavaScript, I changed the selector to match the new inputs, and then I changed the function.
The first line of this function defines a variable concatText to hold the values of each input concatenated with a | character between. Each one has regex applied to remove the letters for the final value. Then the next line changes the value of the span to display, and the final line applies this value to the hidden input.
Again, the question was kind of confusing to me, but feel free to comment and I can help some more :)
EDIT: reread the question, I think this better answers

what to choose betweeen #num, [(ngModel)]="num" and [value]="num" in angularjs 2

In an input text field I have to take the value and use it in my .ts file.
can you suggest me which of the following syntax should be used for this?
If you want synchronous alignement between what you see in text field and what you have in the variable use
<input type="text" [(ngModel)]="num">
If you want to show in text input field the value of num property and align num property with the value of text field at certain events (e.g. change) then use
<input type="text" [value]="num" (change)="onNameChange($event)">
I hope this helps

jQuery - Change name of an input field by using value of another input field filled at the same time

I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks
You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!
you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});

Categories