In Jmeter, I need to extract values from a dropdown list in a response. For simplifying, I have this response :
<html>
<body>
<div>
<select id="toto" style="width:100px;">
<option selected name="name1" value="value 1"></option>
<option selected name="name2" value="value 2"></option>
<option selected name="name3" value="value 3"></option>
</select>
</div>
<div>
<select id="tutu" style="width:100px;">
<option selected name="name1" value="value 1"></option>
<option selected name="name2" value="value 2"></option>
<option selected name="name3" value="value 3"></option>
</select>
</div>
</body>
</html>
And I need to extract name1, name2 and name3 from the second select (id="tutu"). I can't use XPath because my HTML file is not a valid XML.
Try using CSS Selector Extractor, give select[id=tutu] > option as the "Selector" and name as the "Attribute"
More information:
CSS Selector Reference
How to Use the CSS/JQuery Extractor in JMeter
Also it should be possible to use XPath Extractor if you tick Use Tidy box, however CSS Selector Extractor works faster and consumes less resources so if you can get what you want using CSS selectors - go for it:
Related
I have a form and all data is passing to my Firestore Database as expected with the exception of my dropdown selection and I'm not sure why this is. Any ideas?
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label>Name Of Company:</label>
<select type="text" formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
</div>
Found the Issue, Kind of.
So it turns out that the reason this form is not sending the dropdown information to the database is due to some inline css, more specifically a component set to **display: none;**. When I disable this in the Elements -> styles within the console it sends the data as expected.
However, I still haven't found where this element is located in the code or a way to disable it permanently, but it's a start.
Issue Resolved
The display:none issue I mentioned earlier had to do with bootstrap 4 properties when utilizing the nice-select plugin. I simply uninstalled the nice-select plugin and used the native select option with a little css and everything worked perfectly. I tried to find a workaround, but after several hours I decided it was faster to move forward without the plugin.
This part is working if this is not working for you then you need to look at migration table id/name in model or function.
<form action="">
<div class="col-lg-6 col-md-12">
<label>Name Of Company:</label>
<select formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.
I have on this check in form:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.
What would be the proper way to do this with HTML ?
Update:
I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...
The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:
<fieldset>
<legend>Check in date</legend>
<select id="day" aria-label="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month" aria-label="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year" aria-label="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
</fieldset>
Following with the answer from #Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
Also note, as per the W3C on labelled-by:
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
There is no proper way; a label refers to one element. Just point it to the first one.
<label for="day">Check in date </label>
You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.
If you want to stick with the <select>s, try giving each one a title attribute for accessibility.
Trying to improve #Bracketworks answer:
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
See example 1 of MDN's "Using the aria-labelledby attribute".
HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).
Validation occurs:
<select name="fruit" required>
<option value="" selected> Select a fruit </option>
<option value="apple"> Apple </option>
</select>
Validation never happens:
<select name="fruit" required>
<option value="apple"> Apple </option>
<option value="" selected> Select a fruit </option>
</select>
Question
Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?
Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.
You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.
https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE
To modify this, you will need to use another validator and customize it by some code as well.
jQuery Validate Required Select
I want to load extra data into each select option of Grails g:select taglib. Required output is like the following:
<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>
I am not able to find a way to add the extra data to the taglib using the data attributes of HTML 5. So how to achieve the similar output?
You can do this by (mis-)using a closure to render the value (called optionKey in Grails select taglib) of the select options:
<g:select from="${books}"
optionKey="${{ book -> "${book.id}\" data-author=\"${book.author.name}"}}"
optionValue="title"
name="selectedBook"/>
This will render the options with a data-author attribute:
<option value="1" data-author="Johann Wolfgang von Goethe">Faust</option>
This works at least in Grails 2.4.4 and Grails 3.1.5.
The grails <g:select /> tag now has the dataAttrs attribute that takes a map which is converted to data attributes as follows:
<g:select from="${dogs}" dataAttrs="[foo: it.species]" name="dog" />
if each dog has an attribute called species whose values are as presented in the question, this code would yield...
<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>
As mentioned by the comments above this is currently not possible. You need to write your own tag library to achieve this goal.
You can achieve similar result using the following
<select id="select">
<g:each in="${books}" var="book">
<option value="${book.id}" data-foo="${book.slug}">${book.name}</option>
</g:each>
</select>