Hi i'am using mootools and want to add an input lement
var newinput = new Element('input', {type: 'text', name: "removeusers", value:'hoho' });
$$(imgElement).getParent().adopt(newinput);
but the value isn't set
it creates only an empty element
<input type="text" name="removeusers">
and the displayed textfield is blank
Ok everything was right with mootools, just called this code in an onclick listener which although calls this code:
elements.each( function( element ) { element.clearValue(); } );
Your code is working correctly. The value property is set in the DOM form object but is not displayed as an attribute of the input element. To do so would imply that the value was the defaultValue of the text field when the page was loaded. If you query the value it will return correctly:
console.log( $E('input[name=removeusers]').value );
> "hoho"
You can set the value attribute separately if needed with:
$E('input[name=removeusers]').setAttribute('value', 'hoho');
Related
I'm trying to check the value of the value field inside a div.
this value is not reflected to a string or a int in the div value, only in his attribute:
<input as-automation="" type="text" placeholder="Put the initial value here" value="999.99">
please look a value of 999.99, how can I reach it? I tried valueof, contains, eq, nothing worked..
I want to find the way to reach this value by cypress.
You should be able to reference the element's value by the key value, either through the Chai assertion (via cy.should()) or in cy.its().
cy.get('input').should('have.value', '999.99');
...
cy.get('input').its('value').then((value) => {
// other code where you do something with the `value` variable
})
There are a few ways to check it.
const value = "999.99";
cy.get("input").should("have.value", value);
cy.get("input").should(($input) => {
const val = $input.val();
expect(val).to.eq(value);
});
cy.get("input").invoke("val").should("eq", value);
Here is a working example.
Another way to do this is:
cy.get('input').should('have.attr', 'value', '999.99')
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I have a page built in ASP.NET MVC 4 that uses the jquery.validate.unobtrusive library for client side validation. There is an input that needs to be within a range of numbers. However, this range can change dynamically based on user interactions with other parts of the form.
The defaults validate just fine, however after updating the data-rule-range attribute, the validation and message are still triggered on the original values.
Here is the input on initial page load:
<input id="amount" data-rule-range="[1,350]" data-msg-range="Please enter an amount between ${0} and ${1}">
This validates correctly with the message Please enter an amount between $1 and $350 if a number greater than 350 is entered.
After an event fires elsewhere, the data-rule-range is updated and the element looks as such:
<input id="amount" data-rule-range="[1,600]" data-msg-range="Please enter an amount between ${0} and ${1}">
At this point if 500 is entered into the input it will fail validation with the same previous message stating it must be between $1 and $350. I have also tried removing the validator and unobtrusiveValidation from the form and parsing it again with no luck.
$('form').removeData('validator');
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
Is there a clean way to change the validation behavior based on the input attributes dynamically?
As Sparky pointed out changing default attributes dynamically will not be picked up after the validation plugin has been initialized. To best work around this without rewiring how we register validated fields and rules, I found it easiest to register a custom adapter in the unobtrusive library:
jQuery.validator.unobtrusive.adapters.add("amount", {}, function (options) {
options.rules["amount"] = true;
options.messages["amount"] = function () { return $(options.element).attr('data-val-amount'); };
});
jQuery.validator.addMethod("amount", function (val, el, params) {
try {
var max = $(el).attr('data-amount-max');
var min = $(el).attr('data-amount-min');
return val <= max && val >= min;
} catch (e) {
console.log("Attribute data-amount-max or data-amount-min missing from input");
return false;
}
});
Because the message is a function, it will be evaluated every time and always pick up the latest attribute value for data-val-amount. The downside to this solution is that everytime there is a change we need to change all three attributes on the input: data-amount-min, data-amount-max, and data-val-amount.
Finally here is the input markup on initial load. The only attribute that needs to be present on load is data-val-amount.
<input id="amount" data-val-amount="Please enter an amount between ${0} and ${1}" data-val="true">
You cannot change rules dynamically by changing the data attributes. That's because the jQuery Validate plugin is initialized with the existing attributes on page load... there is no way for the plugin to auto re-initialize after dynamic changes are made to the attributes.
You must use the .rules('add') and .rules('remove') methods provided by the developer.
See: http://jqueryvalidation.org/rules/
you can try this one:
// reset the form's validator
$("form").removeData("validator");
// change the range
$("#amount").attr("data-rule-range", "[1,600]");
// reapply the form's validator
$.validator.unobtrusive.parse(document);
charle's solution works! you cannot have model attributes to use it though, I build my inputs like:
#Html.TextBoxFor(m => Model.EnterValue, new
{
#class = "form-control",
id="xxxx"
data_val = "true",
data_val_range = String.Format(Messages.ValueTooBig, Model.ParamName),
data_val_range_max = 6,
data_val_range_min = 2,
data_val_regex_pattern = "^\\d+(,\\d{1,2})?$"
})
and then in javascript:
$("form").removeData("validator");
$("#xxxx").attr('data-val-range-max', 3)
$("#xxxx").attr('data-val-range-min', 0)
$.validator.unobtrusive.parse(document);
I'm creating dijit widget from input:
<input name="serviceName" type="text"/>
input = new ValidationTextBox({required: true}, query('[name=serviceName]')[0])
I have a lot of inputs and I want to batch-process them, giving them to separate function.
The problem is, that I can't find in docs, how to get the input name back from widget (which can be also Select, DateBox etc., neither I can find that property inspecting element in Firebug
function processInput(input) {
var inputName = ???
}
I've tried input.name and input.get('name'), but they are returning undefined.
When instantiating your widget programmatically, properties are usually not copied. It's only when you use declarative markup that these properties are copied. This means that the name property is not copied from your original input node, so it's in fact empty.
When creating your ValidationTextBox, just provide the name property like the example below:
var inputNode = query('[name=serviceName]')[0];
var input = new ValidationTextBox({
required: true,
name: inputNode.name
}, inputNode);
You can then retrieve the name with either input.name or input.get('name').
I also made an example JSFiddle.
I'm try to make a hidden field on my code with ST 1.1, but I've error in console log.
I have this code:
var hddNumClient = new Ext.form.Hidden({
xtype : 'textfield',
name : 'hddNumClient',
id : 'hddNumClient',
value : ''
})
I need to create a hidden field and run environment to pass another value response. Please help me.
var hddNumClient = new Ext.form.Hidden({
name : 'hddNumClient',
id : 'hddNumClient',
value : ''
})
you can not add one element into onther element so you have to remove xtype:'textfield'
I am trying to add a hidden field using html code
var myvar = new Ext.Container({
items : [
{
xtype : 'component',
html :'<input type="hidden" name="" value="" id="" >'
}]
});
Sencha uses javascript so you can simply declare a global variable and use it as a hidden field...