We Keep Coding

Access multiple elements with ID from within a node, but also with specific class

I need to retrieve all elements who's ID ends with "_inputError" from within a specific element! AND also , I need to retrieve only the inputError that has class 'b-block' set.. How would I do this using javascript/jquery ?
I know I can get my form node with: var formNode = $("#frm1");
I know I can get ALL elements with ID ending, but this will get them all, which isn't quite what I need: var inputErrors = $("[id$=_inputError]");.
How do I mix'em all together as to retrieve only the input errors with 'd-block' class from within a specified form node ?
Cheers!
UPDATE: This seems to work for me:
var inputErrors = $("[id$=_inputError].d-block");
console.warn(inputErrors[0]);
It'll retrieve all inputError with class .d-block. However, I've yet to find how to do this check ONLY from a selected form element id, instead of the hole page. (I can have multiple forms on a single page!)

To help others if it can, here's the final solution and why I needed this:
Essentially, I get a response back from an ajax post like so:
{
type: 2,
formid: 'frmProfile',
fields: {
username: "Invalid username!",
email: "Invalid email!"
}
}
I loop my response.fields to show the individual errors under each failed inputs.
I then needed to find a way set focus on the first failed input! Because my fields are NOT 0-indexed based, I could not simply set the focus on the first field in the array! They are 'randomly' looped through!
Therefor, I decided to get all input errors that we're showing (id=*_inputError and with class d-block). The first one in the returned array is in fact the first input error! So, I use its ID to determine the corresponding input name and set focus to it:
var inputErrors = $("#" + response.formid + " [id$=_inputError].d-block");
var firstInputError = inputErrors[0].id.replace(/_inputError$/, ''); // get just the name of the failed input! Its name/id should be the same as <name>_inputError!
document.getElementById(firstInputError).focus();
This seems to do the trick for me ;) Hopefully, this can serve ideas to others.
Thanks for your help folks!
P

Assign variable to form field value

I'm trying to assign a value to a hidden form field, the value comes from a query string parameter. The function to extract the query string parameter works fine, however the function to assign the variable (using document.forms) to the hidden form field value attribute doesn't seem to work, the value is empty if I inspect element, however it works if I run it through the console in Chrome. Many thanks.
Get variable from function that finds query string:
var actionCode = getAllUrlParams().actioncode;
Set hidden form field value:
function setHidden()
{
document.forms[0].action.value += actionCode;
return true;
}
Form HTML:
<input id="field25" name="action" type="text" value="" class="field-size-top-large" disabled="disabled">
Live page is here: http://exhibit.ubm-events.com/LP=83?cid=sm(n)_VIS_DRV20180515%7C1&actioncode=EMA1234

pass the actionCode variable to the function so that it's definitely in scope, and use .getElementById seeing as the element has an ID.
function setHidden(actionCode)
{
document.getElementById("field25").value += actionCode;
return true;
}

Try below code
function setHidden(a,b){
return a*b;
}
document.getElementById('field25').value = setHidden(2, 3);

you need to select the element using jquery and assign the value to it
$("#field25").val("your value")
Ref http://api.jquery.com/val/#val2

How to select and set multiple textboxes text in jquery

Please I have my Jquery code that I want to do few things since. I have a form with a bunch of textboxes. I want to validate each textbox to allow numbers only. To also display error where not number.
var validateForm = function(frm){
var isValid = true;
resetError();
$(":text").each(function(variable){
console.log("The variable is" , variable);
if(!isNormalInteger(variable.val))
{
$("#error"+variable.id).text("Please enter an integer value");
isValid = false;
}
});
if(!isValid)
return false;
};
The above fails. When I print the variable on my console I was getting numbers 0 - 9. My textboxes where empty yet, it returns numbers. I tried variable.val() still fails and return numbers. I modified my select to
$("input[type=text]", frm).each();
Where my form is my form selected by id. It also failed. Below is the example of my html label and textbox. I have about ten of them
<div class="grid-grid-8">
<input class=" text" id="id" name="name" type="text">
<br>
<p class="hint">Once this limit is reached, you may no longer deposit.</p>
<p class="errorfield" id="errorMAXCASHBAL"></p>
Please how do I select them properly? Moreover, my reset function above also returns incrementing integers for value. The p property is of class errorField and I want to set the text property. Please how do I achieve this? Previously I tried the class name only $(.errorField). It also failed. Any help would be appreciated.
var resetError = function(){
//reset error to empty
$("p errorfield").each(function(value){
console.log("the val", value);
//value.text() = '';
});
};
//filter non integer/numbers
function isNormalInteger(str) {
return /^\+?\d+$/.test(str);
}

The main problem is your selectors in javascript. And as laszlokiss88 stated wrong usage of .each() function.
Here is a working example of your code: jsFiddle in this example all .each() functions use $(this) selector inside instead of index and value

You are using .each wrong because the first parameter is the index and the second is the element. Check the documentation.
Moreover, the correct selector for the resetError is: p.errorfield
So, you should modify your code to look something like this:
var resetError = function(){
$("p.errorfield").each(function (idx, element) {
$(element).text("");
});
};
With this, I believe you can fix the upper function as well. ;)

Send value of text box to jquery function

I have a textbox and need to send the value of the text box when you type some number and the radio button is checked, to a jquery function. The code I'm using now is:
var radiobuttoncustom = 0;
if (document.getElementById('radiobuttoncustom').checked) {
radiobuttoncustom = document.getElementsByName("some_number").value;
}
I will then display the results using "radiobuttoncustom" but when the results is displayed it is NaN instead of the number. Right now I'm using the textboxes name to get the value.

getElementsByName returns an HTMLCollection, not an element, which would not have a value attribute.
Have you tried:
radiobuttoncustom = document.getElementsByName("some_number")[0].value;
edit: if you are dealing with numbers, you should also parse them as such:
radiobuttoncustom = parseInt(document.getElementsByName("some_number")[0].value, 10);

Since you are using jquery, why not
$('input[name=some_number]').val();
and
if($('#radiobuttoncustom').prop("checked"))

How can I make the script to work?

I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on.
Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below.
var bookingForm = document.forms['formName'];
var qty = bookingForm.fieldName +'i'.value;
with the 'i' been a generated numeric number by a for loop
when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on.
But when I use;
var qty = bookingForm.fieldName.value
I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName.
Any help will be very much appreciated.

You use brackets to access a property using a string:
var qty = bookingForm['fieldName' + i].value;

You can't use code like:
var qty = bookingForm.fieldName +'i'.value;
bookingForm.fieldName +'i' is a string. You have to change that string into a DOM element in order to access the .value parameter.

Try document.getElementsByName('fieldName'+i)[0].value