I have a radio group for a form created with v-for. I need to return the value of the selected button in a function. Here's what I've tried:
Use the v-model value. The issue is it returns the value of the button previously checked. This is due to the function using the current form value before it updates. I tried to figure out how to delay it or call the function after click with no luck, then was reminded of refs.
So I added the ref not realizing it applies the same ref to all inputs. Which of course it does, but this returns an array.
How do I choose the selected button? Is there a way to apply the ref only to the selected button?
<div v-for="mealService in mealServices" :key="mealService.id">
<input #click="setActiveMealService" type="radio" name="meal_type"
:id="mealService.meal_type_id"
:value="mealService.meal_type_id"
v-model="form.meal_type_id"/>
<label :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
</div>
You can use vue function event like this
setActiveMealService(event){
console.log(event.target.value);
let meal_type_id = event.target.value;
}
when I type 'ala' it displays 2 states in suggestions 'alabama' and 'alaska'. Now what I need is as soon as I click on 'alaska'/'alabama' any item in list it should call my method
methodAbc(){
//Some complex logic
alert("Method called.");
}
Sample code link click here
I tried blur, focus, etc events on text box they didnt work way I need. Click do not triggers on item selection it triggers when I click inside text box.
You just need to use the selectItem event from ng-bootstrap's ngbTypeAhead API
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model"
[ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"
(selectItem)="methodABC($event)" />
See updated sample code
I am facing this issue where I manage to disable button but somehow the function didn't run. I suspect that the function stops right after my button is disabled. Any idea that can solve this issue when user click on the button, the button will be disable immediately and the button will runs the function behind. Below are the codes that I'm using for my button.
<INPUT TYPE ="Submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract"
SIZE ="30" onclick="**this.disabled=true;*** CheckGWidth(this.form),
this.form.ContractType.value='N'*" >
Note:
this.disabled=true; To disable this button
CheckGWidth(this.form),this.form.ContractType.value='N'
This is a function that will process this page'
Disabling a button won't stop the rest of the code from firing. I suspect there is something else going on.
This works using document.getElementById instead of this.form:
<form id="form1" action="" method="post">
<INPUT TYPE ="submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract" SIZE ="30" onclick="this.disabled=true;CheckGWidth(this.form);document.getElementById('ContractType').value='N';return false;" />
<INPUT TYPE="text" NAME="ContractType" ID="ContractType" />
</form>
<script>
function CheckGWidth(f){
alert("This works");
}
</script>
JS Fiddle Demo
Use Firebug or Chrome or Developer Tools and check your javascript issues...
I need to give a custom alert to the user when the user places the cursor in a textbox item in asp.net. How do I go about doing this?
Please help.
<input type="text" onfocus="alert('Got focus!');"/>
or a bit more involved:
<script>
function InputFocus()
{
var inp = document.getElementById('myInput');
inp.onfocus = null;
alert('Got focus - ' + inp.id);
setTimeout(function() { inp.onfocus = InputFocus; }, 100);
}
</script>
<input type="text" value="one"/>
<input id="myInput" type="text" onfocus="InputFocus();" value="two"/>
<input type="text" value="three"/>
Javascript on focus event.
On Page_Load or Page_Init method add this code:
mytextBox.Attributes.Add("onfocus", "enterTextBox();")
Then on the page add a script tag with this :
function enterTextBox() {
alert('hello');
}
the two events that you need are onfocus (elemant has focus and can accept input) and onblur which gets fired when leaving the element (say a text box). Disabled elements cannot have focus so these events will not occur in that case.
The Javascript checkbox script (by ryanfait) worked beautifully when I used it at first. Then I needed to alter the form I made so that asp.net could process the form, but now the checkboxes are default.
Is there a way to alter the script to make it work on the asp:checkbox?
I call the function like so:
$(document).ready(function() {
$('input[type=checkbox]').checkbox();
});
And here is the actual javascript.
I have two different types of checkboxes on my page at the moment, one <asp:Checkbox ... /> and one <input type="checkbox" ... />. The second one gets styled, the asp checkbox doesn't...
I haven't contacted Ryan Fait yet, as I hoped this was a common "bug".
EDIT:
The way the script works is, it finds all elements with class="styled", hides it and then puts a span next to the element. Somehow in my sourcecode, for the asp:checkbox this happens too early I think. Look:
<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span>
The span is there, visible and all, which it should not (I believe, as the first checkbox shows up in the style I want it to be, the second doesn't).
So far, I found a part of the problem. The javascript cannot change the asp checkbox somehow, but when I manually add the span the javascript is supposed to create, the checkbox doesn't work as a checkbox anymore. I added some details in my answer below.
Set an ID on your checkbox and then reference it by that ID, like so:
<asp:checkbox id="mycheck" />
Then reference it like this:
$('#mycheck').checkbox();
If that doesn't work, do what many, many web developers before you have done: download Firefox, install Firebug, and check your selector logic in the console. I find it's always easier to develop in Firefox, even when my target platform is IE.
I found part of the answer.
When I add the span the plugin creates manually like so:
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ... /></span>
I do get the nicely looking checkbox UNDERNEATH the actual checkbox!
However, the styled box is not interactive. It doesn't change when I click it or hover over it nor does it register the click. It's basically not a checkbox anymore, just a goodlooking square. The actual asp checkbox that shows up does register clicks, but it's the ugly standard one.
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span>
The visibility: hidden makes the "real" checkbox dissappear and leaves the goodlooking yet broken one.
Got it.
Forget about the RyanFait Solution, this one works on ALL checkboxes. :D
var boxes;
var imgCheck = 'Images/checkbox-aangevinkt.png';
var imgUncheck = 'Images/checkbox.png';
function replaceChecks(){
boxes = document.getElementsByTagName('input');
for(var i=0; i < boxes.length; i++) {
if(boxes[i].getAttribute('type') == 'checkbox') {
var img = document.createElement('img');
if(boxes[i].checked) {
img.src = imgCheck;
} else {
img.src = imgUncheck;
}
img.id = 'checkImage'+i;
img.onclick = new Function('checkChange('+i+')');
boxes[i].parentNode.insertBefore(img, boxes[i]);
boxes[i].style.display='none';
}
}
}
function checkChange(i) {
if(boxes[i].checked) {
boxes[i].checked = '';
document.getElementById('checkImage'+i).src=imgUncheck;
} else {
boxes[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgCheck;
}
}
I think that your problem could be caused by the fact that asp:CheckBox controls are automatically wrapped in a span tag by default, and setting the CssClass attribute on the asp:CheckBox control actually adds the class to the span (not the input) tag.
You can set the class on the input tag using the 'InputAttributes' as follows:
chkMyCheckbox.InputAttributes.Add("class","styled");
...
<asp:checkbox id="chkMyCheckbox" />
This should then allow you to target the checkbox with your existing JavaScript.
You don't need to use the 'type' attribute. Does the following work for you?
$(document).ready(function() {
$('input:checkbox').....etc
});