We Keep Coding

Make sure I'm selecting and running through all elements for an "each" statment

I'm trying to create a script that keeps our main button disabled until specific field requriments are met.
jQuery(document).ready(function() {//check if all are filled else disable submit
var inputFields = jQuery('#list-item-cc input, #field_28_50 input,#field_28_18 input');
inputFields.keyup(function() {
var empty = false;
inputFields.each(function() {
if (jQuery(this).val().length == 0) {
empty = true;
}
});
if (empty) {
jQuery('#gform_submit_button_28').attr('disabled', 'disabled');
} else {
jQuery('#gform_submit_button_28').removeAttr('disabled');
}
I'm having trouble thinking of a way to ensure my inputFields variable can be passed to my inputFields.each(function() in a way that would allow the loop.
We're not worried about all input fields. Just the specific inputs in our inputFields variable.
Is this an effective way to ensure a button is disabled if certain fields are not filled out and can I create the selector in the way that i did and use that in an each statement?

Looks like you are using gravity forms? In that case I would add a css class to each field that you want to validate. That way you don't have to go searching for ID's and change the code for multiple forms.
https://docs.gravityforms.com/css-ready-classes/
Here is a fiddle in which I pretend that I added "ensure-filled" to each item in the gravity forms builder
https://jsfiddle.net/dokLz4hm/3/
Also note that I added a .trim() to the value so that blank spaces aren't counted as input and made the submit button generic so it would work with any field in a form that contains the ensure-filled class
Html
<div>
<div id="arbitraty_id_1">
<input type="text" class="ensure-filled" />
</div>
<div id="arbitraty_id_2">
<input type="text" class="ensure-filled" />
</div>
<div id="arbitraty_id_3">
<input type="text" class="ensure-filled" />
</div>
<input type="submit" value="submit" disabled>
</div>
JS
$(document).ready(function() {
var inputFields = $('.ensure-filled');
inputFields.keyup(function() {
var empty = false;
inputFields.each(function() {
if ($(this).val().trim().length == 0) {
empty = true;
}
});
$('input[type="submit"]').attr('disabled', empty);
})
})

How to display a textbox if "others" option from checkbox group is checked

I want to display a text box using JavaScript when the "Other" option is checked from a group of checkboxes. I'm using razor pages with asp.net core 2.2
I'm using the following script but it is not working.
function onSelectChange() {
var sel = document.getElementById('QuestionOptionId');
var strUser = sel.options[sel.selectedIndex].text;
if (strUser.startsWith('Other'))
document.getElementById('textBox').disabled = false;
else
document.getElementById('textBox').disabled = true;
}
</script>
Fruits.cshtml ( razor page view file)
#foreach (var option in Model.QuestionOptions)
{
<input type="checkbox" asp-for="QuestionOptionId" id ="QuestionOptionId" value ="#option.Value" onclick="onSelectChange()" /> #option.Text<br />
}
QuestionOptions is a selectList:
Value=1 Text= Apple,
Value=2 Text= Kiwi,
Value=3 Text =Other
whenever the user checks the checkbox for "Other", it should display a textbox.
What am I doing wrong here? I have read so many other answers but not able to figure out this one.
Update-1
I don't know why the post is not showing the textbox control...
I'm pasting it here again, it is outside the foreach loop. I have removed the angle brackets as I think it is mixing with formatting.
input type="text" id="textBox" name="response" disabled="disabled"

Full disclosure: I have never used Razor pages or asp.net
I'm having a hard time following how your javascript is detecting whether the other option is checked. It seems like your Fruits.cshtml is going to generate three separate inputs with the same "QuestionOptionId" id.
Also, your Fruits.cshtml snipped doesn't include the code for the textbox you'd like to enable, though I'm assuming you have a textbox with id "textBox" in the compiled HTML that you'd like to enable.
I would change your script out for this:
function onSelectChange(element) {
if (element === element.parentNode.querySelector(".other")) {
console.dir(element);
if (element.checked) {
document.getElementById("textBox").disabled = false;
} else {
document.getElementById("textBox").disabled = true;
}
}
}
You'll need to add the "other" class to your applicable "Other" input checkbox. You'll also need to change your Fruits.cshtml snippet so that the "onclick" function also passes the applicable element into the script.
#foreach (var option in Model.QuestionOptions)
{
<input type="checkbox" asp-for="QuestionOptionId" id ="QuestionOptionId" value ="#option.Value" onclick="onSelectChange(this)" /> #option.Text<br />
}
Here's a working example of the compiled code: https://codepen.io/bourn404/pen/yWVLdx

Try the following modification in the view and the javascript:
Add the label outside the input
#foreach (var option in Model.QuestionOptions)
{
<Lable>
<input type="checkbox" asp-for="QuestionOptionId" id="QuestionOptionId" value="#option.Value" /> #option.Text
</Lable>
<br />
}
<div>
<input type="text" id="textbox" disabled="disabled" />
</div>
Use $(this).parent().text().trim() to get the text
$('input:checkbox').on('click', function () {
if ($(this).parent().text().trim() === "Other") {
$('#textbox').removeAttr("disabled");
}
});
Update
If you want to hide the text box and hide the textbox when you uncheck the "other option , firstly you could change the disabled attribute to hidden ,and then determine if the text box contains hidden attribute in js like below :
<input type="text" id="textbox" hidden />
if ($(this).parent().text().trim() === "Other")
{
if ($('#textbox').is(':hidden')) {
$('#textbox').removeAttr("hidden");
}
else {
$('#textbox').attr("hidden", "hidden");
}
}

Jimdo: Add placeholder to html using javascript / jquery

Due to limitations of the webhoster "Jimdo" I can not change html document to insert a "placeholder" into a text field. Is there a way to add that attribute using javascript or jquery?
I have already tried a few codes that I found here but it did not work for me. Maybe I just put a bracket wrong or the code was not compatible with Jimdo's head-area...
This is the code from Jimdo.
<input type="text" name="url" id="url9611056885" value="" class="single">
Screenshot:

Using jQuery .attr():
$("#url9611056885").attr("placeholder","I'm a placeholder");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="url" id="url9611056885" value="" class="single">

You can use .setAttribute to do that.
document.getElementById("url9611056885").setAttribute("placeholder", "Hey! I'm alive!");
<input type="text" name="url" id="url9611056885" value="" class="single">

No need for jQuery, a plain JavaScript solution. A function that accept two arguments the first represent the element itself or a string representing its ID, and the second argument is the placeholder string:
function addPlaceholder(el, ph) {
 if(typeof el === 'string') {
   el = document.getElementById(el);
 } else if(el instanceof HTMLElement === false) {
   console.log('Not a valid HTML element.');
   return false;
}
 el.setAttribute('placeholder', ph);
return true;
}
addPlaceholder('input1', "a placeholder for input 1"); // sending the ID of the input element
addPlaceholder(document.getElementById('input2'), "a placeholder for input 2"); // sending the input element itself
addPlaceholder(window, "will not work!"); // sending a non-valid HTML element here the window object, a log in the console will appear and the function returns false.
<input type="text" id="input1" />
<input type="text" id="input2" />

In javascript use the setAttribute method.
var element= document.getElementById("url9611056885");
element.setAttribute("placeholder", "SOME PLACEHOLDER");
In JQuery use attr method.
$("#url9611056885").attr("placeholder","SOME PLACEHOLDER");

You may traverse in the form searching label having for attribute which will direct to target input and assign the inner text within label as placeholder to input.
$(function() {
$('form').find('label[for]').each(function() {
var lbl = $(this);
var cnt = $('#' + lbl.prop('for'));
if (cnt.is(":text") || cnt.is(":password") || cnt.is("textarea")) {
cnt.prop('placeholder', lbl.text());
}
});
});
P.S. Make sure that you have imported jQuery in your page before above code snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm not into java or jquery and i have no idea what to do right now
You had jQuery tag in your post, hence I given solution based on that tag.

JQuery Not Triggering On Button.click

I've written some code that should check a textbox (ID tfa_1) to see if its empty or contains text, this should trigger on a next page button (wfpagenextID6) being clicked.
I've tried replacing my script with an alert("test.") and it dosent appear, so im assuming I have my trigger wrong but I cannot work out what I have done wrong!
My HTML that defines the textbox is below:
<input type="text" id="tfa_2685" name="tfa_2685" value="" placeholder="" title="Previous Surname (if applicable) " class="">
and the button is
<input value="Next Page" type="button" class="wfPageNextButton" wfpageindex_activate="7" id="wfPageNextId6" style="visibility: visible;">
Both of these are generated and I cannot change them!
My Script is:
<script>
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inp.Val= $("#tfa_2685").val();
if (inp.val().length > 0) {
alert("Test.");
}
});
})
</script>

