0

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.

3
Contributors
11
Replies
28
Views
4 Years
Discussion Span
Last Post by JorgeM
Featured Replies
  • 1

    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" … Read More

0

Use jquery if you do not want an postback.

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

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>
0
$("#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.

0

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

0

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.

0

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());
}
0
 $("#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.

0

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>
1

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

0

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

0

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.

Edited by JorgeM

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.