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"]' );
Related
I want to get a value from JavaScript prompt and pass it to input for finally submit it
HTML
<form id="createdirForm"><input type="text" name="" id="createdir"/><form>
JavaScript
function createdir() {
var newdirname;
newdirname = prompt('Please input the directory name:', '');
if (!newdirname) return;
$('createdir').newdirname.value = newdirname;
$('createdirForm').submit();
}
The reason why it's not working is because you're not calling the selector in your jQuery properly.
You might want to take a look at the jQuery Selector Tutorial.
Now to fix your problem, since you want to get the input and the form by the id attribute, just like in CSS, you need to use the hashtag (#) symbol.
So you would do:
$('#createdir').val(newdirname);
$('#createdirForm').submit();
Here's a working example: https://jsfiddle.net/vm4ah1L3/1/
Just a side note, you might want to add a name to your html input otherwise when you submit it to your PHP, you won't be able to retrieve the value since the name attribute is empty.
<input type="text" name="dirName" id="createdir">
And in your case, since you're declaring the variable newdirname and assign it right after, you could simply do the assignation in one line:
var newdirname = prompt("Please input a directory name: ");
It seems your jQuery selector is wrong. Try
$('#createdir').val(newdirname);
$('#createdirForm').submit();
jQuery uses the css selector logic, therefore to select an element by id you need to put the # before the selector name.
Also, to add a value to an input, you need to use val(param) with your value replaced in the param.
You have some typo and have forgotten to add #. And the function is not executed.
HTML
<form id="createdirForm">
<input type="text" name="dir" id="createdir" />
</form>
JavaScript
function createdir() {
var newdirname;
newdirname = prompt('Please input the directory name:', '');
if (!newdirname) return;
$('#createdir').value = newdirname;
$('#createdirForm').submit();
}
createdir();
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
I am needing to determine the type of an element, possibly identified by the id property of it.
For example, in the following form...
<form id='my-form'>
<input type='text' id='title' />
<textarea id='comment'></textarea>
</form>
I would like to have a way to identify that $('#title') is a text box.
After some searches, I tried some thing like this, but it returns undefined.
$('#title').type
But some thing like this seems to work, I don't know why...
$('#my-form :input').each( function() {
alert(this.type);
} );
The above will give text and textarea I guess. But when I use the first, it gives undefined.
given an ID of an element, how can I find the type of it.
Thank in advance.
You can get the type of the element by writing
$("#target").attr('type');
or use
$("#target").get(0).tagName // return tag name like INPUT,TEXTAREA ..etc
input is a normal tag, you should use:
$('#my-form input').each( function() {
alert(this.type);
});
This will return undefined:
$('#title').type
Because $("#title") is a jQuery object and type is a property of HTML Element. You can get HTML Element from jQuery object like this:
$('#title').get(0).type
$('#title').attr('type') ;
OR
$('#title').prop('type');
You can use
if($('#title').is('input')){
alert('title in an input element')
} else if($('#title').is('textarea')){
alert('title in an textarea)
}
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);
});
I have a large string in a variable that includes a whole bunch of HTML tags.
I want to get the value of a hidden input field within the string and store it in its own var.
<input type="hidden" value="WantThis" />
Can anyone help me out at all?
You can parse the HTML with jQuery to get the value:
var theValue = $(myString).find('input[name=something]').val();
I'm assuming the hidden field has a name. If it doesn't, you'll need to specify input[type=hidden] and find it using its position relative to the rest of the content.
If your string does not already have a root element and the <input> is not nested, you'll probably want to use $('<div>' + myString + '</div>') instead.
Get the hidden input like so:
$(html).find("input[type=hidden]").val()
Create an ID for the hidden input and call it like normal
<input type="hidden" value="WantThis" id="myInput" />
Then call it
var myval = $('#myInput').val();