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
Related
This question already has answers here:
Find an element in DOM based on an attribute value
(11 answers)
Closed 3 years ago.
I´m trying to automate the filling of some information in a webpage with javascript.
All the fields have IDs, for example:
<div id="cc-container" class="field has-float-label">
<input placeholder="ccnumber" id="credit_card_number" maxlength="16" name="credit_card[ovv]" size="16" type="tel" value="">
</div>
And then I just insert the info with:
document.getElementById("credit_card_number").focus();
document.getElementById("credit_card_number").value = variable_ccnumber;
But the last one doesn´t have an ID:
<div id="cvv-container" class="visa has-float-label">
<input placeholder="cvv" maxlength="4" name="credit_card[meknk]" size="4" type="tel" value="">
</div>
How can I insert what I want in this case?
Thanks.
PD: I'm only starting to code so please don´t assume I will understand everything you throw at me
You can try with Document.querySelector() which allows any valid CSS as selector with name attribute:
document.querySelector('[name="credit_card[meknk]"]').value = 'variable_ccnumber';
<div id="cvv-container" class="visa has-float-label">
<input placeholder="cvv" maxlength="4" name="credit_card[meknk]" size="4" type="tel" value="">
</div>
Using javascript (preferably not jquery) I'm trying to change the line:
<input type="number" name="price" required="" id="id_price">
into
<input type="number" name="price" required="" id="id_price" step="any">
I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!
As torazaburo suggests in the comment you can do it in one step with setAttribute() method
document.getElementById("id_price").setAttribute("step","any");
<input type="number" name="price" required="" id="id_price">
OR
First create the attribute and set the value. Then add it to the element..
var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);
<input type="number" name="price" required="" id="id_price">
I am trying to load JQuery DatePicker in two text fields, so I am using the following code
$(function() {
$('#DOB, #SignupDate').datepicker();
});
and here is the HTML for both fields:
<div class="field field_input">
<label for="DOB">D.O.B</label>
<input type="text" name="DOB" value="">
</div>
<div class="field field_input">
<label for="SignupDate">Signup Date</label>
<input type="text" name="SignupDate" value="">
</div>
It is loading just fine in the DOB field but it is not loading in the SignupDate field. Can someone please tell me what I am missing here and how to solve it?
Thanks for your time
You try to select the #DOB and #SignupDate.
$('#DOB, #SignupDate')
It means get element by id DOB and SignupDate but you have no element with id="DOB" nor
id="SignupDate"
So please use
<input type="text" id="DOB" name="DOB" value=""> //<- note id="DOB"
<input type="text" id="SignupDate" name="SignupDate" value=""> //<- note id="SignupDate"
You need to have an id attribute on your inputs. Two reasons:
In your jQuery code, # indicates an id selector, not a name selector.
The for attribute on the labels should correspond with an id attribute on another element, not the name attribute.
Given that this is probably a form, you still want to keep the name attribute, but you probably just want a matching id attribute.
How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).
I'm trying to use the jQuery validate plugin to validate classes instead of ID's. Despite the many threads which seem close to answering this issue - I can't get any of them to work. I simply have a form that has a lot of dynamically generated repeating form fields, so naturally I can't add rules for the ID's because there's no knowing how many of them there will be. So, instead, I would like to just target the class on the input field.
<input type="text" id="name1" class="fileName" />
<input type="text" id="name2" class="fileName" />
<input type="text" id="name3" class="fileName" />
<input type="text" id="name4" class="fileName" />
How do I target 'fileName' class? I've tried this:
$(document).ready(function(){
$.validator.addClassRules({
fileName:{
required: true
}
});
$("#myForm").validate();
});
But this does not work at all :(
Any ideas? Anyone?
You need to specify a name attribute on each input element for validator to pick it up:
<form action="#">
<input type="text" id="name1" class="fileName" name="name1" />
<input type="text" id="name2" class="fileName" name="name2"/>
<input type="text" id="name3" class="fileName" name="name3"/>
<input type="text" id="name4" class="fileName" name="name4"/>
</form>
Here's a working example: http://jsfiddle.net/Nbcj9/
According to the docs, this should work:
jQuery.validator.addClassRules('classNameHere', {
required: true
});
Then you can determine whether the fields are valid by calling:
$('.fileName').valid();
Here's a link to the docs
what about:
$(".fileName").validate();