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.
gahhon 13 Junior Poster
Singlem 0 Light Poster
Use jquery if you do not want an postback.
$("#RadioButtonId").live("change", function() {
$('#TextBoxId').val($("#RadioButtonId").val());
};
JorgeM 958 Problem Solver Team Colleague Featured Poster
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>
gahhon 13 Junior Poster
$("#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
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
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
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
$("#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
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 </asp:ListItem>
<asp:ListItem Value="Clothes">Clothes </asp:ListItem>
<asp:ListItem Value="Drinks">Drinks </asp:ListItem>
<asp:ListItem Value="Entertaiment">Entertaiment </asp:ListItem>
</asp:RadioButtonList>
<asp:Label runat="server" Text="Amount: " />
<asp:TextBox runat="server" ID="txtAmount" />
</div>
</asp:Content>
JorgeM 958 Problem Solver Team Colleague Featured Poster
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 </asp:ListItem>
<asp:ListItem Value="Clothes">Clothes </asp:ListItem>
<asp:ListItem Value="Drinks">Drinks </asp:ListItem>
<asp:ListItem Value="Entertaiment">Entertaiment </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...
gahhon 13 Junior Poster
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
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.
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.