In a table row I have the following inputs button, select, date.
The date field is initially disabled, selecting an option other than "selected" enables the date field using
onchange="functionName(id);"
Clicking the button adds a row. After adding a new row, if I use
element.addEventListener('onchange',function() { functionName(id); });
The onchange doesn't appear in the code, Developer Tools in Chrome. If I use
element.setAttribute("onchange", function(){functionName(id);});
it does appear in the code as
onchange="function (){ReqDate(id);}"
but doesn't execute.
In HTML, the onchange attribute represents what happens on the change event. So in the javascript, you should use addEventListener change, not onchange.
Credit to epascarello in the comments.
Passing the object id as the parameter like so
onchange="functionName(id);"
worked for the initial row, but not for a subsequent (added) row.
"this" works
onchange = function(){functionName(this.id);};
Thanks for the help.
Related
I use https://github.com/Dimox/jQueryFormStyler for styling form inputs.
I set the property ng-model="c.model.acept".
If I click on "styled checkbox", then input gets to property "checked", but the angular model still has the old value.
I tried to trigger the change event with no result.
If I trigger the click event, then the checkbox gets changed twice (once from click, and then the second time from the triggered click event).
How to fix it?
You can not change "ng-model" of particular input field conditionally.
In this condition what you can do is, keep two input field and use "ng-show" or "ng-if" attribute to show & hide input field conditionally.
Hope this will hep you.
I have a dropdown. Initially it is empty and at some point it is filled with elements dynamically. When the user choose an option the onchange event is triggered. This works when there are at least two values in the dropdown.
What I want to accomplish is, when there is only one element in the dropdown and the user clicks it, some event to be triggered. I tried the onclick event but this does not worked on the dropdown.
Here is my jsfiddle:
http://jsfiddle.net/MwHNd/551/
Some option may be to have defaut value like "Choose an option" in the dropdown and this way the onchange will always trigger. Is there are way to do it without this option?
Documentation is your friend:
http://www.kendoui.com/documentation/ui-widgets/dropdownlist/events.aspx
Example: http://jsfiddle.net/MwHNd/553/
well its not as simple as that, there are two aways you can go about doing this, both requires if statements..
you can either "dyamically" in js see how many options there are in a selector and tell it to change the element to a button OR do a focus function with jquery if there is only one element in your dropdown
$selector.focus(function(){
then whatever you wants etc
also you said you would not want to do this with a drop down. use a javascript function to click the event plus the selected index of the option values you want
function change(){
document.getElementById("your-element").selectedIndex =2;
}
function changeit(){
document.getElementById("your element").selectedIndex =1;
}
function changeitup(){
document.getElementById("your element").selectedIndex =0;
}
so if you wanted the selected index plus the event you want to do
<input type='button' onclick="change();otherfunction()"> would give you the selected index plus the function you wanted originally
I have a page where a series of checkboxes are displayed next entries from a database, they each have an onClick event to do an Ajax write of their value to the database.
I want to have a button on the form that toggles all the checkboxes, so I used the following function/jQuery:
function toggle_chk_links(){
$(".chk_user_link").click();
};
It works fine visually, the only problem is that although it triggers the onClick event as required the checkbox is read with it's old value, so the database gets the opposite value to the one required! This is the line reading the checkbox in its' onClick event:
active=Number($("#chk_brandlink"+brand_ID).prop("checked"));
I need users to be able to manually click on each checkbox, as well as toggle them all, ideally using one onClick function call. Any suggestions?
The easiest solution is to handle the onchange event instead of the onclick event.
$(".chk_user_link").change(function() {
// your change handler
});
Example: http://jsfiddle.net/7zHRm/1/
I have a table in which there is a button in one cell. Now when I am disabling that cell, the cell gets disabled but on clicking upon that cell, button click event is happening. So instead of disabling the cell, I disabled the button. Now everything working fine, but I wanted to know that why on disabling the cell, button click event was getting fired?
my code snippet is like below:
To disable cell-(previous approach) ---
grid.rows[i].cells[1].disabled=true;
To disable button:(new approach)--
grid.rows[i].cells[1].firstChild.disabled=true;
From the html4 spec:
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
Looking at the html4 spec for td, there is nothing saying disabled is valid.
So that means setting disabled on the table's cell does nothing. You need to set individually on the form elements inside of the cell.
What you are doing now is randomly setting some property on the cell that means nothing to it. It is the same thing as setting grid.rows[i].cells[1].foobar=true;. It means nothing, but the cell has it attached to it.
I think it maybe happening because when u disable the cell then the button element does not get disabled. It still remains enabled, unlike the cell.
On this page:
http://www.blackdownluxurylettings.co.uk/place_booking/2010-3-18,2
I am using an onchange event on the "number of days" select box to update the "departure date" field.
But currently nothing is happening.
Any ideas?
Just looking at it quickly: wouldn't you want the ONCHANGE event attached to the SELECT tag rather than the individual options?
You can bind it this way using JQuery:
$("#ddlNumberOfDays").bind('change', mainPharmacy_Change)
Maybe for javascript, you should just try 'change'.
If I recall correctly, the regular Javascript onChange event only fires once the select box loses focus AND it's contents have been changed. I don't know how jQuery achieves it, but their change method will fire whenever the contents are updated.
Also, I get the following error in my Javascript console when loading your page:
[cycle] terminating; zero elements found by selector