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.
Related
I have a form with a series of radio items. If a user chooses a specific entry on one of the radio items (missing item) I use JQuery to add a bootstrap is-invalid class to two specific inputs on the form along with a label asking them to add detail and disable the submit button to stop them submitting the form.
$(function () {
$("input[name=optradio]:radio").click(function () {
if ($('input[name=optradio]:checked').val() == "2") {
$('textarea[name=sentTo]').addClass('is-invalid');
$('input[name=dateSent]').addClass('is-invalid');
$('#removedMSG').text("You must update this field prior to saving");
$('#removedMSG2').text("You must update this field prior to saving");
$('#submit').prop('disabled', true);
} else {
$('textarea[name=sentTo]').removeClass('is-invalid');
$('input[name=dateSent]').removeClass('is-invalid');
$('#submit').prop('disabled', false);
}
});
});
I would like to add further checks to make sure the user updates the two inputs (ones a textarea) before I re-enable the submit button.
I know I can use the following to check for input changes
$("textarea[name=sentTo]").on("input", function(){
$('textarea[name=sentTo]').removeClass('is-invalid');
});
This works fine. However I am at a loss how to integrate it all together:
So basically user selects the radio, is-invalid gets added to 2 input fields and the submit button disabled - user completes 2 fields as required and only when both fields have been updated do we then re-enable the submit button.
I am thinking I need an if statement but I can't seem to get the code right.
I tried
if `$("textarea[name=sentTo]").on("input") && $("textarea[name=dateSent]").on("input")`
but this doesnt work
Thanks to Mamum I am using the code below.
$(function () {
$('input[name=optradio]:radio').click(function () {
if ($('input[name=optradio]:checked').val() == "2") {
$('textarea[name=sentTo]').addClass('is-invalid');
$('input[name=dateSent]').addClass('is-invalid');
$('#removedMSG').text("You must update this field prior to saving");
$('#removedMSG2').text("You must update this field prior to saving");
$('#submit').prop('disabled', true);
$('#submit').addClass('btn-danger');
$('#submit').removeClass('btn-primary');
} else {
$('textarea[name=sentTo]').removeClass('is-invalid');
$('input[name=dateSent]').removeClass('is-invalid');
$('#submit').prop('disabled', false);
$('#submit').addClass('btn-primary');
$('#submit').removeClass('btn-danger');
}
});
});
var sentTo = false;
var dateSent = false;
$("textarea[name=sentTo], input[name=dateSent]").on("input", function(){
if($(this).attr('name') == 'sentTo') {
sentTo = true;
$(this).removeClass('is-invalid');
}
if($(this).attr('name') == 'dateSent') {
dateSent = true;
$(this).removeClass('is-invalid');
}
if(sentTo && dateSent){
$('#submit').prop('disabled', false);
$('#submit').addClass('btn-primary');
$('#submit').removeClass('btn-danger');
}
});
You can pass multiple selector separated by comma and use this keyword to refer the current element inside the event handler function:
var sentTo = dateSent = false;
$("textarea[name=sentTo], textarea[name=dateSent]").on("input", function(){
if($(this).attr('name') == 'sentTo') sentTo = true; //true for sentTo
if($(this).attr('name') == 'dateSent') dateSent = true;//true for dateSent
if(sentTo && dateSent){ // if both are true
$(this).removeClass('is-invalid');
sentTo = dateSent = false;
}
});
In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});
So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>
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);
}
});
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();
}
});
I want my validation control to be enable/disable with javascript. When I click on radiobutton list(yes/no), 2-3 rows becomes visible. Once Yes is clicked, then and only then user has to enter input for the textbox provided in that rows. For this I have kept require field validators. I am disabling all of them on page load and again enabling in javascript using ValidatorEnable(control, enable). But in this case, when ever I click on radio button list the rows becomes visible and at the same time validation control shows error message. I want error message to be seen on the submit button click only. Till then no message should appear.
How can I do so..?
Add code below right after ValidatorEnable(control, enable) method call:
if (control.style.visibility == "visible") {
control.style.visibility = "hidden";
} else {
control.style.display = "none";
}
function HasPageValidators() {
var hasValidators = false;
try {
if (Page_Validators.length > 0) {
hasValidators = true;
}
}
catch (error) {
}
return hasValidators;
}
function ValidationGroupEnable(validationGroupName, isEnable) {
if (HasPageValidators()) {
for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].validationGroup == validationGroupName) {
ValidatorEnable(Page_Validators[i], isEnable);
}
}
}
}
Then call:
ValidationGroupEnable('validationgroup', false);
i think it will help you....