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

html text field with multiple columns [duplicate]

This question already has answers here:
Stop word-wrap in html
(2 answers)
Closed 5 years ago.
I am designing an html form and I have to design a text field with multiple columns as below image,
Have an alternate solution like the below snippet but it's too long, I want solution in one line like other html elements are providing
<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;>"<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;">

what you want is a component. So you should consider using a framework like vue.js, react.js or webcomponents.
EDIT:
Okay try something like this with jquery. I f you also dont want to use jquery its a bit more complicated but the idea remains the same:
let $b = $("<form>");
for(let i = 0; i < 5; i++){
let $n = $("<input type='text'>");
$n.attr("name","inp"+i);
$n.attr("id","inp"+i);
$b.append($n);
}
$("#someplaceinyourapp").append($b)

How to avoid redirect with simple html form submit? [duplicate]

This question already has answers here:
What is AJAX and how does it work? [duplicate]
(1 answer)
How to submit an HTML form without redirection
(12 answers)
Closed 5 years ago.
I have a very simple html form I have created for a contact page. I would like to know if it is possible to disable/avoid the page redirect that occurs when the form is sent but still allow for the form to be submitted (obviously). I essentially have almost zero knowledge of php at this time and I did not create the php aspect (see form action). Any help here is greatly appreciated.
<form action="http://sonic.dawsoncollege.qc.ca/~dpomerantz/web/contact_me.php" method="post" class="flex flex--column">
<input type="hidden" name="toEmail" value="spencer.miller#me.com"/>
<input type="text" name="name" placeholder="Name*" required><br>
<input type="email" name="email" placeholder="Email*" required><br>
<input type="text" name="phone" placeholder="Phone"><br>
<input type="text" name="message" placeholder="Message*" required><br>
<input type="submit" value="Submit" class="submit">
</form>

Configure the form to post to a hidden iframe, as explained here: How do you post to an iframe?. The redirect will still happen, but it will be within the iframe and thus invisible to the user. It's a bit of a hack, and not the best way to do things, but it does work.

content script to auto fill user password form created by Angular [duplicate]

This question already has answers here:
Update Angular model after setting input value with jQuery
(12 answers)
Closed 5 years ago.
I have created a content script extension to auto fill user and password fields on webpage. It works OK in normal form like below -
<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">
However, when it comes to Angular-generated form, no matter how hard I try to play with those ng-xxxxxx classes, it does not work.
<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>
Above is the code when page is first loaded. I manually key in the form and inspect the code when all validity have been checked and the submit button is enabled. Then, I use my program to change those classes and other details to make them identical (except its order). I even force enable the button by removing disabled attribute but it does not help. The button can be clicked but nothing happens.
My question is "is it possible to achieve this?". Are there any limitations concerning Angular that prevent the content script running successfully? Or it is just the coding issue that I have not been able to make it work.
One more problem is I do not own Angular code. It belongs to a website that I wan to use my extension with.

As guided by #wOxxOm, after add the following lines to trigger the event after setting input value (to update Angular model), my problem is solved.
document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));

appear onclick effect with javascript? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm working on the following page:
http://mockingbirdagency.com/thebox/bettercss/login-1.html
and would like for the right part of the first sign up box to appear only once "Register with your email address" is clicked on.
I know very little Javascript but I'm guessing that's what I'll need to do that, can somebody point me to a tutorial ?
Cheers
(Edit: The reason I am asking for a link is that I wouldn't know what to look for on Google)

Assuming you'll add an id to these 2 elements:
<div class="form-step-1-container" id="myForm"> <!-- <-- ID here -->
<h1>Register with your email address</h1>
<div style="display:none;" id="targetDiv"> <!-- <-- ID here -->
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>
With native JavaScript:
document.getElementById('myForm').addEventListener('click', function(){
document.getElementById('targetDiv').style.display = "block";
});
This adds a "click" event listener to the "form-step-1-container" div, that displays the div containing the input elements, when clicked.
So, what does this actually do?
document.getElementById('myForm') "Gets" the DOM elements with id="myForm".
.addEventListener() adds an event listener to this object. It's first parameter ('click') specifies what event it should listen ("react") to, it's second parameter is a function to execute when the event happens. This function can be defined in the addEventListener(), like I did up here, but you can also define the function elsewhere in the code, and just use the function name in the addEventListener().
.style.display = "block" sets the element's display CSS style to the value "block", to display the inputs fields again.

Your code would look like this :
HTML
<div class="form-step-1-container">
<h1>Register with your email address</h1>
<div style="display:none;">
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>
JS
$(document).ready(function() {
$('.form-step-1-container h1').click(function() {
$('.form-step-1-container div').css('display', 'block');
});
});

Put the HTML element which contains the elements you want to hide into a common HTML element like a <div>. Then assign a CSS class to it which includes the style "display:none". You can do that in the HTML code, but a better solution would be to assign it with Javascript when the document loads, because in that case the input will be visible for those who have Javascript disabled.
Then add a onclick handler to the the div which replaces the CSS class with one which has dispay:block.