Member Avatar for gahhon

I have 2 ASP.NET controls, which are the label and textbox.
Both of this controls are enclosed with <div></div>

When the end-users seletected a radio button which value is Others
The <div> block and show it up without any postback.
by using <div> block is i doing research i am trying to apply, but get a failure result.

$(document).ready(function() {    
    TriggerChange();
    $('#radLoan input').change(function() {
        TriggerChange();
    });
});

function TriggerChange() {
    var isOther = $('#radLoan input:checked');
    var divOther = $('#divOther');  

    if (isOther.val() == 'Others') {
        ("#divOther").show();
    } else {
        ("#divOther").hide();
    }
}










            <asp:Label runat="server" Text="Types of Loan: " />
            <asp:RadioButtonList ID="radLoan" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" ClientIDMode="Static">
                <asp:ListItem Value="Car">Car Loan&nbsp&nbsp&nbsp</asp:ListItem>
                <asp:ListItem Value="House">House Loan&nbsp&nbsp&nbsp</asp:ListItem>
                <asp:ListItem Value="Others">Others&nbsp&nbsp&nbsp</asp:ListItem>
            </asp:RadioButtonList>
            <asp:RequiredFieldValidator runat="server" ControlToValidate="radLoan" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="LoanRegister" />
            <br /><br />
            <div id="divOther">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Label runat="server" Text="Others: " />
                <asp:TextBox ID="txtOthers" runat="server" />
            </div>
  • 2 Contributors
  • 6 Replies
  • 2K Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by gahhon
Member Avatar for JorgeM

i appologize because I know that I have trouble understanding your posts sometimes.... can you clarify exactly what it is you are trying to do?

What do you want to happen when the user clicks on "Others"?

Member Avatar for gahhon

Sorry about my english standard wasn't that good. :/
i use the simplest language to type

if ( user.selected_radiobutton.value == 'Other' )
a textbox will be display.

Member Avatar for JorgeM

Ok, i think i understand. What you want is for the div #divOther to be displayed if the user selects the radio button for "others". This is the way that I would implement it. There are various ways to do it...

Code tested, only an aspx file, no code behind since we are looking at client side functionality only.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <style>
        #divOther {display:none;}
        label {margin-right:20px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="Label1" runat="server" Text="Types of Loan: " />
    <asp:RadioButtonList ID="radLoan" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" ClientIDMode="Static">
         <asp:ListItem Value="Car">Car Loan</asp:ListItem>
         <asp:ListItem Value="House">House Loan</asp:ListItem>
         <asp:ListItem Value="Others">Others</asp:ListItem>
    </asp:RadioButtonList>
    <br /><br />
    <div id="divOther">
         <asp:Label ID="Label2" runat="server" Text="Others: " />
         <asp:TextBox ID="txtOthers" runat="server" />
    </div>
    </div>
    </form>
    <script>
        $(document).ready(function () {
            var radioChecked;
            $('input:radio').change(function () {
                radioChecked = $("input[type='radio']:checked").val()
                if (radioChecked == "Others") {
                    $('#divOther').show();
                } else {
                    $('#divOther').hide();
                }
            });
        });
</script>
</body>
</html>

Results....

32a8d469b9f11543abbb4b590b96bff3

Edited by JorgeM
Member Avatar for gahhon

My one can't be work if i put in .js file

in tag <head>
<script type="text/javascript" src="js/client_style.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

in client_style.js

$(document).ready(function() {  
    TriggerChange();
    $('input:radio').onchange(function () {
        TriggerChange();
    });
});

function TriggerChange() {
    var radioLoanChecked = $("input[type='radio']:checked").val();
    if (radioLoanChecked == "Others") {
        $('#divOther').show();
    } else {
        $('#divOther').hide();
    }
}
Member Avatar for JorgeM

So with regard to your scripts in the head section, it appears that you are referencing two versions of jQuery. That's not recommended. What I would suggest is that you do it this way instead...

You need to load your library before you can reference it. its customary to load the library in the head section, then load your external scripts prior to the close of the body element, if possible.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<!-- Your HTML Code -->

<script type="text/javascript" src="js/client_style.js"></script>
</body>
</html>

Also, your jQuery code is different than what I suggested. I did not test your code.

Edited by JorgeM
Member Avatar for gahhon

Due to your code is combined to document.ready
But i want seperate a new function which should be called. That's why i take your code and modify.

Eventhough i copy and paste your code inside my document.ready, it still cannot be working.

Never mind, i temporary apply in the design first. btw Thanks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.