I have radio button list and inside one of its itemlists I have html input type="text".
When I select the option with input text field, and then click on the text field the focus gets lost and focus shifts to radio button list item that is selected.
Here is the display what I am trying to achieve
When I click on "Dealer Name" the focus gets shifted to Dealer radio button and so user can not type "Dealer Name"
This above behavior is happening in firefox. In Chrome it's not causing any problem
UPDATED:
This is the code I used when selected index change
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
I have tried using following code to change focus
function fc(elem) {
$("#rOD").focusout();
$(elem).focus();
}
And this is the markup
<asp:RadioButtonList Font-Size="Small" ID="rOD" data-toggle="popover" title="Field required"
data-content="Please Select" ClientIDMode="Static" runat="server"
RepeatDirection="Vertical">
<asp:ListItem Text="Owner" Value="Owner">Owner</asp:ListItem>
<asp:ListItem Text="Dealer" Value="Dealer">Dealer  <input type="text" id="txtDName" onclick="return fc(this);" placeholder="Dealer Name" disabled="disabled" data-toggle="popover" title="Field required" data-content="Please Select" style="width:150px" /> </asp:ListItem>
</asp:RadioButtonList>
try this jQuery code:-
$("#rOD").click(function (e) {
$("#rOD input:checked").next().find('input').focus();
});
$("#rOD").change(function (e) {
if ($("#rOD input:checked").val() == "Dealer") {
$("#txtDName").removeAttr("disabled");
e.preventDefault();
} else {
$("#txtDName").attr("disabled", "disabled");
}
});
Use this code,
$(document).ready(function () {
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); $("#txtDName").focus(); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
});
function fc(elem) {
$(elem).focus();
}
here is the result,
Related
I have radio buttons on click of which I want to perform some actions. The change events are not working and it shows following error,
Uncaught referenceerror: RightClick is not defined at onload
Here is my code that I am using, Please can I have some insight on this error.
$(document).ready(function() {
console.log('In jQuery');
$('#rblKnowAboutCourse').change(function() {
console.log('In jQuery-On Click2-Sarvesh');
if ($(this).val() == "Other") {
$("#TextBox1").prop("disabled", false);
} else {
$("#TextBox1").prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click: <input type="radio" id="rblKnowAboutCourse" />
<input type="text" id="TextBox1" value="" placeholder="textbox" />
The error shows link for this line in html
<body style="font-size:11px" onload="RightClick.init();">
Here is the radios i am using,
<asp:RadioButtonList ID="rblKnowAboutCourse" runat="server" Font-Size="Medium" Height="30px" Width="708px" TextAlign="Right" RepeatDirection="Horizontal">
<asp:ListItem>Website</asp:ListItem>
<asp:ListItem>Friends</asp:ListItem>
<asp:ListItem>Your Company</asp:ListItem>
<asp:ListItem>Online Ad</asp:ListItem>
<asp:ListItem>other</asp:ListItem>
</asp:RadioButtonList>
Thank you for the concern everyone has shown. My issue resolved just by changing the id to class.
I have an ASP Webform website and one a page I have a checkboxlist which has an 'Other' option. When the user checks this checkbox, an additional textbox is displayed. All this is working fine but the issue I am having is that, if the user unchecks the checkbox, it doesn't clear it.
The below code shows what I have
$(function ()
{
$("input[name='ctl00$MainContent$Step04OtherField']").click(function ()
{
ToggleSection();
});
ToggleSection();
});
function ToggleSection()
{
if ($("#MainContent_Browsers_5").is(":checked"))
{
$("#Step04OtherFieldDiv").show();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "visible";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = true;
}
else
{
$("#Step04OtherFieldDiv").hide();
$("#MainContent_Step04OtherField").val("");
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "hidden";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = false;
}
}
HTML for checkboxlist
<div class="row">
<div class="col-xs-offset-0 col-sm-offset-5 col-sm-2">
<asp:CheckBoxList runat="server" id="Browsers" CssClass="CheckboxList">
<asp:ListItem Text="All browsers" Value="All browsers"></asp:ListItem>
<asp:ListItem Text="Internet explorer (IE)" Value="Internet explorer (IE)"></asp:ListItem>
<asp:ListItem Text="Firefox (FF)" Value="Firefox (FF)"></asp:ListItem>
<asp:ListItem Text="Chrome" Value="Chrome"></asp:ListItem>
<asp:ListItem Text="Safari" Value="Safari"></asp:ListItem>
<asp:ListItem Text="Other" Value="Other"></asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
<div class="row">
<div class="col-xs-offset-0 col-sm-offset-4 col-sm-8">
<asp:CustomValidator Display="Dynamic" runat="server" ID="custBrowserCheckboxselected" ForeColor="Red" ErrorMessage="Please select at least one browser for us to check the website on." ClientValidationFunction="BrowserCheckbox_ClientValidate" />
</div>
</div>
<div class="form-group" id="Step04OtherFieldDiv">
<asp:Label ID="Step04OtherFieldLabel" class="col-sm-4 control-label" runat="server" Text="Please specify *" AssociatedControlID="Step04OtherField"></asp:Label>
<div class="col-sm-4">
<asp:TextBox ID="Step04OtherField" runat="server" class="form-control" style="max-width: 100%" TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
<div class="col-sm-offset-4 col-sm-8">
<asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep04OtherFieldErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step04OtherField" ErrorMessage="Please all browsers you would like the website checked on." />
</div>
</div>
But the $("#MainContent_Step04OtherField").val("") doesn't seem to be working.
Also if there a better way of writing the above I'm up for that as I think it's a little messy but I couldn't get it working any other way; as it's a checkboxlist I could add individual ids to each one.
I believe you are binding the click event to the textbox instead of the checkbox.
This code works:
$(function() {
$("#chk").click(function() {
ToggleSection();
});
ToggleSection();
});
function ToggleSection() {
var $txt = $("#txt"); // Save textbox's reference
// The right way to check if a checkbox is checked is with .prop method
if ($("#chk").prop("checked")) {
$txt.prop("disabled", false);
}
else {
$txt.prop("disabled", true).val("");
}
}
Test it here.
In the example I enable / disable the field so that you can see that the value is clear. Here it is the code to show / hide:
var $chk;
$(function() {
$("#checks :checkbox").each(function() {
if ($(this).val() == "other")
$chk = $(this);
});
$chk.click(function() {
ToggleSection();
});
ToggleSection();
});
function ToggleSection() {
var $txt = $("#txt"); // Save textbox's reference
// The right way to check if a checkbox is checked is with .prop method
if ($chk.prop("checked")) {
$txt.show();
}
else {
alert("val: " + $txt.val());
$txt.hide().val("");
alert("val: " + $txt.val());
}
}
Fixed using the below code
$(document).ready(function ()
{
// Initially hide the 'Other' field row when page is loaded
if ($("#MainContent_Browsers_5").is(":checked"))
{
$('#Step04OtherFieldDiv').show();
}
else
{
$('#Step04OtherFieldDiv').hide();
}
$('#MainContent_Browsers_5').change(function ()
{
if (this.checked)
{
$('#Step04OtherFieldDiv').show();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "visible";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = true;
}
else
{
$('#Step04OtherFieldDiv').hide();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "hidden";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = false;
$("#MainContent_Step04OtherField").val('');
}
});
});
I have some markup as shown below
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="True" /></span>
<asp:TextBox ID="equitytrading" runat="server" CssClass="form-control bootstrap-default" text="Equity Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="optionstrading" runat="server" CssClass="form-control bootstrap-default" text="Options Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="futurestrading" runat="server" CssClass="form-control bootstrap-default" text="Futures Trading" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
I am trying to change the background color of the span that holds the check box. when it is checked. Can't seem to get anything to work. Here is my latest attempt, which I really think should work since the span is the parent of the checkbox..
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if ($(this).checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});
Update:
The working version is as follows, thanks to those who replied for the help.
$(document).ready(function () {
var checkboxes = $("input[type='checkbox']");
checkboxes.on('click',function() {
//per chriz suggestion for chaining
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info').addClass('bootstrap-addon-success');
} else {
$(this).parent().removeClass('bootstrap-addon-success').addClass('bootstrap-addon-info');
}
});
checkboxes.each(function () {
//so on page load the checked ones that were set in the html had the success class
if (this.checked) {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
}
});
});
You syntax is incorrect. $(this) is a jQuery object it doesn't have checked property. So you can use this.checked or $(this).prop('checked')
Use
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
OR
You can simply use
$("input[type='checkbox']:checked").each(function() {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
});
EDIT:
You can also try
$("input[type='checkbox']").change(function() {
if(this.checked)
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
else
$(this).parent().toggleClass('bootstrap-addon-success bootstrap-addon-info');
}).change();
Rather than using .each on all checkboxes. Try to get checkboxes which are checked so that u wont even need to use if
$("input[type='checkbox']:checked").each(function() {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
});
a little simpler way
$("input[type='checkbox']:checked").each(function() {
$(this).parent().addClass('bootstrap-addon-succes').removeClass('bootstrap-addon-info');
});
Use this instead $(this)
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});
I am using twitter bootstrap validation class to get success and error in a text-box. I have two text boxes so when a user clicks on any text-box jquery should first check if the text-box is empty if its empty then red colour should appear around the box. When a user start entering data the text-box should change the colour to green. I would like to apply this technique across all the text-boxes. This is what I have done but when running a page it is not working?:
<div class="test">
<div class="form-group has-success">
</div>
</div>
<div class="form-group has-error">
</div>
<div id="pt" class="tab-pane active">
<asp:Label ID="label1" CssClass="form-group" runat="server" Text="Name:"></asp:Label>
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" ></asp:TextBox>
<asp:Label ID="label2" CssClass="form-group" runat="server" Text="Surname:"></asp:Label>
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server"></asp:TextBox>
</div>
Jquery
$("TextBox").click(function () {
if ($.trim($('TextBox').val()) == "") {
$('.form-group has-error');
}
else if ($.trim($('TextBox').val()) != "") {
$('.form-group has-success');
}
});
This is the website i have used to get validation status: bootstrap example which i am following click here under form -> control status
try this:
$(function(){
$("#TextBox1").on("click", function(){
if($("#TextBox1").val().length === 0){
$("#TextBox1").parent().addClass("has-error");
}
});
$("#TextBox1").on("keydown", function(){
if($("#TextBox1").parent().hasClass("has-error")){
$("#TextBox1").parent().removeClass("has-error");
$("#TextBox1").parent().addClass("has-success");
}
});
$("#TextBox2").on("click", function(){
if($("#TextBox2").val().length === 0){
$("#TextBox2").parent().addClass("has-error");
}
});
$("#TextBox2").on("keydown", function(){
if($("#TextBox2").parent().hasClass("has-error")){
$("#TextBox2").parent().removeClass("has-error");
$("#TextBox2").parent().addClass("has-success");
}
});
});
Your HTML seems to be malformed.
I am not sure I understood correctly your question, but if you want to display the divs, then your code should work like that:
$("#tbDepartment").click(function () {
if ($.trim($('#tbDepartment').val()) == "") {
$('.form-group has-error').show();
}
else if ($.trim($('#tbDepartment').val()) != "") {
$('.form-group has-success').show();
}
});
I have few checkboxes , out of which one is "Select All" and the others are some standalone's.
The requirement is that
Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
If he unchecks the "Select All" checkbox , then everything will be unchecked.
And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
If all the four check boxes are checked, then the "Select All" will be checked.
I am using JQuery. I am able to achieve the first two but not the last two. My code is as under
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check / UnCheck All Checkbox </TITLE>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function SelectDeselect()
{
if(document.getElementById('chkSelectDeselectAll').checked) $("INPUT[type='checkbox']").attr('checked',true);
else $("INPUT[type='checkbox']").attr('checked',false);
}
</script>
</HEAD>
<BODY>
<input type="checkbox" id="chkSelectDeselectAll" onClick="SelectDeselect()">Select All
<br><br>
Select your hobbies:
<br><br>
<input type="checkbox" id="chkTV">Watching T.V.<br><br>
<input type="checkbox" id="chkGardening">Gardening<br><br>
<input type="checkbox" id="chkSwimming">Swimming<br><br>
<input type="checkbox" id="chkChess">Playing Chess<br><br>
</BODY>
</HTML>
Need help to implement the rest.
Thanks
$(document).ready(function() {
$('#main').change(function() {
if ($(this).is(':checked')) {
$('input[name="hi[]"]:checkbox').attr('checked', true);
} else {
$('input[name="hi[]"]:checkbox').attr('checked', false);
}
});
$('input[name="hi[]"]:checkbox').change(function() {
var chkLength = $('input[name="hi[]"]:checkbox').length;
var checkedLen = $('input[name="hi[]"]:checkbox:checked').length;
if (chkLength == checkedLen) {
$('#main').attr('checked', true);
} else {
$('#main').attr('checked', false);
}
});
});
CHeck Fiddle: http://jsfiddle.net/4vKwm/10/
maybe it gives some explanations
Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
$("#chkSelectDeselectAll").click(function(){
if($("#chkSelectDeselectAll").is(':checked'))
{
("checkbox").each(function(){
$(this).attr('checked', 'checked');
});
}
});
If he unchecks the "Select All" checkbox , then everything will be unchecked.
$("#chkSelectDeselectAll").click(function(){
if(!$("#chkSelectDeselectAll").is(':checked'))
{
("checkbox").each(function(){
$(this).removeAttr('checked');
});
}
});
And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
$("checkbox").click(function(){
("checkbox").each(function(){
if($(this).is(':checked'))
{
$("#chkSelectDeselectAll").removeAttr('checked');
}
});
});
If all the four check boxes are checked, then the "Select All" will be checked.
$("checkbox").click(function(){
("checkbox").each(function(){
var yesno=true;
if(!$(this).is(':checked'))
{
yesno=false;
}
});
if( yesno)
{
$("#chkSelectDeselectAll").attr('checked', 'checked')
}
});
I would really recommend you to update your jQuery library and try to add a class to all the checkboxes you want to listen to, but:
var collection = $("input:checkbox:not(#chkSelectDeselectAll)").change(function() {
selectAll[0].checked = collection.filter(":not(:checked)").length === 0;
});
var selectAll = $("#chkSelectDeselectAll").change(function(){
collection.attr('checked', this.checked);
});
will work, I added the feature if you manually check all (or deselect one when you pushed select all) then it will toggle off the #chkSelectDeselectAll. A demo:
http://jsfiddle.net/voigtan/yTWKY/1/
Simply check the state of all checkboxes.
Working Demo: http://jsfiddle.net/XSdjQ/1/
Updated Demo: http://jsfiddle.net/XSdjQ/2/
Yet another Demo that works nicely with your markup: http://jsfiddle.net/XSdjQ/3/
You can try this code.
$(document).ready(function(){
$('#chkSelectDeselectAll').toggle(function(){
$('input[type=checkbox]').each(function(){
$(this).attr('checked',true);
});
},function(){
$('input[type=checkbox]').each(function(){
$(this).removeAttr('checked');
});
})
});
Thanks.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=chkAll]").bind("click", function () {
if ($(this).is(":checked")) {
$("[id*=chkvalue] input").attr("checked", "checked");
} else {
$("[id*=chkvalue] input").removeAttr("checked");
}
});
$("[id*=chkvalue] input").bind("click", function () {
if ($("[id*=chkvalue] input:checked").length == $("[id*=chkvalue] input").length) {
$("[id*=chkAll]").attr("checked", "checked");
} else {
$("[id*=chkAll]").removeAttr("checked");
}
});
});
</script>
<asp:CheckBox ID="chkAll" Text="Select All Test Patterns" runat="server" />
<asp:CheckBoxList ID="chkvalue" runat="server">
<asp:ListItem Text="On/Off" />
<asp:ListItem Text="Alternate Rows" />
<asp:ListItem Text="Alternate Columns" />
<asp:ListItem Text="Alternate Diagonals" />
<asp:ListItem Text="Running Row" />
<asp:ListItem Text="Running Columns" />
</asp:CheckBoxList>
function checkOne(){
if( document.getElementById('chkTV').checked &&
document.getElementById('chkGardening').checked &&
document.getElementById('chkSwimming').checked &&
document.getElementById('chkChess').checked ){
document.getElementById('chkSelectDeselectAll').checked = true;
}
else{
document.getElementById('chkSelectDeselectAll').checked = false;
}
}
<input type="checkbox" id="chkTV" onclick="checkOne">Watching T.V.<br><br>
<input type="checkbox" id="chkGardening" onclick="checkOne">Gardening<br><br>
<input type="checkbox" id="chkSwimming" onclick="checkOne">Swimming<br><br>
<input type="checkbox" id="chkChess" onclick="checkOne">Playing Chess<br><br>