I have previously successfully implement this behaviour but for some reason it's not working. I am fairly new to Vue.js and I might be missing something.
I have two radio buttons as such:
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmLoginRadio" value="true" v-model="loginRadio" checked>
No, I am new to this site
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmRegisterRadio" value="false" v-model="loginRadio">
Yes, my password is:
</label>
</div>
They both have a v-model of loginRadio which is initially set to false. When the second radio button is clicked, the disabled input button below should be enabled again.
<input type="password" class="form-control" name="password" :disabled="loginRadio">
However, for some reason, the only thing that is happening is this (when I used Chrome Debug)
<input type="password" class="form-control" name="password" disabled="false">
and the element stays disabled. What am I doing wrong?
You did not use v-bind:for the value attribute of the input buttons
Therefore, loginRadio does not contain boolean values true or false (depending on selection), but strings: "true" and "false"
it should be enough to properly bind the value attribute on both input buttons:
:value="true"
:value="false"
Related
I need set a default Radio button selected on opencart 2.3 using javascript
Normal
Selected
<div class="radio" style="margin-top: -5px;"><!--EOF Related Options-->
<!--BOF Related Options--><label for="option-value-2492"><!--EOF Related Options-->
<!--BOF Related Options-->
<input type="radio" name="option[590]" value="2492" id="option-value-2492" master-option-value="0" option-value="115">
<!--EOF Related Options-->
Comprar par </label>
</div>
Add checked="checked"
<input type="radio" name="option[590]" value="2492" id="option-value-2492" master-option-value="0" option-value="115" checked="checked">
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.
I tried to find the x-path of a text field username and password, but it keeps on changing dynamically.I won't be able to use starts-with or contains in a findelement using x-path. Here's the HTML DOM-
<div id="contents">
<h1 style="white-space:pre; width:80px; float:left;line-height:35px;">Login</h1>
<span style="float:left; padding-top:13px; COLOR:#990033; font-weight:bold;"> Student | Parent | Faculty</span>
<div class="form-elements">
<div class="form-elements">
<div class="form-elements">
<div class="label-txt">Password</div>
<input id="rcnr2uew1m0rkikeaaniwk" type="password" style="display:none;" name="rcnr2uew1m0rkikeaaniwk"/>
<input id="ko2xs123ebqyoluh15bulu" type="password" style="display:none;" name="ko2xs123ebqyoluh15bulu"/>
<input id="cuouek4bfz41etm4hroj0r" type="password" style="display:none;" name="cuouek4bfz41etm4hroj0r"/>
<input id="u2ta3gv2o2ce0azx5plpuh" type="password" name="u2ta3gv2o2ce0azx5plpuh"/>
<input id="g03nwjuzhqnkuwgsl4q2mu" type="password" style="display:none;" name="g03nwjuzhqnkuwgsl4q2mu"/>
<input id="gddwv4z3amojk0yvoxi2v4" type="password" style="display:none;" name="gddwv4z3amojk0yvoxi2v4"/>
<input id="kxecmkho2vf1vcfb42icjr" type="password" style="display:none;" name="kxecmkho2vf1vcfb42icjr"/>
<span id="ctl04" style="color:Red;visibility:hidden;">*</span>
</div>
I tried to find the input[4] with no style.
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[4]
Next time how it changes-
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[17]
id and name of the input also keeps on changing without any common trait
You can do it by locating sibling of the User name label that is displayed, i.e. without attribute style="display:none;"
User Name
"//div[contains(text(), 'User Name')]/following-sibling::input[not(#style='display:none;')]"
Password
"//div[contains(text(), 'Password')]/following-sibling::input[not(#style='display:none;')]"
Or something similar using type attribute:
//input[#type='password'][not(#style)]
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).
let say a site has 2 forms: one search form and the other is a registration form...
<form>
Search: <input type="text" name="s">
<input type="hidden" name="a" value="search">
<input type="submit" value="Search">
</form>
[..]website content blabla[...]
<h2>Registration</h2>
<form>
E-Mail: <input type="text" name="email">
<input type="hidden" name="a" value="reg">
<input type="submit" value="Register">
</form>
If I submit a form, I want to know to which form the clicked submit button belongs. GetElementbyId is not possible because the id is not always available. I want to get the index. Any ideas? (WebBrowser Element in VB.NET or C#)
You cant refer to Form object of Input Element e.g btn.Form.Name should work; give it a try
http://msdn.microsoft.com/en-us/library/aa703812(v=vs.85).aspx (reference to IHTMLInputElement::form Property)