We Keep Coding

Testcafé - getting content of invisible <input>'s value attribute

I need to get the value of an <input>, specifically the stuff that is held inside its value attribute.
However, the input is not visible, so that seems to be a problem for testcafé.
Does anyone know how to work around that? Is there a special option you can use with the Selectors to make it work?
Thanks for helping me out, I appreciate any help!

Got it, simply declare a Selector like this let yourInputs = Selector('input[type="hidden"]'), this will get all hidden inputs and return a NodeList which you can iterate over in your test.
If you want to be more specific and select over an ID or name, do it like #lumio.
Then you can access the value in your test run with an await yourInputs.value.

I guess you mean a hidden input element as in <input type="hidden" /> and you want to receive the value before you're sending it to your Node application. You can use querySelector for this.
console.log( document.querySelector( 'input[name=test]' ).value );
<input type="hidden" name="test" value="hello world" />
For TestCafé you got the Selector-constructor which creates a selector.
As fweidemann14 pointed out, you can do the following:
const hiddenInputs = Selector( 'input[type="hidden"]' );

Javascript can't apply an existing function to onkeyup

I have a bunch of HTML number inputs, and I have grabbed them by
x=document.querySelectorAll('input[type="number"]');
I then try and iterate through this with a for-loop, and apply an onkeyup function. The function is this:
t=function(elem){
elem.onkeyup=function(e) {
if(!/[\d\.]/.test(String.fromCharCode(e.which))) {
elem.value='';
}
};
};
Basically, what it does is clear the value of the input if there is a letter typed in. I know I can apply it via HTML:
<input type='number' onkeyup='t(this)'/>
But how can I do it with Javascript? I tried iterating through it with:
x=document.querySelectorAll('input[type="number"]');
for(i=0; i<x.length; i++){
x[i].onkeyup=t(this);
}
but it doesn't work. What am I doing wrong? How can I do this? Please regular JavaScript answers only, no jQuery or other frameworks/libraries.

change
x[i].onkeyup=t(this);
to
x[i].onkeyup=t(x[i]);
because this isn't what you want it to be

Apologies, all. I found my answer. Agreeing with Jaromanda X, I needed to change
x[i].onkeyup=t(this);
to
x[i].onkeyup=t(x[i]);
This (pun intended ;)was part of the problem, but the main problem was that the valid property name is
keyup=function();
and not
onkeyup=function(){}'

Make TextArea Disabled in JS

I want to make Textarea Disable (Grayed out) in my JS Method
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
}
The above code is not working for this.

You should use prop instead of attr:
$('input[id$="txtareaID"]').prop('disabled', true);
jQuery docs

If your selector is correct, than you need only to change attr to prop:
function myfun(status){
if(status === 'Yes'){ // more suitable for comparing
$('input[id$="txtareaID"]').prop('disabled',true);
}
}
Related post:
Disable/enable an input with jQuery?

Considering textarea as
<textarea id='txt'>Something</textarea>
Using jQuery, you can achieve like this
$("#txt").attr('disabled', true);
Using plain javascript
document.getElementById("txt").disabled=true;

Your problem is with CSS not JS. As far I can tell your code is working, but there's no way of changing this specific style. You could try workarounds: Change Font Color For Disabled Input

<textarea> is what you should be looking for not the <input> tag with id = textareaid.
$('input[id$="txtareaID"]').attr('disabled','disabled');
change the above code to the below one and see the magic by clicking the link at the bottom.
$('textarea[id$="txtareaID"]').attr('disabled','disabled');
http://jsfiddle.net/5s9ge7d6/1/

none of the below answers worked.
Then I found something amazing trick which solved my problem ---
Here it is --- JUST REMOVE "input" word from that line in if block -
WORKED CODE :
function myfun(status){
if(status=='Yes'){
$('[id$="txtareaID"]').attr('disabled','disabled');
}
Previous CODE :
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
$('input[id$="txtareaID"]').prop('disabled',true); //Didn't worked either
}

new textarea onfocus is not working

i have this interface :
When the "Add Another One" button is clicked, i will have to add another interface that looks the same as this one, so that the whole interface would look something like this :
I had the attribute onfocus for the textarea in order to clear it content when in focus, and it is working prefectly, this is the code for it :
<textarea name="educationDescription1" id="educationDescription1" rows="5" cols="33" onfocus="clearContents(this);">Describe your studying experience in a couple of sentences.</textarea>
Now I'm having problems doing the same for the created textarea, although i have used the same syntax! This is the code used for creating the new text area :
var node6 = document.createElement("textarea");
node6.rows="5";
node6.cols="33";
node6.onfocus="clearContents(this);";
node6.value="Describe your working experience in a couple of sentences.";
node6.name="experienceDescription"+experiences;
node6.id="experienceDescription"+experiences;
Any idea what could be the problem?
Thanks

In node6.onfocus , onfocus needs a function reference. You are assigning a string. It should be something like,
node6.onfocus=function(){clearContents(this);};
Or you can use addeventListner function
node6.addEventListener('onfocus',function(){clearContents(this);});
Or if you want to add onfocus into the html you have to create a new attribute and set it like this.
var attr = document.createAttribute('onfocus');
attr.value="clearContents(this)";
node6.setAttributeNode(attr);

This:
node6.onfocus="clearContents(this);";
Should be replaced by this:
node6.onfocus=function(){clearContents(this);};

I guess you might want to use placeholder attribute instead of onfocus.
If you use onfocus, the textarea would be cleared everytime the user make a focus on it even after the user input valid data.
The code to set placeholder with jQuery could be something like this:
var node6 = $("<textarea></textarea>");
...
node6.attr('placeholder','Describe your working ...');
Here is the fiddle.
http://jsfiddle.net/naokiota/j687tg80/2/
Hope this helps.

Control textbox with JavaScript by adding a string to dynamic id

I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled

disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.

Here is one way:
http://jsfiddle.net/C2WaU/1/

If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}​
A working example: http://jsfiddle.net/ve9Gz/3/