html disable text box when radio button is selected-CodePudding

I am trying to write Javascript to disable textbox if radio button is selected. I have 4 options for radio button and corresponding textbox. Even if I am selecting radio button 2, I am able to write values in radio 1 text and submit. So I want to add method on click or on change of radio button selection option. I have below Javascript function but it's not being called on event. Am I doing anything wrong. Why Javascript is not being called? Any help would be appreciated. I am new to Javascript.

{% extends "layout.html" %}
{% block body %}
<html>
<head>

    <meta charset="UTF-8">
    
               <script type="text/javascript">
    
        function EnableDisableTextBox() {
            alert("good")
            var chkYes = document.getElementById("search1");
            alert("Today's date is " chkYes);
            var text1 = document.getElementById("text1");
            alert('java script')
            text1.disabled = chkYes.checked ? false : true;
            if (!text1.disabled) {
                text1.focus();
            }
        }
    </script>
    <form method="post">
        <br><br><br>
        <input type="radio"   onchange="EnableDisableTextBox()"   align="center" name="search" id="search1" value="" > By Keyword <input type="text" id="text1" name="text1" for="search1"></input> <br>
        <input type="radio" align="center" name="search" id="search2" value="" id="search2" > In PostalCode <input type="text"  name="text2" id="text2" for="search2"></input><br>
        <input type="radio" align="center" name="search" id="search3" value="" id="search3" >Within<input type="number" name="text3" id="text3" for="search3" step="1" max="150" min="0">miles of me</input><br>
        <input type="radio" align="center" name="search" id="search4" value="Search4" id="search4" >In My PostalCode<br><br><br>
        <button name="button"  id="btn" onclick="window.location.href='/search/{{search}}'">Search</button>
    
           </form>
    
        </head>
    
    
    </html>
    
    {% endblock %}

CodePudding user response：

Try change

            alert("Today's date is " chkYes);

           alert("Today's date is " ,chkYes);

CodePudding user response：

based on your code, you only bind onchange event on the first radio. you need to call the function on each radio button. Besides inside the EnableDisableTextBox function, only the first radion button is checked and only the first text box is being disabled.

I have create a fiddle for your reference in javascript and jquery:

JAVASCRIPT

JQUERY

JAVASCRIPT

 function EnableDisableTextBox(e) {
   var text1 = document.getElementById('text1');
   var text2 = document.getElementById('text2');
   var text3 = document.getElementById('text3');
   var checkid = e.id;
   text1.disabled = true;
   text2.disabled = true;
   text3.disabled = true;

   if (checkid == 'search1') {
    text1.disabled = false;
   } else if (checkid == 'search2') {
    text2.disabled = false;
   } else if (checkid == 'search3') {
     text3.disabled = false;
   }
  }

JQUERY

  $(document).on('change', 'input[name="search"]', function() {
     var name = $(this).next().attr('id');
     $('input[type="text"],input[type="number"]').each(function(i, e) {
       if (name == $(e).attr('id')) {
         $(e).removeAttr('readonly');
       } else {
         $(e).val('');
         $(e).attr('readonly', 'readonly');
       }
     })
   })