0

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
20
Views
3 Years
Discussion Span
Last Post by gahhon
0

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"?

0

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.

0

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

0

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();
    }
}
0

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

0

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 :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.