Develop Reference

Angular not detecting change inside a duration picker when time is selected using its controls

I am having an html duration picker inside my code like below. I can either type in the time or change the time by clicking the up/down arrows.
I am binding its value to a variable using ngModel
<input type="text" id="mTime" [class] = "'html-duration-picker'" [(ngModel)]="manufacturingTime">
I also have another text field which shows the result of the time duration divided by another value. So, when the time duration is changed, this field needs to be updated on the fly.
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="(manufacturingTime/numberOfWorkers)">
All these functionalities were working fine. Recently, I moved from angular version 11 to V 13. Since then,when the time is changed by clicking the up/down arrows, it is not updating the ngModel, whereas if the time is typed in, the ngModel is updated. I tried adding code on (change), (ngChange), also tried using changeDetection. But it seems, angular doesn't recognize the value change when it is done using up/down arrows. So these events are not fired. I can access the duration using ViewChild to save the duration to database. But the second textbox which shows the divided value cannot be updated on the fly. Can someone suggest a way to fix this?
The duration picker is a third party tool developed in Javascript.
https://nadchif.github.io/html-duration-picker.js/
So I cannot control the events on arrow clicks.

I suspect that this may work, as it could cause the expression to be evaluated more often.
In your component class, add a getter that calculates the divided value like so:
public get dividedValue(): number {
return this.manufacturingTime / this.numberOfWorkers;
}
Then assign that value to the second input:
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="dividedValue">
Again, this is just a wild guess, because I have no code to run.
If you provide a runnable Stackblitz example, I would be happy to help you debug it.

If you take a look at the html-duration-picker code, in the function definition for changing values using arrow keys changeValueByArrowKeys; the last line:
insertFormatted(inputBox, constrainedValue, false);
has third argument false which is passed to the function insertFormatted. This function insertFormatted creates the (change) or (input) events.
In the above image you can see that any event be it (change) or (input) is only triggered if the dispatchSynethicEvents is not equal to false.
To handle this you can create a fork the library, make changes to it, store a local copy and use that instead of the library. Alternatively you could raise a PR and ask the author to consider your change.
To solve it you need to basically remove that if condition. It will then emit (input) event no matter what.

How to constantly store input value without submitting

I’m trying to make something where you can input numbers into an input (or would a contenteditable div be better?) and it does some calculations to them and sets the content of another div as the answer. How can I make it so that the other div will update whenever the number changes? I would prefer to make it so that there isn’t a submit button so the number instantly changes as you type it. I could probably achieve this by updating it every time there is a keystroke but the problem is storing the input data without pressing a submit button

First, please take some time to format your questions in the future. This is a difficult read.
Second please try and include all the information to show how far you have gotten.
Also I wasn't really clear what you are trying to do.
What you are looking for is called two way data binding, there are many different options for it, but it doesn't mean that's what you need. It seems like the following would be a good solution for you.
function doSomeCalculationsAndDisplay(event){
const elem = document.getElementById('input');
console.log(elem.value);
document.getElementById('result').innerText = 'Double value: ' + parseFloat(elem.value) * 2;
}
<input id="input" type="number" onKeyUp="doSomeCalculationsAndDisplay()" onChange="doSomeCalculationsAndDisplay()">
<div id="result"></div>

I always seem to figure it out on my own as soon as I make a post about it. It's not very complicated, the problem I had is that I was trying to get the innerHTML of an input which isn't possible, I needed to get its value instead.
To accomplish this all you need to do is make an input, div, and function that sets the div as the input document.getElementById('test1').innerHTML = document.getElementById('input1').value; and call this function onkeyup in the input.

Is there a limit on how precise input range change/input events are in Javascript?

