We Keep Coding

Multiple elements to be called by a function

I have two radio buttons and a date picker and if I click or make changes to any of those three, all the values of the corresponding elements should be updated to an array. I've tried and failed.
Here is what I've created (jQuery):
if ($(["#submitDates"], ["input.usage"], ["input.scope"]).on("change")) {
var fromDate = $("#from_date").val();
var toDate = $("#to_date").val();
var usage = $('input.usage').val();
var scope = $('input.scope').val();
var data = {};
data.dateRange = `${fromDate}->${toDate}`;
data.scope = scope;
data.usage = usage;
console.clear();
console.log(data);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="radio" class="usage" name="usages" value='email' checked> Email Usage
</div>
<div class="col-md-2">
<input type="radio" class="usage" name="usages" value='mail'> Mail Usage
</div>
<input type="radio" class="scope" name="scope" value="cm"> Current Month 
<input type="radio" class="scope" name="scope" value="q"> This Quarter 
<input type="radio" class="scope" name="scope" value="cy"> This Year 
<input type="text" class="form-control" id='from_date' name="start" placeholder="MM/DD/YYYY" />
<div class="input-group-append">
<span class="input-group-text bg-info b-0 text-white">TO</span>
</div>
<input type="text" class="form-control" id='to_date' name="end" placeholder="MM/DD/YYYY" /> 
<button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%"><i class='bi bi-check-lg' style='font-size: 16px;'></i></button>

There's quite a few issues in your code:
The selector in your jQuery object is wrong. Provide multiple selectors in a single comma delimited string, not multiple arguments containing strings in arrays.
Don't put a jQuery event handler in an if condition, it's useless
The change event handler syntax is wrong, you didn't provide the function argument which binds the handler to run when the event fires.
data is an object, not an array, as your title/question states
You need to read the val() from the selected .usage and .scope elements only.
  isn't a valid HTML character entitiy. I presume you mean instead, but even then this is redundant.
With those issues fixed, the code would look something like this:
let $fromDate = $("#from_date")
let $toDate = $("#to_date");
let $usage = $('input.usage');
let $scope = $('input.scope');
function handleFormUpdate() {
var data = {
dateRange: `${$fromDate.val()} -> ${$toDate.val()}`,
scope: $scope.filter(':checked').val(),
usage: $usage.filter(':checked').val()
};
console.log(data);
}
$('#submitDates').on('click', handleFormUpdate);
$('input.usage, input.scope').on("change", handleFormUpdate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-2">
<input type="radio" class="usage" name="usages" value="email" checked> Email Usage
</div>
<div class="col-md-2">
<input type="radio" class="usage" name="usages" value="mail"> Mail Usage
</div>
<input type="radio" class="scope" name="scope" value="cm"> Current Month
<input type="radio" class="scope" name="scope" value="q"> This Quarter
<input type="radio" class="scope" name="scope" value="cy"> This Year
<input type="text" class="form-control" id="from_date" name="start" placeholder="MM/DD/YYYY" />
<div class="input-group-append">
<span class="input-group-text bg-info b-0 text-white">TO</span>
</div>
<input type="text" class="form-control" id="to_date" name="end" placeholder="MM/DD/YYYY" />
<button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%">
<i class='bi bi-check-lg' style='font-size: 16px;'></i>
Check
</button>

how to get input type number's value before submitting

i need to increase product rate qith respect to quantity added ..(in angular 11)
the code ,
<h2>Price: {{price}}</h2> // like {{price*input.value}}
<h2> Quantity : <div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" >-</button>
<input class="quantity" min="0" max="25" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">+</button>
</div>
</h2>
</div>

How do I bind the data in an input field to another input field on Angular?

I am working on an Angular project and I have two input fields , I want the value that is put in the first input field (field1) to show in the other input (field2) but multiplied by two . How do I go about it ? How do I bind the data and multiply the value by 2 ?
For example if 2 is entered in the first input text field , it should show 4 in the other input field.
<div class="field1">
<label for="fieldinput1"><b>
Amounts </b>
<span class="dpspan">*</span>
</label><br/>
<input name="fieldinput1" min="0.5" max="5000" placeholder="000" type="number" height="70px"
required>
</div><br/>
<div class="field2">
<label for="fieldinput2"><b>
Total Income Returns </b>
<span class="Incspan">*</span>
</label><br/>
<input name="fieldinput2" readonly type="text" required>
This is my TS file after adding [ngmodel]=input1 to the text field

<div class="field1">
<label for="fieldinput1"><b>
Amounts </b>
<span class="dpspan">*</span>
</label><br/>
<input name="fieldinput1" [ngModel]="input1" (ngModelChange)="getChange($event)" min="0.5" max="5000" placeholder="000" type="number" height="70px"
required>
</div><br/>
<div class="field2">
<label for="fieldinput2"><b>
Total Income Returns </b>
<span class="Incspan">*</span>
</label><br/>
<input name="fieldinput2" [ngModel]="input2" readonly type="text" required>
in your ts file
input1;
input2;
getChange(event){
this.input2=event*2
}
another example here
import { Component, OnChanges, DoCheck } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<input [ngModel]="name" (ngModelChange)="getChange($event)" placeholder="type here" type="text">
<input [ngModel]="input2" readOnly>
`
})
export class AppComponent {
name=2;
input2=this.name*2;
getChange(event){
this.input2=parseInt(event)*2
}
}

<div class="field1">
<label for="fieldinput1"><b>
Amounts </b>
<span class="dpspan">*</span>
</label><br />
<input name="fieldinput1" [(ngModel)]="data.input1" (change)="changeSecondInput()" min="0.5" max="5000"
placeholder="000" type="number" height="70px" required>
</div><br />
<div class="field2">
<label for="fieldinput2"><b>
Total Income Returns </b>
<span class="Incspan">*</span>
</label><br />
<input name="fieldinput2" [(ngModel)]="data.input2" readonly type="text" required>
</div>
and inside ts
1.declare oblect like
public data={
input1:number,
input2:number
};
2.change function like
changeSecondInput(){
this.data.input2=parseInt(this.data.input1)*2
}

how do i read a value from a text field and do some calculation and write the result back to another text field in javascript?

here is my javascript code. I want to get the results from multiplying sum1 * sum2 and then read that results and perform 1% on it and put the answer in text field premium.
function suma(){
var sum1 = document.getElementById("sum1");
var sum2 = document.getElementById("sum2");
var input = document.getElementById("results");
results = (sum1.value * sum2.value);
input.value= results;
}
function percentage(){
var results = document.getElementById("results");
var input = document.getElementById("premium");
var premium1 = 0.01*results.value;
document.getElementById("premium").value=premium1;
}
here is my html code
<div class="col-sm-4 form-group">
<label class="text-primary"><strong><?php echo $PesoKg; ?> (<?php
echo $_SESSION['ge_measure']; ?>)<strong></label>
<input type="number" class="form-control" required onblur="if(this.value
== ''){this.value='0'}" onKeyUp="suma();" id="sum2" name="Weight"
value="0" />
</div>
<div class="col-sm-4 form-group">
<label class="text-primary"><strong>Amt <?php echo $PrimerKilo; ?
> <?php echo $_SESSION['ge_measure']; ?><strong></label>
<input type="text" class="form-control" onblur="if(this.value == '')
{this.value='0'}" onKeyUp="suma();" id="sum1" name="variable"
value="3.25" />
</div>
<div class="col-sm-4 form-group">
<label class="text-primary"><strong><?php echo $SubtotalEnvio; ?><strong>
</i></label>
<input type="text" class="form-control" name="shipping_subtotal"
id="results" value="0" />
</div>
</div>
<div class="col-sm-6 form-group">
<label class="text-primary"><strong>Insurance 1%<strong></label>
<input type="number" class="form-control" id="insurance"
name="insurance" required onblur="if(this.value == ''){this.value='0'}"
onKeyUp= "percentage();" name="variable" value="0.01" >
</div>
<div class="col-sm-6 form-group">
<label class="text-primary"><strong>Premium<strong></label>
<input type="number" class="form-control" id="premium" name="premium"
value="0" >
</div>
how do i get the value of results and calculate 1% on that results and put the answer in the text field premium. Any help is much appreciated

This is how you can read a value from a text field and do some calculation and write the result back.
You can find great javascript/jquery tutorials here
function calculatePercentage(){
// getting the input value;
var value = $('#input').val();
// calculating 1%
var percentage = value * 0.01;
//writing the result
$('#result').val(percentage);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="" >
<label> value: </label>
<input type='number' value='' id='input' name='input'/>
<button onclick='calculatePercentage()'>calculate 1%</button>
<br><br>
<label> Result: </label>
<input type='number' id='result' />
</form>
</div>

Selector is not working in jquery

Hi I've HTML code which is
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
Now I want to search a value in my notes fields which is Towing amount paid Order ID 000000001 and I want to empty these fields and my javascript/jquery code is
$(document).ready(function() {
if($("input[name^=notes]").val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
But this code is giving me not found message what is wrong in my code I've tried different selectors but didn't work for me.

You can use jQuery :contains pseudo it will find the first element that contains the required text
Ref: https://api.jquery.com/contains-selector/
Code:
if($("input[name^='notes']:contains('Towing amount paid Order ID ')")) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
Demo: http://jsfiddle.net/La1bq789/

This code searches only in the input which has value - This is test notes.
To look in all fields use $.each:
$(document).ready(function () {
$("input[name^='notes']").each(function () {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
});
});
JSFiddle - http://jsfiddle.net/FakeHeal/362o548n/
Edit for clearing the fields: http://jsfiddle.net/FakeHeal/362o548n/1/

The main problem is that you checking only one element value and you need to check all elements.
I did make some changes with your code, now it's working:
$("input[name^=notes]").each(function(){
if($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$(document).ready(function() {
$("input").each(function() {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$("input[name^=notes]").val() will only ever return the value of the first element in the page than matches that selector.
In order to check all of them you need to look at each instance
I would suggest you modularize the repeating groups by wrapping each group in a container to help locate other related elements within each group
<div class="input-group">
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
</div>
Then loop over the inputs you want to focus on
var hasNotes = $("input[name^=notes]").filter(function(){
return this.value.indexOf("Towing amount paid Order ID ") > -1
}).length;
var message = hasNotes ? 'found it' :'not found'
$('#testing.text(message);
If you need to make adjustments to other values, use an each lopp and traverse within the container