Home/ Questions/Q 6926587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:56:15+00:00

How to transform the folowing code to Unobtrusive JavaScript? <!DOCTYPE html> <html> <head> <title>title</title>

  • 0

How to transform the folowing code to Unobtrusive JavaScript?

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <script type="text/javascript">
        function ar_change(){
            if (document.ar_form.ar_type[0].checked)
                var txt = "";
            else if (document.ar_form.ar_type[1].checked)
                var txt = "first text.";
            else if (document.ar_form.ar_type[2].checked)
                var txt = "second text.";
            else if (document.ar_form.ar_type[3].checked)
                var txt = "third text.";
            else if (document.ar_form.ar_type[4].checked)
                var txt = "forth text.";
            document.ar_form.ar_text.value=txt;
        }
    </script>
</head>
<body>
    <form name="ar_form" action="." method="post">
        <textarea name="ar_text"></textarea><br>
        <input type="radio" name="ar_type" value="0" onclick="ar_change()" checked>no text<br>
        <input type="radio" name="ar_type" value="1" onclick="ar_change()">text 1<br>
        <input type="radio" name="ar_type" value="2" onclick="ar_change()">text 2<br>
        <input type="radio" name="ar_type" value="3" onclick="ar_change()">text 3<br>
        <input type="radio" name="ar_type" value="4" onclick="ar_change()">text 4<br>
        <input type="submit" />
    </form>
</body>
</html>

This javascript changes the content when the user select a radion button. the current script is working i want to remove all the “onclick” from the tags, and check it the redio button changed using js. how do i do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    No change to the form is needed (except for removing the onclick handler):

    Plain JS:

    DEMO here

    window.onload=function() {
  var rads = document.getElementsByName("ar_type");
  for (var i=0,n=rads.length;i<n;i++) {
    rads[i].onclick=function() {
      this.form.ar_text.value=["","first_txt","second_txt","third_txt","fourth_txt","fifth_txt"][this.value];
    }
    if (rads[i].checked) rads[i].click(); // set the value onload
  }
}

    jQuery:

    DEMO

    $(document).ready(function() {
  $('input[name=ar_type]:radio').click(function() {
    this.form.ar_text.value=["","first_txt","second_txt","third_txt","fourth_txt","fifth_txt"][this.value];
  });
    $('input[name=ar_type]:radio').filter(":checked").click(); // IMPORTANT!!!
});
    • 0