I have a UserControl placed in aspx page in asp.net. In this UserControl, I have a RadioButtonList and on change of RadioButtonList item, I want to execute the below jQuery function.
$('#rdlUser').change(function (e) {
alert("change function");
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to take leave?', function(arg){
if (arg == true) {
alert("User wants to take leave");
}
else {
alert("User doesn't want to take leave");
}
});
});
For execute an event you can use trigger("eventname") function with JQuery.
Example
$("#id").keypress(function(){
console.log("input keypress");
});
$("#btn").click(function(){
$("#id").trigger("keypress");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="id"> <button id="btn">Trigger keypress event</button>
UPDATE
With generated HTML you can't trigger event by using $("#generatedid") because element is not in the DOM at the first load.
You can use :
$(document).on("change",".your-radio-button-class",function(){
//Make a test on the value of the select radio
if($(this).val() == "connected")
{
}
else
{
}
});
Simply you can do like this:
$(document).ready(function () {
$('#rdlUser input').change(function () {
alert($(this).val());
});
});
Related
I have a form and on click on an input, I'm adding classes to that input's wrapped div.
To do this, I've made use of blur and executing my function on click. However, on some cases (very rarely) it will work (and add the class). But majority of the time, it doesn't perform the click action (because the console.log("click") doesn't appear).
My thinking is that maybe the browser is conflicting between the blur and click. I have also tried changing click to focus, but still the same results.
Demo:
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue() {
$(input_field).on('blur', function(e) {
var value = $(this).val();
if (value) {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
});
}
$(input_field).click(function() {
checkInputHasValue();
console.log("click");
});
});
i've done some modification in your code .
function checkInputHasValue(e) {
var value = $(e).val()
if (value) {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
}
$(document).on('blur',input_field, function(e) {
checkInputHasValue($(this));
});
$(document).on("click",input_field,function() {
checkInputHasValue($(this));
console.log("click");
});
In order to avoid conflits between events, you would separate the events and your value check. In your code, the blur event may occur multiple times.
The following code seems ok, as far as I can tell ^^
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue(el) {
let target = $(el).closest(".input-wrapper");
var value = $(el).val();
$(target).removeClass("hasData noData");
$(target).addClass(value.length == 0 ? "noData" : "hasData");
console.log("hasData ?", $(target).hasClass("hasData"));
}
$(input_field).on("click", function() {
console.log("click");
checkInputHasValue(this);
});
$(input_field).on("blur", function() {
checkInputHasValue(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="input-wrapper">
<input>
</div>
</form>
I have an input with id pc-verify:
<%= form.text_field :address2, :id => 'pc-verify' , :class => 'required' %>
If the user fills in the value "28028", and without submiting the form, I want to show an alert.
How can I achieve this?
I've tried:
<script>
if ($("#pc-verify").value == "28028") {
alert("hey");
};
</script>
Edit
<script>
$(function(){
$(".pc-verify").on('change', function(e){
if ($(".pc-verify").value == "28028") {
alert("hey");
}
});
});
</script>
Without submitting the form you can use the change event of the input
$("#pc-verify").on('change', function(e){
if ($("#pc-verify").val() == "28028") {
alert("hey");
}
});
This way when the user types the value and leaves the field, the value check will happen. You could also do it on keyup which would check on every key released in that input
$("#pc-verify").on('keyup', function(e){
if ($("#pc-verify").val() == "28028") {
alert("hey");
}
});
You have your script inside a script tag but not inside the document ready handler, in jquery you must do this so that the script is executed only when the page finishes loading
<script>
$(function(){
$("#pc-verify").on('keyup', function(e){
if ($("#pc-verify").val() == "28028") {
alert("hey");
}
});
});
</script>
Use getElementById() and then use the value property if you want native javascript
if (document.getElementById("pc-verify").value == "28028") {
alert("hey");
}
Or, if you are using jQuery, use val()
if ($("#pc-verify").val() == "28028") {
alert("hey");
}
Finally, you can wrap them in a submit handler
$('form').submit(function(){
if ($("#pc-verify").val() == "28028") {
alert("hey");
return false;//to prevent the form from being submitted
}
});
I have a change function in javascript who permit me to do an action when the user click on a chekbox who's name is "nameCheckbox" so i have this script.
$("input[name='nameCheckbox']").each(function()
{
var object = creatObject($(this).val());
$(this).change(function()
{
if($(this).is(':checked'))
{
var object = creatObject($(this).val());
}
else
{
object.remove();
}
});
});
But i want to have another checkbox who permit to check or uncheck all the checkbox who's name is "nameCheckbox" and pass by the function change of all the element. So i have this code.
$("[name='allCheck']").change(function()
{
var selectAll = false;
if($(this).is(":checked"))
{
selectAll = true;
}
$("input[name='nameCheckbox']").each(function()
{
if(selectAll)
{
$(this).prop('checked',true);
}
else
{
$(this).prop('checked',false);
}
//And here i want to do something like $(this).change();
});
});
Thank you
$(this).change() should work, according to change()
Description: Bind an event handler to the "change" JavaScript event,
or trigger that event on an element.
This is effectively the same as using trigger()
$(this).trigger('change');
I have dynamically created a list of checkboxes inside a table:
$("#employeeRegister").append('<tr><td><input type="checkbox" class = "check" name ="chk'+i+'" value="'+this.employeeMobileNo+'$'+this.employeeEmailId+'" </td></tr>');
The above code runs 10 times inside a loop to generate 10 checkboxes dynamically.
I tried using this below code to see if a checkbox is checked.
$(document).ready(function () {
$(document).on("click", "#smsbutton", function () {
console.log('alert');
$("input:checkbox[name=type]:checked").each(function () {
alert(checked);
});
});
});
smsbutton is a button on whose click event I want to get checkboxes that are checked. But it does not work. What do I do to get all checked checkboxes?
Try this:
$("input.check:checked").each(function() {
alert(this.name + " is checked");
});
just use an attribute selector like
$(document).on("click","#smsbutton", function(){
$('input[type="checkbox"]:checked');
console.log($('input[type="checkbox"]:checked').serialize());
});
OR
$(document).on("click","#smsbutton", function(e){
if (e.handled !== true) {
e.handled = true;
e.preventDefault();
$('input[type="checkbox"]:checked').each(function() {
console.log(this.value);
});
}
});
I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>