I currently have a basic html slider that I need to be very precise (a small step value), ie.:
<input type="range" id="testRange" step="0.0000001" />
Whenever I try to attach to the value that is being output by the slider element, there seems to be a minimum delta 0.84 that I can never get lower, regardless of what my step value is (see https://jsfiddle.net/Lew2fmpw/ for an example, the delta is output in the console).
My question is whether I can do something to decrease this delta?
I've tried using the jquery on method like so:
$("#testRange").on("change input", updatee);
and I've tried using addEventListener, but the results are the same.
$("#testRange")[0].addEventListener("input", updatee);
Thank you for any help.

Passing the sum value from a textarea to an input field

How are you?
Here's what am trying to do:
I want to add every numbers typed by the user inside the textarea then, using javascript an <input> field will automatically sum it all up and displays the total. So once I click the Make Voucher submit button inside the save.php the sum total computed inside that <input> field will be enclosed inside a variable that will be inserted on the database.
In the image above you could see an Amount column which has a textarea below to which the user could put numbers to be added with. [See Figure 1] Then, Whatever the numbers a user has typed with it will be automatically computed and will be shown in Total Amount Due [See Figure 2]
As you can see everything is just working fine. In Figure 2, I used a <div> tag that will hold the total (or sum) of the value inserted by the user in the textare at the Figure 1. A button named Make Voucher does the trick by triggering the javascript to add the inserted values and retrieves the total and pass it on the <div> tag beside the Total Amount Due title.
See JSfiddle Please note that this code are perfectly working with my browser.
This is my way of getting the total (or sum) of the value inserted in the textarea so by the time the form calls the action in save.php I can pass the total 1170 to the database by the Insert statement through this.
$total = $_POST['totalAmount'];
But I found it hard doing so. Why? Because my concern is this:
1. I could not pass the sum 1170 to $total simple because it is not in the input field as I have said the javascript only shows the added (or sum) by using <div> tag.
2. You should have to click the Make Voucher button first before you could get the sum total.
So to be able to add this onto my INSERT statement the total value retrieved in <div id="res"></div> format must be placed inside the <input> field instead. I have tried doing this:
<input type="text" name="total" onKeyUp="calc()"> But still I can't post the value 1170 to $total in save.php.
My concern is this:
Is there any way I can put the sum total of the textarea values inside an input field instead of using <div> tag? So I can be able to save the total in the database? Or my code is simply not organized?

Here is JSFIDDLE
First you have to change onDomReady to No wrap-in <body> because onDomReady in these your js script are not working.
NOTE for you : If you got preferable answer than please accept so other person can't put answer here.

It is very simple, just have a hidden input field, suppose <input type="hidden" name="hdnTotalAmout" /> and pass the total amout value to hidden field along with DIV tag.
Then DIV will just show the total amount and use hidden field value to save in database at server-side. Like,
$total = $_POST['hdnTotalAmount']
Thank you.

How to clear HTML input textbox via Javascript

I am using the same input textbox to collect multiple values.
After collecting the first input, I will clear the field by calling
document.getElementById("textbox").value= "";
On the surface, above snippet appears to clear the textbox.
But when I blur the textbox by clicking elsewhere, the old value reappears.
MORE CODES >>>
My HTML >>
<input id="textbox" placeholder="Start">
Javascript >>
After getting the first input, I like to reset the input value >>>
document.getElementById("textbox").value= "";
document.getElementById("textbox").setAttribute("placeholder","End");
This is how I do my data collection >>>
The same textbox is first used to collect a Google "place", and then subsequently to collect some user entered comment. In addition to collecting the data, someFunction() also try to clear the textbox by calling .value= ""
google.maps.event.addListener(textbox, "place_changed", function() {
someFunction();
});

Here is something i found googling fast for an answer; i think you can play around indeed with onFocus() a bit:
<input type="text" value="Click here to clear text" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
It may require a bit of usage of onBlur as well.
Also some other pointer, to get you going with jQuery if you want.

Looks like your input's value is stored in separate variable to be used for some other actions. So you should maybe check your code and clear thar variable.

I have practically implemented and used this solution whch is already suggested by my friend above:
document.getElementById("textbox").setAttribute("placeholder","End");
So, this works for me pretty well.(context:"placeholder" attribute used)
ICDT
..tc:)