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/
Related
I'm writing a simple single page application with Express.js. At the bottom of the page is a form, and this form is used to add users to a table, or to update a specific user. The 'submit' button will have a different function depending on the ID of the button at the time it is pressed.
Inside my document.ready function, I have 2 lines of interest:
$('#btnAddUser').on('click', addUser);
$('#btnUpdateUser').on('click', updateUser);
I also have methods that change the value of this id from #btnAddUser to #btnUpdateUser, and vice versa. I can get the ID to change. The issue is that the document.ready function doesn't seem to consider these changes.
For instance, the app starts out with the id #btnAddUser. Then I change it to have the Id #updateUser, and I can see that this works. When I press the button, though, the addUser method fires instead of the updateUser method, and I'm not sure why.
Pointy's answer should work, but this is an X->Y problem. You shouldn't be trying to toggle functionality by changing an element's ID.
Instead, store a value somewhere that says what the button should do, and then use that. You could use a data-* attribute on the button if you want:
<!-- Dynamically change data-action and value as needed -->
<input id="btnUserAction" type="button" data-action="add" value="Add" />
$('#btnUserAction').on('click', function (e) {
var action = ($(this).data("action") === "add") ? addUser : updateUser;
action.call(this, e);
});
Alternatively, you could have two separate buttons and show/hide them. Either approach should work.
You can get the effect you want by using event delegation to set up the handlers:
$(document).on('click', '#btnAddUser', addUser);
$(document).on('click', '#btnUpdateUser', updateUser);
By doing it that way, you defer the inspection of the element until the time a "click" actually happens. With your code, the elements were located at the time the handlers were assigned. After that, it doesn't matter what the "id" value is because the handler is directly associated with the DOM node (via an internal map that jQuery maintains).
This won't work, because the click event is assigned one time when ready function executes. I think the better way is to have two buttons and show/hide them instead of changing the id.
Another way would be to store the action you want in an attribute:
$('#mybutton').click(function() {
var action = $(this).attr("data-action");
if(action == "do_this")
// ...
});
And for changing the action:
$('#mybutton').attr("data-action", "do_this");
I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>
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
Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).
This should be fairly easy but I've tried a few things with no luck.
I have a series of Html.TextBoxFor fields on a page, each inside their own Ajax.BeginRouteForm. Next to each box I have a submit button, and this, when clicked, performs the Ajax update as desired.
I'd like to automate this so that when the user changes a value in a field (the onchange event) the form is submitted the same way it currently using using the submit button.
I tried using the htmlattributes to assign a JavaScript function to the onchange event (as shown below) and this causes the form to submit, but it redirects the page instead of working in the ajax fashion (as opposed to clicking the submit button which works correctly).
#(Html.TextBoxFor(model => answer.Value, new { onchange = "document.forms[" + answer.AnswerID + "].submit()" }));
(fortunately my answer.AnswerID is numeric and matches up with the numeric position of the appropriate form in the forms collection; I was referencing them by name but Razor (or something) was htmlencoding my JavaScript code...)
My only guess is that I'm breaking something by attaching code directly to the onchange event, but I'm at a loss as to the "right" way to hook into that event chain.
If you're willing to use JQuery, it's very simple to do:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Calling submit() on a form will ignore any submit event handlers, as seen here. You can either
call the event handler directly, or
call click() on the submit button for the form.
The former works best if you use onsubmit and return false instead of using the event argument to the callback, because otherwise you need to pass another messy object or something.