An identifier ( variable ) must not contains dots. ( see more details ECMAScript specification in section 7.6 Identifier Names and Identifiers)
the next variable declaration is wrong
var inp.Val= $("#tfa_2685").val();
to fix this
var inp = $("#tfa_2685");

if you want to assign value to inp variable, you should just do: var inp = $("#tfa_2685").val();
And then call to inp.val() just replace with inp, for inp is not jQuery object so it doesn't have val() method

You have syntax, try this:
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inpVal= $("#tfa_2685").val();
if (inpVal.length > 0) {
alert("Test.");
}
});
});
https://jsfiddle.net/cua40s80/

get element type from element found by class

Im trying to create a function that will get the "value" of any type of any element that has a specific class (textarea, span,... whatever)
To do this I need to test what kind of element Im currently dealing with which I can do easily enough with alert($('#gdocDump').prop('tagName')); but for some reason if I grab all elements of the same class with var varElems=$(".feedback"); and try to loop through them testing each one like var elementType = elem.prop('tagName');, I get the error "TypeError: elem.prop is not a function"
Why does this happen?
Apparently the elements stored in the jQuery object created by
$(".feedback") are not quite the same as looking at each
individually?
What do I need to change for var elementType =
elem.prop('tagName'); to work properly below?
jsFiddle:Testing Ground
HTML
<textarea id="gdocDump" class="feedback area" rows="1" cols="22" ></textarea><br />
<input id="scaleSlider" class="feedback" type="range"value="1" min="1" max="9" step="1"/><br />
<span id="command1" class="feedback">This is a span</span><br />
<span id="command2" class="feedback">This is a span</span><br /><br />
<input type="button" id="sendFeedback" value="Feedback"/><br /><br /><br /><br />
<input type="button" id="test" value="Test a specific element"/>
Javascript:
$("#sendFeedback").click(function() {
composeAndCallEmail();
});
$("#test").click(function() {
alert($('#gdocDump').prop('tagName'));
});
function composeAndCallEmail() {
var varElems=$(".feedback");
var feedback=[];
$(varElems).each(function(index, element) {
feedback.push(getElemContents(element))
});
}
function getElemContents(elem){
var elementType = elem.prop('tagName');
//this is where the problem occurs
if(elementType=='INPUT')return elem.val();
//... will add more here later
}

Inside each(index, element) the arguments are the index and the native DOM element
$(varElems).each(function(index, element) {
feedback.push(getElemContents(element)) // plain DOM element, not jQuery
});
that means you have to wrap it again or use the native elem.tagName property
function getElemContents(elem){
var elementType = $(elem).prop('tagName');
if ( elementType.toLowerCase() === 'input' )
return $(elem).val();
}

As commented above, you're calling jQuery method prop() on a DOM node; instead use elem.tagName.
Similarly in getElemContents() you should use .value rather than .val(). Finally this should give you:
function getElemContents(elem){
var elementType = elem.prop.tagName;
if(elementType=='INPUT')return elem.value;
//... will add more here later
}
JS Fiddle demo.