I have listeners on the event of radio being checked, which works perfect for the first time.
But if I refresh the page,the radio input is checked because of browser cache,and the event is not fired at all.
How to avoid this trouble?
I've run into this a lot, especially with Firefox. I'm not sure its necessarily valid but i read somewhere recently that adding autocomplete="off" to your form tag will prevent any form element value caching.
There is a post here that provides a JavaScript solution that looks like this:
setTimeout(
function(){
document.getElementById( "form" ).reset();
},
5
);
EDIT
As your radio's arent in a form this should work:
<input type="radio" name="foo" value="bar" autocomplete="off">Bar
<input type="radio" name="foo" value="baz" autocomplete="off">Baz
You could propably unselect everything using javascript when the beforeunload event fires.
Related
Recenty, I noticed that the checkboxes that I wrote a click event worked incorrectly from time to time. Not everytime but sometimes their #click event works in reverse. Here is what I am trying to tell;
<label class="form-switch">
<input type="checkbox" #click="showElement = !showElement"/>
</label>
I have a simple form switch and there are some css on it which I didn't put here, it looks like a toggle switch. It toggles a data which is showElement. The default state of the data is false and when you click on the toggle it becomes true and false respectively.
<div v-show="showElement>
some content here
</div>
When the showElement is true I want to display the above div, and when it becomes false, I want it to be hidden. There is no problem with that. But here is my question;
If my observation is corret, usually when the project is started for the first time, in other words, when I type npm run serve and start the project, I immadiately go and check if it is working fine or not so I click on the checkbox very quickly over and over andsometimes the click event breaks down and starts working backwards. I mean, when the switch is off, the content is visible, when it is false, the div is showing, but it should be reversed. This happens sometimes when I browse the other pages of the project and return to this component. Is this a bug? Or am I doing something wrong? In the first version of the code it was like below;
<label class="form-switch" #click="showElement = !showElement>
<input type="checkbox"/>
</label>
I accidentally typed the click event to the label element instead of input. I thought that might be the problem. I am still thinking that is the problem but the bug that I explained above still happens sometimes. Do you know why? Can anyone explain?
Usually i find that with checkboxes in VueJS #Click is not the way to go. Try to use #Change event instead. This should make it more consistent.
The reason behind this is that the click event triggers before the value has been updated. Therefore creating the risk of it overwriting the old value instead of the newly updated one
EDIT:
I actually think in this case you might even be able to get around this by simply adding a v-model to the checkbox like so:
v-model="showElement" instead of having either #click or #change.
Verison 1:
<label class="form-switch">
<input type="checkbox" #change="showElement = !showElement"/>
</label>
Version 2:
<label class="form-switch">
<input type="checkbox" v-model="showElement"/>
</label>
Check this fiddle: https://jsfiddle.net/x4wykp2u/4/
Hope this makes sense
IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/
i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:
I have a simple form with a single 'email' field and two submit buttons.
The first button 'Next' triggers the forms default action: '/login'.
The second button 'Reset Password' has a 'formaction' element that redirect the form to a new destination: '/reset_password'.
<button type="submit" name="login_button">Next</button>
<button class="secondary_button" type="submit" name="reset_button" formaction="/reset_password">Reset Password</button>
The form works perfectly well, however when testing with Capybara:
click_button "Reset Password"
it triggers the form's default action and not the correct action. I've confirmed the default action is being triggered with:
save_and_show_page
It's definitely triggering the correct button but seems to be ignoring the 'formaction'.
Any ideas?
as you probably know, that's an HTML5 attribute, since Capybara uses RackTtest by default as its driver/browser (which is a very barebones, no JS support driver), it might just not be seeing it at all. I would assume you need a setup with a headless browser like PhantomJS (http://phantomjs.org/index.html). Which supports HTML5 attributes.
I have a customer dialog widget that I am attempting to use dojox.form.Manager on.
I have just stumbled across this control and it looks to do most of what I was implementing (unified onchange events) but much more. There is just one problem, the observer events will not fire.
I have a form element containing multiple digits, form, and custom widgets. Each is set up something like
<form id="resd_tab_details"dojoType="dojox.form.Manager">
<input type="checkbox" dojoType="dijit.form.CheckBox" name="w01" value="w01"
observer="testfunction1">
</form>
I can attach to the form set values and everything else I have tried, except the events.
What might I be doing wrong?
IIRC an observer is a method name on a form manager, not a standalone function. While you didn't give the complete example to test, your naming suggest that you use a standalone function.
You can define a method on the form manager either inline (see an example in its "tests" subdirectory), or in the code by subclassing a manager.
like this...
js portion
dojo.mixin(dijit.byId('frmMngr1'), {
'prvUpdate':function(){
console.log("clicked a check box");
}
})
html portion:
<form dojoType='dojox.form.Manager' id='frmMngr1'><input dojoType='dijit.form.CheckBox' observer='prvUpdate' checked name='title' />