Binding to a click event to find a child elements input value? - javascript

here is my jsFiddle:
http://jsfiddle.net/YJqAu/
When the user clicks on the toggle, I'd like to know the current value of the input field. You can see from the logs that jQuery is not sending back the input field value. Why is that? Ideas?
Thanks

alert($('input', $(this)).val()); // echoed out 'on' for me

The input has no value, it is a checkbox. To get whether or not the checkbox is checked you can use $(this).is(":checked").

Related

how watch to change angularjs model which checkbox changed from jquery

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.

Resetting the selected in a dropdown list using jquery

I have a HTML select element, with a selected value which has a property of display:none on page load. The display changes to block when a button is clicked.
And the select list is editable.
At this stage, if the user changes the selected value and then wants to reset it to the original one. Is there anyway I can do it?
Solution I thought of:
When the button is clicked, I can use the selectedValue=$(#id).val() to get the originally selected value. When cancelled I can use this selected value to set using $(#id).val(selectedValue)
But it doesn't work because I am not storing the selectedValue.
Is there some way to make this work? Is there some elegant solution for this?
Basically, to make this work, you have to store this value somewhere. Can be in a variable, in a hidden, or you can use .data(), as pointed out in the comments.
On the pageload, you store the value. On the button's click, you get it.
$(document).ready(function() {
$('#slt').data("originalValue", $('#slt').val());
$('#reset').on('click', function() {
$('#slt').val($('#slt').data("originalValue"));
});
});
JSFiddle: http://jsfiddle.net/kf3vtzxh/1/
Hope it helps!
you can use a
<input type="hidden" id="tempval">
and set the value to it during page load with the default this way you can compare it and reset it
like $("#tempval").val() whatever....

ExtJs check if form values has changed

is there a possibility to check if form values has changed in ExtJs?
Thanks
myForm.getForm().items.each(function(field){field.on('change',function(f,n,o){alert('detected! '+f.label+' value changed from '+o+' to '+n);});});
In the above snippet, what you are basically doing is -
Iterate over all fields in the form (myForm.getForm().items.each())
For each field, add a change listener. (field.on(...))
When a field's value is changed, the listener will be invoked with the field info and old and new value.
In the listener, change the alert with the appropriate logic.

how do I grab the value of a checkbox using javascript?

I have a javascript that needs to grab the value of a checkbox when its checked and ignore its value when its not checked.
Right now i'm grabbing the value of the checkbox with:
$("input[name='tos']:checked").val()
It works when you check the box and submit the form, but if you uncheck it and resubmit the form the old value of "agree" is given. So i'm wondering how to I grab the value of a checkbox only when its checked?
http://jsfiddle.net/dqy5H/
Here is an example fiddle. Sorry for the bad first response.
Don't forget that unchecked checkboxes don't travel in form submission. Your code is ok, but you may have the old value stored on server side.
A workaround is tht you could have an <input type="hidden"/> that changes its value when you check/uncheck the checkbox, and read this hidden on the server. Or simply, ask if the checkbox arrived to the server, if it didn't it means it was unchecked.
Hope this helps. Cheers
Two things, in order of least to most helpful :)
A checkbox should never return a value of "agree"! I'm hoping you misspoke.
I'm not sure the jQuery selector you used there is actually valid. As the other fellow mentions, it is but it only ever sets the value when it's checked. Oof, my bad. In any case, I'd still recommend giving the checkbox an ID/unique class, and then do:
var checked = $('#toscheckbox').val();
You can add IDs without messing up the form's submission data, and I prefer them - names are so fiddly.
Try giving it an id and calling .is(':checked') like in this article to see if it is checked or not.
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

jQuery Change event for input and select elements

I am trying to alert something whenever a drop-down box changes and whenever something is typed into an input. I don't think I can use change for input fields? What would you use for input fields? Also, what about input fields of type file? Same thing. Here is what I have so far and it's not working:
$('input#wrapper, select#wrapper').change(function(){
alert('You changed.');
});
You can bind a keypress event to the text box.
$("#wrappertext").bind("keypress", function(){
// your code
});
In your sample you have used the same id for the text box and the select box. Change this also.
when ever something is typed into an
input
change() happens in input type text happens when the value is change on blur...
try keyup() or keydown() instead.

Categories