I have an input and a select in my VUE application that are shown depending on the selection of a previous input.
If I insert values and change the initial input selection, I hide the second input and select, to restart the form.
The problem comes when I restart the form and I still get the selected values on the first load.
I'm trying to reset the values but none of the methods I've found in similar case reviews works fine.
Here's my select and my input that i want to reset values
<h1 v-if="this.isSelected"> What's your selection ?</h1>
<select
ref="item"
class="form-control"
id="selectedItem"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)">
<option v-for="item in filteredItem" v-bind:key="item.name">{{ item.name }}</option>
</select>
<div v-show="this.isItemSelected">
<h1>what's your item name ?</h1>
<input
type="text"
id="name"
ref="itemName"
class="form-control fields"
style="text-transform: capitalize"
v-model="itemFormInfo.name"
#keypress="formChange($event)"
/>
<div class="loader-spinner" v-if="loading">
<app-loader/>
</div>
</div>
and here's my method where I have tried the reset and document.getElementById('').value("") methods;
onChangeSpecie(event) {
let specie = event.target._value;
this.specieName = this.getSpecieName(specie);
this.breedName = this.getBreedName(specie);
this.$refs.breed.focus();
if (this.isBreedSelected = true) {
this.isBreedSelected = false;
this.isNameCompleted = false;
this.isLoaderFinished = false;
this.$refs.animalName.item()
}
},
If I print by console I see how the value is emptied but the input appears with the written value until I focus on the .
How do I stop it from appearing?
in neither method does it erase my previous values showing on the input.
what am I doing wrong?
thank you all for your help and time in advance
I believe you need to null the model not the target element's value.
this.itemFormInfo.name = null
Related
To get the selected option from a radio button form, I'm looking at request.vars to get the value. Following is the controller code:
def get_results():
test = request.vars['QuestionOne']
for topic in session.selectedtopics:
test = test + request.vars[topic]
return locals()
And now the code for the view:
{{extend 'layout.html'}}
<P>Please select the options that most closely approximates the actual scenario.
<br>
<form action="{{=URL('get_results')}}" method="post">
{{nameTopic =""}}
{{session.selectedtopics = list()}}
{{for topic in topics:}}
{{if nameTopic <> topic.topic.replace(" ", "_"):}}
<br><h2>{{=topic.topic}}</h2>
{{nameTopic = topic.topic.replace(" ", "_")}}
{{session.selectedtopics.append(nameTopic)}}
{{pass}}
<p><input type="radio" name={{=nameTopic}} value={{=topic.param}}>{{=topic.param}}</p>
{{pass}}
<br>
<input type="submit">
</form>
Here is the problem: I don't know the reason, but it is getting only the first word of the selected option in the radio form. For example, the option selected is "It is normal", but the var is returning only "It". Any idea why it is happening?
Thank in advance.
You need to quote the HTML attribute values:
<input type="radio" name="{{=nameTopic}}" value="{{=topic.param}}">
Without the quotes, you'll end up with final HTML like:
<input type="radio" name=some_topic value=It is normal>
The browser will interpret the value to be "It", with "is" and "normal" being invalid HTML attributes.
I am looping a data, from the data, I am adding the name value into the input field, but not at all set. what is the issue here?
My form template:
<form novalidate name="myForm">
<div ng-show="myForm[addVas.name].$error.pattern">Error will come </div>
<div class="form-group">
<input type="text" [(ngModel)]="addVas.input" [attr.disabled]="addVas.disabled ? '' : null " name="{{addVas.name}}" ng-pattern="/^[0-9]/" (blur)="addAdnlVasAfterInput(addVas)" placeholder="Provide value of shipment"
class="form-control">{{addVas.name}} <!--getting value here-->
</div>
</form>
I am not getting throw the error, when user input instead of number in to charters. how to solve that?
Now I have update my name field in to [name]="addVas.name" but I not confirm the name sent, unless if i get error message
There are some confusions between Angular versions. ng-show should be *ngIf or [hidden] with reverse logic, ng-pattern is [pattern]. [attr-disabled] can be [disabled], etc.. Pattern /^[0-9]/ doesn't allow more than 1 digit, I am not sure it was your aim. If you use a property as pattern expression, the use [pattern]="property":
Here is what I suggest:
<form #myForm>
<input type="text" [(ngModel)]="addVas.input"
[disabled]="addVas.disabled" [pattern]="addVas.pattern"
[name]="addVas.name" #input="ngModel">
<div *ngIf="input.errors && (input.dirty || input.touched)" >
<div [hidden]="!input.errors.pattern">
Should be a number
</div>
</div>
</form>
Demo
The properties cannot perform interpolation.
You need to use property binding for setting values to properties.
Try this:
[name]="addVas.name"
instead of
name= "{{addVas.name}}"
i want to scrape a page with checkboxes with no id, they have the same name and just the values are differents.
<div class="mvNavLk">
<form class="jsExpSCCategories" method="post" name="ExpressSCCategories" action="actionTest.html">
<ul class="mvSrcLk">
<li>
<label class="mvNavSel mvNavLvl1">
First
<input type="checkbox" value="firstValue" name="selectedNavigationCategoryPath">
</label>
</li>
<li>
<label class="mvNavSel mvNavLvl1">
Second
<input type="checkbox" value="secondValue" name="selectedNavigationCategoryPath">
</label>
</li>
</ul>
</form>
</div>
use below code:
driver.find_element_by_css_selector(".mvSrcLk>li:nth-child(1)>label.mvNavSel.mvNavLvl1").click();
hope this will work.
Hope this works-
driver.FindElement(By.XPath(".//label[contains(text(),'First')]/input")).SendKeys("test");
Hi please do it like below Note this example is in java
// take check boxes with same name inside the list
List<WebElement> myCheckBox = driver.findElements(By.name("selectedNavigationCategoryPath"));
// now on the basis of index call click
myCheckBox.get(0).click(); // for the first check box
Thread.sleep(2000);
myCheckBox.get(1).click(); // for the second check box
or if you want to select on the basis of value then
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Thread.sleep(2000);
driver.findElement(By.xpath("//*[#value='secondValue']")).click(); // for the 2st one
UPDATE
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#value='firstValue']")));
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Hope this helps you
driver.findElement(By.name("selectedNavigationCategoryPath")).click();
Below Code is in C#, Collects all the Checkboxes with the name specified. Then Iterates through each ckeckbox, gets the value attribute, if the attribute is equal to your specified check box, then clicks it and comes out of the loop. Hope this should work.
IList<IWebElement> myCheckBoxs = driver.FindElements(By.name("selectedNavigationCategoryPath"));
Foreach(IWebElement chkBx in myCheckBoxs)
{
if(chkBx.GetAttribute("Value")=="Your Desired value")
{
chkBx.Click();
break;
}
}
`
Use this CSS locator.
[name='selectedNavigationCategoryPath'][value='firstValue']
I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
OK here is the deal. I have a survey that I am putting up with over 60 questions. I want to make them all mandatory. I really need to know if the group has a value, don't care what it is.
Here is what I have, but it is only giving me the first value.
<function CheckField(myFieldName, myText){
var x=document.getElementById(myFieldName).value;
window.alert(myFieldName + "1: " +x);
. . .. . .
OK so this returns the first value of 5. It does not matter what I select. All I just need to know if they selected something if not I want to mark the question with a different color so the user knows to go back and answer the question.
You can try HTML5 required:
<label><input type="radio" name="option" required /> Option 1</label>
<label><input type="radio" name="option" /> Option 2</label>
You can use it on one radio (per each name), or on all of them (see HTML5: How to use the "required" attribute with a "radio" input field).
Option 1: (EASY!)
Having the attribute "checked" set to "true" would make have a default value either way.
<input type="radio" name="option" />Option 1
<input type="radio" name="option" checked="true" />Option 2
You could also use required instead of checked attribute but some browsers don't support it like Safari.
For info on support:
required
checked
Option 2:
JSFiddle:
http://jsfiddle.net/FE7sK/2/
jQuery(function () {
jQuery('#validateOpt').bind('click', checkRadio);
})
function checkRadio() {
var isChecked = jQuery("input[type=radio]:checked").val();
var booleanVlaueIsChecked = false;
if (isChecked) {
booleanVlaueIsChecked = true;
$('#form1').submit();
} else {
alert("aaa");
}
}