CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netradiobuttonlist
fc123
fc123

Reputation: 918

html element not working inside radio button list

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

enter image description here

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&nbsp <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>

Upvotes: 0

Views: 505

Answers (2)

Umesh Sehta
Umesh Sehta

Reputation: 10683

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

Upvotes: 1

Afzal Ahmad
Afzal Ahmad

Reputation: 626

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,

Code Result

Upvotes: 1

Related Questions