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"]' );

To Replace dynamic value using jquery

I have input field like
<input type="text" name="time[23][34][]" value="">
name of input field is dynamic. Means it might be time[23][34][],time1[11][33][],time2[45][22][] etc
Now I want to change it to multidimension to singledimension like
time[]
time1[]
time2[]
I have tried below code:
$('input').attr('name').replace(/(\[|\])/g, '\\$1')
How can i replace it using jquery or javascript?

this may help you:
https://jsfiddle.net/s033kv43/
var attrib = $('input').attr('name').replace(/[\[|\]]/g, '');
$('input').attr('name', attrib);
i get the name attribute and replace the brackets with nothing, then set the name attribute.
Dont forget to adjust this code, so its alters the correct input-fields

javascript: Syntax to capture both string value of element name and element

I am getting hung up on how to go back and forth between the string value of the id of an element and element itself. I believe the problem involves syntax but cannot get it right. I would like to pass one parameter in javascript (in this case "title" and use it as a string and an element as follows to make a title disappear and an edit title box appear.
html
//note this html is actually written to page by another javascript function
<span id="title">Title</span><span id="titleedit"></span><img src="edit.gif" onclick="editTitle('title');">
If I leave out apostrophes around title I can get it to work as an element in following but then it does not work as a string.
javascript
function editTitle(field) {
//using field as string only works if parameter in above is in apostrophes
var fieldedit = field+"edit"
var editstring = '<input type="text" name="title" onclick="saveTitle();">save';
document.getElementById('fieldedit').innerHTML = "editstring";
//using as element only works if above has no apostrophes
field.style.display="none";
}
Thanks for suggesting how to accomplish both tasks...make title disappear and titleedit appear passing just word title. (The reason I want to pass title as parameter as there are a whole bunch of other fields to edit that I'd like to pass as one parameter each.)

When you say document.getElementById('fieldedit'), you're saying "the element with "fieldedit" as the id". What you want is "The element with the contents of the variable fieldedit as the id.
Give it a shot with document.getElementById(fieldedit).innerHTML = editstring;.
Update:
There is also a problem with this line:
var editstring = "<input type="text" name="title" onclick="saveTitle();">save";
Try escaping your quotes, or using a mixture of single and double quotes. For example:
var editstring = '<input type="text" name="title" onclick="saveTitle();">save';
Update 2:
To obtain a reference to the element with id="title":
var field = document.getElementById('title');
Now that field refers to that element, you can use:
field.style.display = 'none';
You can also do it all in one line:
document.getElementById('title').style.display = 'none';

document.getElementById('fieldedit').innerHTML = "editstring";
Shouldn't that be
document.getElementById(fieldedit).innerHTML = editstring; ?
You want to get the span with the id "titleedit" and insert the input element stored in editstring, if I understand your question.

Other than class, id and text, how else can I pass a variable within an element in jQuery?

I have a situation where class and id are taken, but I need to pass a variable in jQuery. How do you recommend?
HTML
<input
type="text"
id="cannot_change_this"
class="rather_not_append_extra_classes_just_for_a_variable"
value="Full Text Name"
hash="ABCDE">
Each value, when selected via autocomplete has an associated hash. In the example above the value might be Full Text Name, but this is not unique. What I really need to pass is the hash: ABCDE.
I can't change the id and I'd rather not add extra classes and have to filter out the ones used for styles to get my hash. And since it's an input I can't use .text() either.
How else can I pass ABCDE hash to jQuery?

Look at using jQuery's data method
http://api.jquery.com/jQuery.data/
You can calculate the hash of the value in javascript, then set it to the input's data.
Also if using HTML5, you can specifically declare data attributes in the HTML. So you could use a property like data-hash=HASH to set your data.
Alternatively, if you don't care about comliance or maybe you aren't using HTML5, you could just set your own attribute like
<input type="text" id="cannot_change_this"
class="rather_not_append_extra_classes_just_for_a_variable"
value="Full Text Name" hash="ABCDE" />
And read it with jQuery like this:
var hash = $('input#idOfInput').attr('hash');

If i got it right.
Setting the value:
$("#cannot_change_this").data("hash", hashValue);
Getting the value later:
$("#cannot_change_this").data("hash");

You could just use the title attribute:
<input type="text" id="cannot_change_this"
class="rather_not_append_extra_classes_just_for_a_variable"
value="Full Text Name"title="ABCDE" />
it is a standard attribute for all inputs.

you can have something like:
jQuery(document).ready(function(){
//SET:
jQuery("#cannot_change_this").attr("new-value", "ABCDE");
//READ:
var val = jQuery("#cannot_change_this").attr("new-value");
alert(val);
});

How to check input tag have only tag(<br/>) inside as value using jQuery

Check input tag which have value only as <br/> tag inside as value using jQuery
I am using an htmlEditor in my project, sometimes user just press enter key only in textarea field. It will get as <br/><br/><br/><br/> as value when saving.
I want to avoid this tags when saving.
How to validate this in jquery ?
If any other characters like <br/>Just <br/> Example <br/> is present then I want to save it with break tag itself.

using a regex like this would help.
/^(\<br\/>)+$/.test($("textarea").val());

Clean it like this:
// Get the HTML and remove <br /> variants
var htmlCleaned = $('#MyTextArea').val().replace(/<br\s?\/?>/, '');

Refer LIVE DEMO
var divTag = $("div");
var nDivTag = $(divTag[0].outerHTML);
$("br", nDivTag).remove();
alert(nDivTag.html());