简体   繁体   中英

How to change text according to radio button selection using Javascript

I've a dropdown list which contains a set of names.. When select one name, a set of data will be generated from database..

And those data will bind into Radiobutton list control which in placed under the control..

I've a text control with predefined text as "hello"..

Now, that "hello" has to changed with the text I'm selecting in Radiobutton list..

For example, I've "Apple, Orange, Grape" in radio button list.. When I select Apple first time, "Hello" changed to "Apple".. I done this.. But when I select "Orange", "Assple" is not changing.. How to do that..?

function SelectChanged(Radiolst)
{
    var mailBdy = document.getElementById("<%=txtEditor.ClientID  %>");
    var toMember = document.getElementById(Radiolst);
    var selectedTxt=$(toMember).find(":checked").next().html();
    var newBod = $(mailBdy).val();
    newBod=newBod.replace('Hello',selectedTxt);
    mailBdy.value = newBod;
    alert(mailBdy.value);
}

The function SelectChanged is Client function of Radiobutton list.. First time alert shows "Apple" , but next time its not changes..

Here is the txtEditor and Radiobutton list control ASP.NET coding..

<asp:RadioButtonList ID="lstTo" runat="server"   ></asp:RadioButtonList>

<textarea id="txtEditor" name="txtEditor" style="width: 100% ; height :300px " runat="server" enableviewstate ="true"  > </textarea>

Since the markup hasn't been provided I'm taking a guess here:

For HTML like:

<select>
<option value="orange">
<option value="apple">
</select>
<input type="radio" id="Radiolst" value="Hello" name="some">

jQuery should be like:

$(document).ready(function () {
  $('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    $("#Radiolst").val(valueSelected);
    $("#txtEditor").text(valueSelected);
  });
});

Do remember to put this in the <head> tag of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

DEMO FIDDLE

Try this:

var globalVar = 'hello';
function SelectChanged(Radiolst)
{
    var mailBdy = document.getElementById("<%=txtEditor.ClientID  %>");
    var toMember = document.getElementById(Radiolst);
    var selectedTxt=$(toMember).find(":checked").next().html();
    var newBod = $(mailBdy).val();
    newBod=newBod.replace(globalVar,selectedTxt);
    globalVar = selectedTxt;
    mailBdy.value = newBod;
    alert(mailBdy.value);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM