Develop Reference

calling an event before button check inside a view using jquery

i have view containing four radio button and two button.
i have written code on click of button , but i want to check condition of radio button before button click but not able to find any idea how to do
$(document).on("click", "#btncrtn", function (e) {
var optname="";
var checkedInput = $('input[name="ctype"]:checked').length;
if(checkedInput == 0) {
alert("Please Select one case type");
return;
}
else {
if ($('#opn').is(':checked')) {
optname="O";
$('#CaseIdC').hide();
}
if ($('#lit').is(':checked')) {
optname="L";
$('#CaseIdC').hide();
}
if ($('#cun').is(':checked')) {
optname="C";
$('#CaseIdC').hide();
}
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
optname="T";
if ($('#CaseIdtxt').val()=="")
{
alert("Please enter aims id");
return;
}
}
});
i want a radio button with id #oth to be checked apart from condition #btncrtn click
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
});
how to achieve it.

How to show all list items again that were previously hidden by jQuery?

I have a search box that filters results and hides them if they don't match the filter:
$('#box_street').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#street__list > .list__item').show();
} else {
$('#street__list > .list__item').each(function() {
var text = ($(this).text() + $(this).data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show()
} else {
$(this).hide();
}
});
};
});
Now, I added a function that clear the search box with $('.search__filter').val(''); The problem is, once that runs the items that were previously hidden don't show again. The form input resets ok, but the items are still hidden.
How can I show them all again?

Once the search input is empty, all you have to do is trigger the keyup event, as you already have a condition that shows all the elements
$('#reset_button').on('click', function() {
$('.search__filter').val('');
// reset form ... then
$('#box_street').trigger('keyup');
// or you could do it yourself directly with :
// $('#street__list > .list__item').show();
});

Button automatically enables/disables when input is changed

I want to disable/enable a button based on one input. It's simple, if the input is "", disable the button, otherwise, enable it.
$('#searchBarTextbox').on('change', function () {
if ($('#searchBarTextbox').val() !== "") {
$('#btnSearchOk').prop('disabled', false);
} else {
$('#btnSearchOk').prop('disabled', true);
}
});
This works ok, but it enables/disables the button only after the user has clicked outside the text box. Is it possible to have button disable/enable while user is writing in the text box not having them move outside. Can I bind on keyup event maybe ?

Try using input event for doing this,
$('#searchBarTextbox').on('input', function () {
$('#btnSearchOk').prop('disabled', $.trim($('#searchBarTextbox').val()) === "");
});

Try using keyup instead of change
Live demo
$('#searchBarTextbox').keyup(function () {
if ($('#searchBarTextbox').val() !== "") {
$('#btnSearchOk').prop('disabled', false);
} else {
$('#btnSearchOk').prop('disabled', true);
}
});

jquery masked input error when using tab

i'm using jquery.maskedinput-1.2.2.js and there is a bug when i tab the textbox with a masked input
heres my code:
$(document).ready(function(){
$default = $('input[type="text"].required');
$default.live('focus.checkDefault', function() {
var el = $(this);
if (el.hasClass('default')) {
el.removeClass('default').val('');
}
if (el.attr('name') === 'landline_number') {
$(this).mask('(99)(99)999-9999', {placeholder:'_'});
}
if (el.attr('name') === 'mobile_number') {
$(this).mask('(99)999-999-9999', {placeholder:'_'});
}
if (el.attr('name') === 'secondary_number') {
$(this).mask('(99)999-999-9999', {placeholder:'_'});
}
});
});
when i tab at the textbox landline_number to mobile_number, the landline_number masked input will be bug.

Seem like you want to use focus event on .checkDefault element, if so you can do:
$default.on('focus', '.checkDefault', function() {

selecting a element which has a class with jquery hasClass

I have four div with class name .s-list. When the user clicks on any of those divs .selected class is applied on the div.
What I am trying to do is while clicking on a button, check all those divs and if any one of them has a class .selected submit a form, else if none of the div has a class .selected show a error message.
The problem:
It works for the first time, but again if I click the button it shows the error message and submit the form when the div already has the class selected.
$("#pp-btn").click(function() {
$(".s-list").each(function (i) {
if(!$(this).hasClass('selected'))
{
$("#p-msg").show();
}
else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});
});
I don't want the message to be displayed if any 1 of the div has class 'selected'.
Help please...

Use a jQuery selector to check if any s-list element has a selected class;
$('#pp-btn').click(function (e) {
if ($('.s-list.selected').length == 0) {
/* No `selected` class on any `s-list` */
$('#p-msg').show();
} else {
/* At least one `s-list` has the additional `selected` class */
$('#plans-form').attr('action', $('.s-list.selected').attr('links'));
}
});

$("#pp-btn").on('click',function() {
if($(".s-list.selected").length){
//there are selected items
} else {
//there is none
}
});

You could check like this :
if ($(".s-list.selected").length == 0) { $("#p-msg").show(); }
else {
$('#plats-form').attr('action', $('.s-list.selected').attr('links'));
$("#p-msg").hide();
}

$("#pp-btn").click(function() {
var submit = false;
$(".s-list").each(function (i) {
if($(this).hasClass('selected')) {
submit = true;
}
});
if(submit) {
$("#p-msg").show();
} else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});