I have a dropdown menu for the select country. When I click on that dropdown it is open one search box and country list. We can select a country by searching a keyword in the search box. But I can't able to select country 'India'.
WebElement ctry = driver.findElement(By.id("select2-billing_country-container"));
ctry.click();
System.out.println("click on country successfully");
//Error starts from here..
Select country = new Select(ctry);
country.selectByVisibleText("India");
// Html code
// ctry Textbox
<span class="select2-selection__rendered" id="select2-billing_country-container" role="textbox" aria-readonly="true" title="India">India</span>
// Search box
<input class="select2-search__field" type="text" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-owns="select2-billing_country-results" aria-activedescendant="select2-billing_country-result-k084-IS">
// Specific country india code
<li class="select2-results__option select2-results__option--highlighted" id="select2-billing_country-result-gulv-IN" role="option" data-selected="true" tabindex="-1" aria-selected="true">India</li>
org.openqa.selenium.support.ui.UnexpectedTagNameException:Element should have been "select" but was "span"
As the dropdown is not of the Select type, you cannot use the Select method on this dropdown. You need to click on the element using its xpath.
You can do it like:
WebElement ctry = driver.findElement(By.id("select2-billing_country-container"));
ctry.click();
System.out.println("click on country successfully");
WebElement country = driver.findElement(By.xpath("//li[text()='India']"));
country.click();
Related
Below is a small part of my data insert form.
My problem is;
The first form object is for the name of the Class room. The field is required and I wanna validate it at server side . In normal it works for sure. But since the next form object is an dropdown menu which get filled from a table of my database, the validation doesn't work. When i post it with empty class room field I get a error.
Normaly it is expected that the server side validation work and stop the posting action right ?
But it doesn't.
What do I miss here ? Thank you.
PS: The teacher field in DB is nullable and when i type something in the class room textbox the form works w/o any problem.
...
...
<div class="col-8 form-floating p-2">
<input type="text" asp-for="AddClassRoom.Class" class="form-control" />
<label asp-for="AddClassRoom.Class"></label>
<span asp-validation-for="AddClassRoom.Class" class="text-danger"></span>
</div>
<div class="col-8 form-floating p-2">
<select class="form-select" asp-for="AddClassRoom.Teacher" asp-items="#(new SelectList(Model.ApplicationUser.OrderBy(x => x.NameSurname).ToList(),"Id","NameSurname"))">
<option value="">select...</option>
</select>
<label asp-for="AddClassRoom.Teacher"></label>
<span asp-validation-for="AddClassRoom.Teacher" class="text-danger"></span>
</div>
...
...
With reference to you comment:
Error is; null parameter(source). Well this is ok, i know it. But there must be a simple way to validate an insert form who has an Database driven content dropdown menu. Post and don't get null after server side validation.
It seems that the dropdown values are not populated after posting the form. Since you have the dropdown values are coming from DB, you need to get its items again from DB after posting the form, so the razor page can fill it again.
More support can be provided if you share your backend code.
[Sample]
Here is a basic sample depending on your code;
<select class="form-select" asp-for="AddClassRoom.Teacher" asp-items="#(new SelectList(Model.ApplicationUser.OrderBy(x => x.NameSurname).ToList(),"Id","NameSurname"))">
<option value="">select...</option>
</select>
Backend:
public ActionResult OnGet() {
// ...
ApplicationUsers = GetApplicationUsersFromDb();
Return Page();
}
public ActionResult OnPost() {
// ...
ApplicationUsers = GetApplicationUsersFromDb();
Return Page();
}
view screen I am using https://amp.dev/documentation/components/amp-autocomplete/ and I am able show in results id and name concated in one string, but I need show only name and store id in hidden input.
code screen
<amp-autocomplete filter="substring" filter-value="name" min-characters="2" src="/ajax/get_active_clinics.php" class="name_autocomplete">
<input type="text" placeholder="Numele clinicii" name="clinic_name" id="clinic_name"
{literal}on="change:AMP.setState({clinic_name_validation: true, form_message_validation:true})"{/literal}>
<span class="hide"
[class]="formResponse.clinic_name && !clinic_name_validation ? 'show input_validation_error' : 'hide'">Clinica este obligatorie</span>
<template type="amp-mustache" id="amp-template-custom">
{literal}
<div class="city-item" data-value="ID - {{id}}, {{name}}">
<div class="autocomplete-results-item-holder">
<div class="autocomplete-results-item-img">
<amp-img src="{{link}}" alt="{{name}}" width="40" height="40"></amp-img>
</div>
<div class="autocomplete-results-item-text">{{name}}</div>
</div>
</div>
{/literal}
</template>
</amp-autocomplete>
You can use the select event on amp-autocomplete to get the event.value which will return the value of the data-value attribute of the selected item.
https://amp.dev/documentation/components/amp-autocomplete/#events
You can then call the split() string method on the result.
You'll need to modify the data-value in your mustache template like so:
<div class="city-item" data-value="{{id}},{{name}}">
Then add the following code to your autocomplete, this will assign the split values to 2 temporary state properties.
<amp-autocomplete
...
on="select: AMP.setState({
clinicName: event.value.split(',')[0],
clinicId: event.value.split(',')[1]
})"
>
Once these values are in state you can then access them using bound values. Note the [value] attribute, this will update the inputs value when state changes. It's worth mentioning that the change in value won't trigger the change event listener on your input here as it's only triggered on user interaction.
<input
type="text"
placeholder="Numele clinicii"
name="clinic_name"
id="clinic_name"
[value]="clinicName"
on="change:AMP.setState({
clinic_name_validation: true,
form_message_validation:true
})"
/>
Last thing you'll need to do is add the hidden input for Clinic ID, again this will need to be bound to the temporary state property clinicId.
<input
type="hidden"
name="clinic_id"
[value]="clinicId"
>
I have a requirement where when i select from a dropdown a section has to be made visible, and for now all the dropdown's have the same section to be displayed.
Issue is the first time when i select the item from the dropdown the section that i want is visible, but the second time i happen to select the section goes off, i want to keep the section visible on selection of any item from my dropdown.
Attaching my code trial below
This is my HTML code
<div class="col-lg-4 m-form__group-sub">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label> Insurance Company Name</mat-label>
<mat-select placeholder="Select" formControlName="inc_name"
(selectionChange)="onSelecetionChange($event.value)">
<mat-option *ngFor="let policyComp of policyinc.data"
[value]="policyComp.inc_code">
{{ policyComp.inc_name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
And here the component where i have the function
policyComp: boolean = false;
onSelecetionChange(value: string) {
this.policyComp = !this.policyComp;
}
You have to change this method
onSelecetionChange(value: string) {
this.policyComp = true;
}
I have a mediawiki multi language site (on sub domains) and I am trying to set up a start page similar to wikipedia, where a user can enter a search term, and then select their language from a select list.
I have no idea where to start, not much experience building forms, So with this question I am at least looking for clues and directions to go.
My idea is a simple search form, and depending on which language was selected, when a user submits, it goes to the url (related to the select list), and appends the searched term.
A simple form to get you started (the form allows you to input an URL and select a language)
function myFunction() {
// get input form values
var url = document.getElementById("iUrl").value;
var langEl = document.getElementById("iLang");
var iLang = langEl[langEl.selectedIndex].value;
console.log("URL = ", url);
console.log("Lang = ", iLang);
window.open(url + "&lr=" + iLang);
}
<form id="form" action="javascript:myFunction();">
<input size="35" type="text" id="iUrl" name="text" value="https://www.google.com/search?as_q=" />
<br>
<select name="language" id="iLang">
<option value="lang_en">EN</option>
<option value="lang_es">ES</option>
</select>
<input type="submit" name="submit" value="Submit" />
</form>
I use meteor for my project and I have the following code:
<div class="col-md-4 activities_text">
<center><h2>Learn</h2><br/><br/></center>
{{getContent.description}}
</div>
<div class="col-md-8">
<div class="button_absolute">
<button class="button_ahead"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
</div>
<img class="activities_image" name="image" src="{{getContent.src}}"/>
</div>
</div>
And I want to obtain the id or (subsequently the whole information in the database) about the item which my HTML currently uses for the "src" of the image subsequently for title and description. So I could swap them when the button is clicked. I tried this:
'click .button_ahead':function(event){
var infoNumber = this.number;
console.log("this is the number of the image"+this._id+" "+ this.number);
infoNumber = infoNumber + 1;
Session.set("number", infoNumber);
}
but both this.number and this._id remain undefined. Maybe the problem is that when I click the button I should obtain the data about the image etc.. but not for the button itself.
The context is the button element, so, this is probably not what you want to use, if you really want to use this try changing the context with .call() or .apply() functions.
PS: I'd like to leave a comment under question but I can't due to the rep points
$(event.currentTarget)[0].id would give you the id of the button in
'click .button_ahead':function(event){
var id = $(event.currentTarget)[0].id
var infoNumber = this.number;
console.log("this is the number of the image"+id+" "+ this.number);
infoNumber = infoNumber + 1;
Session.set("number", infoNumber);
}
so in your template you can simply put
<button class="button_ahead" id="this._id"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
to get the id of the current resource you're displaying.
you can also use more simply event.currentTarget.id