Javascript get all input elements that contain values [duplicate] - javascript

This question already has answers here:
Select inputs that doesn't have value attribute with querySelector
(2 answers)
querySelectorAll detecting value in input
(2 answers)
Closed 3 years ago.
I'm using the querySelectorAll() JS function to retrieve all elements under a datagrid table (aspx page) , that datagrid contains several checkboxes / textboxes , there's a save button which should only be enabled when the following rule is satisfied :
At least 1 checkbox needs to be checked OR at least one textbox needs to contain text ( not empty )
Is there a way to check if any of the textbox input elements returned by querySelectorAll() , has a value ?
function validate() {
var search = document.getElementById("myGrdID").children;
//var hasAnyText = search[0].querySelectorAll("input:valid");
var hasAnyChecked = search[0].querySelectorAll("input:checked");
console.log("Any check? " + hasAnyChecked.length);
}
i'd like to avoid using Jquery , already managed to get all the checked input elements , couldn't find a way yet to find all the textboxes with values (any value not a specific string).

Are you able to use the filter function ?
var results = hasAnyChecked.filter(input => input.value != null)
Edit : comment below me has a point, but if you use those kind of selectors you won't be able to check multiple scenarios :
var results = hasAnyChecked.filter(input => input.value !== null || input.value !== false) // Handles both text inputs and checkboxes

Related

JavaScript - cloneNode gives different result [duplicate]

This question already has answers here:
Javascript clone node is not copying all values from cloned to new object
(3 answers)
Closed 5 years ago.
I am trying to clone the form before submition in JavaScript using cloneNode. The original form has an answer for a selected value but not the cloned one. Following is the code.
encodeHTMLCollectionToBase64(document.forms['formen']).submit();
function encodeHTMLCollectionToBase64(form) {
encryptedForm = form.cloneNode(true)
Array.from(encryptedForm).forEach(function(item) {
if (item.childElementCount > 0) {
for(var i=0;i < item.childElementCount;i++) {
item[i].value = btoa(encodeURIComponent(item[i].value));
}
}
else {
item.value = btoa(encodeURIComponent(item.value));
}
});
encryptedForm.style.visibility = 'hidden';
document.body.appendChild(encryptedForm);
return encryptedForm ;
}
Upon inspection I found that the encryptedForm (cloned form) has empty value for one select element but it is there in form (original form). Why is that?
Am i doing something wrong here?
The form's selections are saved in the browser, not in the form's DOM elements, so when you clone it, the selections will not be copied over. It's possible to copy the selections over if you use JavaScript to manage the 'selected' prop on all of your form elements, or you could store the selections in a separate variable and reapply them later.

How to do this using jQuery - document.getElementById(“formid”).elements["foo"].value [duplicate]

This question already has answers here:
How an I get all form elements (input, textarea & select) with jQuery?
(13 answers)
Closed 6 years ago.
In jQuery, what is the equivalent to document.getElementById(“formid”).elements["foo"].value ?
I am trying to get the value of the elements in a form
Thanks.
This gets the value of the input element with name foo in the form with id formid
$('form[id=formid] :input[name=foo]').val();
In jQuery you can get any element like this:
var form = $("#formId");
This does the same as document.getElementById(“formid”).
Furthermore, you can iterate through your form and get all of it's values like:
var inputValues = [];
$('#formId input, #formId select').each(
function(index){
var input = $(this);
inputValues[input.attr('name')] = input.val();
}
);

Query syntax for JSON lookup data with var ( not condition ) [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
I'm trying to filter some JSON data, but I would like the lookup to be based on selection of a drop down. However, I just can't get the syntax correct when trying to do this. Currently the following works in my code, great:
var as = $(json).filter(function (i, n) {
return (n.FIELD1 === "Yes"
});
However, what I would like to do is replace the FIELD1 value with a var from the drop down. Something like this following, which is not working:
var dropdownResult = "FIELD1";
var as = $(json).filter(function(i, n) {
return (n.dropdownResult === "Yes"
});
I'm trying to get the var to become the field name after the n. but it's not working.
Thanks for your time. Sorry if this has been answered many times before and is obvious to you.
To use a variable value as the key of an object you should use bracket notation, like this:
var dropdownResult = "FIELD1";
var as = $(json).filter(function(i, n) {
return n[dropdownResult] === "Yes";
});
I removed the extraneous ( you left in your code - I presume this was just a typo as it would have created a syntax error and stopped your code from working at all.
Also note that it's much better practice to use a boolean value over a string 'Yes'/'No'

Input text validation jquery

I'm using Jquery Framework, I'm trying to validate input data, which is not equal to null or empty string. My approach is to validate data in a single line as I'm maintaining cookies storage. My question is, how can I validate input text that value its not an empty string, similarly I checked radio buttons and check boxes that are checked. How can I validate input[type='text'] with same condition input[value !=''] in a single line.
Here's my code:
_strFormElements = "input[type='text']," +
"input[type='checkbox']:checked," +
"input[type='radio']:checked," +
"input[type='image']," +
"input[type='file']," +
"select," +
"textarea";
I then checking as follow, but I want to check and validate before theses checks as my init method creates empty feilds before this.
if (elem.is('input:text') || elem.is('input:hidden') || elem.is('input:image') ||
elem.is('input:file') || elem.is('textarea')) {
elem.val(value);
}
My Try:
I've tried input[type='text' value != ''] but I'm unable to check this in a single line.

how to get userdefined attribute in js [duplicate]

This question already has answers here:
Select element by ID from variable [duplicate]
(2 answers)
Closed 9 years ago.
I wanted to just fetch the user defined attribute data using jquery:
Simple code:
var a = 'id';
var patienttype = $a.attr('patientType');
I WANT TO CALL THE RESPECTIVE TEXTBOX ie 'a' and then call its corresponding user defined attribute ie patienttype.
I am not sure of the syntax and couldn't understand how can that be done.
I tried:
$a.attr('patientType'); //undefined
$('#a').attr('patientType') //output:undefined
$("Selector") //selects an DOM object
Let's say that we have an label with id = lbl1 and if we want to add our defined attribute to it we can use the data-attributename
<label id="lbl1" data-custom="aCustomAttr"></label>
Now using the jquery to select the label custom attribute
$("#lbl1").attr("data-custom"); // This will yield aCustomAttr

Categories