I have created a CQ form, under this form is my column control (2 column).
Inside column control I have form elements like select1 -> select2 -> title1 -> title 2
Now when I run this page in preview or publish instance, and press tab key within the element, it goes as Select1 -> title1 -> select2 -> title2.
I want to control the tab press here so as it goes as select1 - select2 - title1 -title2
Any views?
You need to use tabindex attribute on each form element, like so:
col1:
<input type="text" name="title1" tabindex="1">
<select name="select1" tabindex="2">...</select>
col2:
<input type="text" name="title2" tabindex="3">
<select name="select2" tabindex="4">...</select>
Related
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 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();
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;
}
Basically I want to have two buttons in my view html template, and evaluate the Int param in my form for POST-request depending on which button has been clicked.
Like if button-number-1 was clicked I want my numParam to be 1
and if button-number-2 was clicked I want my numParam to be 2
Controller code:
case class Data(textParam: Option[String], numParam: Option[Int])
val form = Form(
mapping(
"textParam" -> optional(text),
"numParam" -> optional(number)
)(Data.apply)(Data.unapply)
)
View code:
#helper.form(helper.CSRF(routes.MyController.display)) {
#helper.inputText(form("paramA"))
<input type="submit" value="I want numParam to be 1">
<input type="submit" value="I want numParam to be 2">
}
Would appreciate any help!
I don't know whether this can be done with Play directly, so I propose to add some client-side JS into the mix.
What you could do:
Delete the <input type="submit" ...>, because it does not give you the possibility to modify form content before submission
add two <button>s instead
add a hidden input numValue
use javascript (in this case: jquery) to set the value of the hidden input when one of the buttons is clicked
submit the form using javascript
Something along these lines maybe (warning: untested):
#helper.form(helper.CSRF(routes.MyController.display), 'id -> "myForm") {
#helper.inputText(form("paramA"))
<button id="submit_numValue1">I want numParam to be 1</button>
<button id="submit_numValue2">I want numParam to be 2</button>
<input type="hidden" id="hiddenNumValue" name="numValue" value="0">
}
<script>
// add an `onclick` handler to first button
$('#submit_numValue1').click(function() {
// set hidden input to '1'
$('#hiddenNumValue').val("1");
// submit the form
$('#myForm').submit();
});
// add an `onclick` handler to the second button
$('#submit_numValue2').click(function() {
// set hidden input to '2'
$('#hiddenNumValue').val("2");
// submit the form
$('#myForm').submit();
});
</script>
As mentioned above, this requires that jquery is "imported" on the client-side as a javascript library.
No guarantee that this is the most idiomatic way to solve it in Play, but this answer seems to indicate that this approach is at least not uncommon.
I am new to angular2 & I have a form which can add more item to a page (item with name & decription). This works really well, I can keep on adding new item to my list.
However, each of this item has its own edit & delete. How can I edit and delete each of the item using that only 1 form?
<form #formExperiencesRef="ngForm">
<label for="name">name</label>
<input id="name" type="text" name="fruit [(ngModel)]="formData.name">
<label for="description">description</label>
<input id="description" type="text" name="fruit [(ngModel)]="formData.description">
<button (click)="onSubmit(formExperiencesRef.value)"></button>
</form>
This single form is what I use to keep on adding new item. And now I find it hard to edit the item that I created using this. Can someone help me?
Often I would advise to go with a reactive form for all it's benefits, but if your form is this simple a template driven approach can be sufficient.
First of all I see problem in your form. Your name attributes are the same for both fields, this will mean that they are evaluated as one and the same. I would actually name them as for how your formData object looks like, and then just push the form value as is to the array. I'll just use one way binding here for the sake of the editing of item. Also pass the form object in submit.
How we can edit can be done numerous ways. Here we'll utilize the index of your list (assumingly it's an array).
<form #formExperiencesRef="ngForm" (ngSubmit)="onSubmit(formExperiencesRef.value)">
<input name="name" [ngModel]="formData.name">
<input name="description" [ngModel]="formData.description">
<button type="submit">Submit</button>
</form>
Your list:
<div *ngFor="let item of items; let i = index">
{{item.name}} <button (click)="edit(item, i)">Edit</button>
</div>
And in the TS, we can use #ViewChild to reference our form, which I am using to reset the form:
#ViewChild('formExperiencesRef') formExperiencesRef: NgForm;
and your methods for editing and saving a new item:
formData = {};
items = [];
index = null; // used to store current index value of item (if exists)
edit(item, i) {
this.index = i;
this.formData = item;
}
onSubmit(val) {
// check if index exists, if not it's a new item
if(this.index == null) {
this.items.push(val)
} else {
this.items[this.index] = val;
}
// reset index & form
this.index = null;
this.formExperiencesRef.reset();
}
DEMO: http://plnkr.co/edit/ksHp10WwaDg4AQjwDf2d?p=preview
For the future, I really suggest you check out reactive forms, you have tighter control over your form, handle validations easier and a big,big advantage to me is especially if you are dealing with nested components. Reactive forms can be confusing in the beginning, but it's worth it! :)