We Keep Coding

How to fire change event in jQuery

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());
});
});

using keypress and click for submit

How do I make a click event and keypress work in the same if statement?
Right now I have :
if($('.test').is(':visible;)){
$('button').click(function(e){
..do something here
}else {
..do something here
});
.test is the value field that when the user puts in the value I want them to be able to click the enter key, while they are in this box to submit the information or use the button to do so. This is not in a form, they are all in divs.

So put the logic into a common function and call it for click and keypress.
(function () {
function yourLogic () {
$(".out").text($(".yourInput").val());
}
$("button").on("click", yourLogic);
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) yourLogic();
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="yourInput" />
<button>Click</button>
<div class="out"></div>
or do not use a common function and call the click() event on the button.
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) $("#yourButton").trigger("click");
});

If you got a form, then bind submit handler:
$("form").submit(function(e){
e.preventDefault();
// your event handler here
});
It will be triggered when you press enter to submit the form, and when you click submit button at the same time.

You can use it like this:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});

Or simply click on background
$(document).keypress(function(e) {
if(e.which == 13) {
$('button').trigger("click");
}
});
//if($('.test').is(':visible;)){
$('button').on("click",function(e){
alert("click or enter");
e.stopPropagation();
});
// }
// else {
// ..do something here
//}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>CLick me</button>

How to add a selector for a form submit, only if specific button type caused the form submission

I have the following code:
$(document).ready(function () {
$('body').on("submit", "form", function () {
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});
$('body').on("change", "form", function () {
$('.btn.btn-primary').prop("disabled", false);
$('#progress').hide();
});
});
But how I can force the script to fire only if a button that have .btn.btn-primary caused the form to submit, while if I submit the form using for example button of class .btn.btn-default to not fire the above script?
EDIT
I tried this but now the script will never fire:
$(document).ready(function () {
$(document).on("submit", "form", function () {
//^^ use document instead of body
//check if button has btn.btn-default class and if exist return
if($('button').hasClass('btn.btn-default')){
return;
}
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});
$(document).on("submit", "form", function () {
//$('form').change(function () {
$('.btn.btn-primary').prop("disabled", false);
$('#progress').hide();
});
});

You can return the form if button has class using hasClass
$(document).on("submit", "form", function () {
//^^ use document instead of body
//check if button has btn.btn-default class and if exist return
if($('button').hasClass('btn.btn-default'){
return;
}
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});

You are testing for multiple combined classes, so you must separate the classes in hasClass with a space (not the dot):
// if the button has both classes
if($('button').hasClass('btn btn-default')){
return;
}
e.g. text example: http://jsfiddle.net/80001ra0/

Disable Form submit button if text field filled in

I am trying to implement some Jquery that basically says "If this text field is filled in then disable the submit button so that the form cannot be delivered/submitted"
So far I have come up with this, but it is not working
$(document).ready(function(){
$this = $("#inputValue");
if($this.val().length>0){
$('input[type=submit]').attr('disabled', 'disabled');
}
});
When i fill in the form and include text within the field I am not supposed to the form still gets submitted, what am i doing wrong?
Thanks

Your code only runs once on runtime. After that, it doesn't get checked again.
$(document).ready(function (){
$("#inputValue").on('change', function (){
if($(this).val().length > 0){
$('input[type=submit]').attr('disabled', 'disabled');
} else {
$('input[type=submit]').removeAttr('disabled');
}
});
});
Or, as #thomasfedb suggested:
$(document).ready(function (){
$('#inputValue').on('change', function() {
$("input[type=submit]").prop('disabled', $(this).val().length > 0);
});
});

I'd suggest you to bind a keyup event to do the check every time when user enters something to #inputValue field:
$(document).ready(function() {
$("#inputValue").on("keyup", function() {
$("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
}).trigger("keyup");
});

Since you're using a hidden field it might be better to bind the change event:
$('#inputValue').on('change', function() {
$('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();

Try using this code.
$('input[type=submit]').attr("disabled", true);

Use jQuery to ignore form submit when clicking an input

I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery command to avoid real form submit when input is clicked. I tried to use this:
$('input.searchplease').click(function () {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
});
This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?

Try this:
$('input.searchplease').click(function (e) {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
e.preventDefault();
});

$('input.searchplease').click(function () {
alert('yep');
return false;
});
This should work

You can do this:
$('form').submit(function(){
... ajax things
return false;
});
I would rather not disable the button (and then enable it), unless I have to.

try this way :
$("#id-of-your-form").submit(function() {
$("#id-of-your-submit-input").attr("disabled", true);
// do-ajax
// you can use jquery's ajax complete handler to enable the submit button again
return false;
});

I think this will do the trick:
$('form').submit(function(event) {
event.preventDefault();
$('#submit-button-ID').attr('disabled', 'disabled');
$.ajax({
...,
success: function() {
$('#submit-button-ID').removeAttr('disabled');
}
});
});