Textbox Value change based on SelectedIndexChanged

Question

gahhon 13 Junior Poster

10 Years Ago

How can i able to update the textbox value once the radio button selected index change and without post back method?
and tricks?
thanks for advance.

asp.net

3 Contributors
11 Replies
1K Views
3 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by JorgeM

All 11 Replies

Singlem 0 Light Poster

10 Years Ago

Use jquery if you do not want an postback.

$("#RadioButtonId").live("change", function() {
    $('#TextBoxId').val($("#RadioButtonId").val());
};

JorgeM 958 Problem Solver

10 Years Ago

There are several ways to handle this but javascript/jQuery is probably what you want to do as Singlem suggests...

here is an example that incorporates some asp.net controls to give you a better example especially if you are not familiar with javascript or the jQuery library. Something you may consider researching further...

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox runat="server" ClientIDMode="Static" ID="txtBox1"></asp:TextBox><br />
        <asp:RadioButtonList runat="server" >
            <asp:ListItem>One</asp:ListItem>
            <asp:ListItem>Two</asp:ListItem>
            <asp:ListItem>Three</asp:ListItem>
        </asp:RadioButtonList>

        <script>
            $(document).ready(function () {
                $("input[type='radio']").change(function () {
                    if ($(this).is(":checked")) {
                        $("#txtBox1").val($(this).val());
                    }
                });
            });
        </script>
    </div>
    </form>
</body>
</html>

JorgeM 958 Problem Solver

10 Years Ago

Ok, so if you take the sample I posted above and just modify it according to the last sample you posted...I removed "onselectedindexchanged="radCategory_SelectedIndexChanged" since we are handling this client side, and also specified ClientIDMode on the textbox since we do not want asp.net to generate its own ID.

<asp:RadioButtonList ID="radCategory" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" >
            <asp:ListItem Value="Foods">Foods &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Clothes">Clothes &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Drinks">Drinks &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Entertaiment">Entertaiment &nbsp;&nbsp;&nbsp;</asp:ListItem>
        </asp:RadioButtonList>
        <asp:TextBox runat="server" ClientIDMode="Static" ID="txtBox1"></asp:TextBox><br />
        <asp:Label ID="Label1" runat="server" Text="Amount: " /><br />
        <asp:TextBox runat="server" ID="txtAmount" />


        <script>
            $(document).ready(function () {
                $("input[type='radio']").change(function () {
                    if ($(this).is(":checked")) {
                        $("#txtBox1").val($(this).val());
                    }
                });
            });
        </script>

works as expected...

98b43910c0d73844b224c7384e7cf11e

Reply to this topic

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.

gahhon 13 Junior Poster · Answer 1 · 2013-09-12T16:01:36+00:00

$("#radCategory").live("change", function() {
    $("#txtCategory").val($("#radCategory").val());
}

Thanks for the quick reply.
But after i change to like this, is still doesn't work.
BTW, my textbox and radiobuttonlist are in a web page with Master Page.

Singlem 0 Light Poster · Answer 2 · 2013-09-12T16:06:42+00:00

If you using jquery 1.9+

need to change the live to on

$("#radCategory").on("change", function() {
    $("#txtCategory").val($("#radCategory").val());
}

if it still does not work. Post most code please

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2013-09-12T16:07:21+00:00

BTW, my textbox and radiobuttonlist are in a web page with Master Page.

keep in mind that javascript is working client side. it doesnt know or care about master pages. You simply need to know what the ID of the element is to work with it. You can use ClientIDMode to help you create static IDs.

gahhon 13 Junior Poster · Answer 4 · 2013-09-12T16:19:37+00:00

Is still doesn't work.

$(document).ready(function() {    

  // execute the slideShow, set 4 seconds (4000) for each image
  slideShow(4000);

});

function slideShow(speed) {

  // append an 'li' item to the 'ul' list for displaying the caption
  $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');

  // set the opacity of all images to 0
  $('ul.slideshow li').css({opacity: 0.0});

  // get the first image and display it
  $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');

  // get the caption of the first image from the 'rel' attribute and display it
  $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));

  // display the caption
  $('#slideshow-caption').css({opacity: 0.6, bottom:0});

  // call the gallery function to run the slideshow  
  var timer = setInterval('gallery()',speed);

  // pause the slideshow on mouse over
  $('ul.slideshow').hover(
    function () {
      clearInterval(timer); 
    },  
    function () {
      timer = setInterval('gallery()',speed);     
    }
  );  
}

function gallery() {

  //if no images have the show class, grab the first image
  var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

  // trying to avoid speed issue
  if(current.queue('fx').length == 0) {

    // get the next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

    // get the next image caption
    var desc = next.find('img').attr('alt');  

    // set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    // hide the caption first, and then set and display the caption
    $('#slideshow-caption').slideToggle(300, function () { 
      $('#slideshow-caption p').html(desc); 
      $('#slideshow-caption').slideToggle(500); 
    });   

    // hide the current image
    current.animate({opacity: 0.0}, 1000).removeClass('show');

  }
}


$("#radCategory").on("change", function() {
    $('#txtCategory').val($("#radCategory").val());
}

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2013-09-12T16:36:26+00:00

 $("#radCategory").on("change", function() {
    $("#txtCategory").val($("#radCategory").val());
  }

You do realize that this sample assumes that you made sure your asp.net control rendered with the proper IDs..correct? View the HTML source to make sure.

Did you not understand the example I posted above?

Also, you are only targeting one radio element?

I don't see how your example is going to work, but I don't see your asp.net markup so I don't know.

Please do not upload all of your code. It's very hard to go through it. Only the relevant code is needed.

You should be able to use the example I gave you above, at least to see how it works.

gahhon 13 Junior Poster · Answer 6 · 2013-09-12T17:01:07+00:00

In fact, is not targetting only one radio element, but is radio button list with multiple choices of radio button.
ASP.NET control id are correct as well.
Like you said, JQuery doesn't care about master pages or child pages.
So i assume is doesn't matter if i want apply this to my child pages.

<asp:Content ID="Content1" ContentPlaceHolderID="CPHInformation" runat="server">
    <div id="ChartMenu">
        // ... ... ...
        <asp:RadioButtonList ID="radCategory" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" 
             onselectedindexchanged="radCategory_SelectedIndexChanged">
            <asp:ListItem Value="Foods">Foods &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Clothes">Clothes &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Drinks">Drinks &nbsp;&nbsp;&nbsp;</asp:ListItem>
                <asp:ListItem Value="Entertaiment">Entertaiment &nbsp;&nbsp;&nbsp;</asp:ListItem>
        </asp:RadioButtonList>
        <asp:Label runat="server" Text="Amount: " />
        <asp:TextBox runat="server" ID="txtAmount" />
    </div>
</asp:Content>

gahhon 13 Junior Poster · Answer 7 · 2013-09-12T18:03:19+00:00

It's work by adding ClientIDMode = "Static" to the TextBox Properties.
Thanks you so much JorgeM. <3

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 8 · 2013-09-12T18:39:43+00:00

Glad you solved your problem. Look at line 12 in my first response in this thread...i included that property. I also tried to emphasize its importance, especially when you are dealing with asp.net and jQuery. This property makes it a whole lot easier to work client side.

thank you for providing that feedback. I am sure it will help others with this type of issue.

Textbox Value change based on SelectedIndexChanged

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers