We Keep Coding

document.querySelectorAll to retrieve all the required elements [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I want to use document.querySelectorAll to get all the elements having "required" attribute in them. For example:
<input autocomplete="off" name="des" required="">
Please find the code below to retrieve these elements:
const requiredFields = document.querySelectorAll('[required]');
console.log('all required fields', requiredFields);
I have tried the code mentioned above, but it returns nothing.
all required fields NodeList []
As per the requirement, required fields should be displayed on page load. All other elements should be hidden. How do I achieve this ? Also, how to get/hide all the elements not having the "required" attribute ?
Thanks

20/01/21
Edit:
you mistake was cominng from require="" check my code below.
as mentioned in the comments require is a boolean attr therefore it doesn't get any value (is rather required or not)
HTML:
<input autocomplete="off" name="des" required value="1">
<input autocomplete="off" name="des" value="2" >
<input autocomplete="off" name="des" required value="3">
<input autocomplete="off" name="des" value="4" >
<input autocomplete="off" name="des" required value="5">
<input autocomplete="off" name="des" required value="6">
<input autocomplete="off" name="des" required value="7">
JS:
const inputs = document.querySelectorAll("[required]")
console.log(inputs)
codepen:
https://codepen.io/Elnatan/pen/XWdJrez

calculation in angularjs output fails with ng-model

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox

Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

how to assign value to bootstrap input='date'

I want assign to input=date a value extract from database,
the html is
<input type="date" class="form-control" name="endDate" id='endDate'>,
the assign javascript is $('#endDate').attr('value','2015-02-02');,
but this cannot work, unless I assign it manually like:
<input type="date" class="form-control" name="endDate" id='endDate' value='2015-02-02'>
Can anyone help me solve this problem?

Copy input value text and paste/add to another input value text?

I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.

You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.

Javascript calculations working in IE only

I am trying to create a form so that user can enter certain information and JavaScript will do the calculations for them. I've been trying to use http://demo.rsjoomla.com/calculation-form-example (the one on the left) to get the basics started and I can manipulate from there. So far though it's only working in IE.
Here's the basic layout of my code:
HTML
<input type="number" name="income1" value="0" onkeyup="update()">
<input type="number" name="income2" value="0" onkeyup="update()">
<input type="number" name="income3" value="0" onkeyup="update()">
JavaScript
var op1=document.getElementById('income1');
var op2=document.getElementById('income2');
var result=document.getElementById('income3');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value) - parseInt(op2.value);

You wrote code that is looking for id
document.getElementById('income1');
Where is the id on the input?
<input type="number" name="income1" value="0" onkeyup="update()">
Name is not the same thing as id.
And your parseFloat check, you probably should look at isNaN(). And you are using parseInt() at the bottom, and you are using parseFloat() above!

If you're going to do getElementById, you need to have an ID in your element.
<input type="number" id="income1" value="0" onkeyup="update()">
var op1=document.getElementById('income1');
Or you could use jQuery (requires including jQuery source):
<input type="number" name="income1" value="0" onkeyup="update()">
var op1 = ${"input[name=income1]").val();
Alternatively, you could do this, assuming you only have one element named income1. This isn't a very good way to do this, but it should work.
<input type="number" name="income1" value="0" onkeyup="update()">
var op1=document.getElementsByName('income1')[0];