CODEWITHSUNDEEP
javascriptjqueryhtmlforms
popeye1716
popeye1716

Reputation: 1

Javascript to enable/disable radio buttons when text field is cleared or chars are present

I'm working on a little script that will disable a form field if certain radio button are ticked or if the input filed has characters to disable the radio buttons

So what I'm wanting my code to do is when the User enters the text field and adds at least one character of any type to disable the radio buttons and if that field is cleared to re-enable the radio buttons

For some reason when I'm doing either or, my "Enabled" alert keeps showing and the radio buttons aren't being disabled

to get the alert to pop, need to click outside of the input field, I would like this to be a mouseout if possible but I can work on that later

If the value is entered within the form directly, the radio buttons are disabled but I can't get them enabled once the filed is cleared

Steps: Enter text in text field, if value isn't set in the form. Radio buttons stay disabled

Enter Value within the form, the text buttons stay disabled when the text field is cleared

Working Parts: If radio btn "Yes" is ticked display "test" string and disable text field If Radio btn "No" is ticked then enable text field

jQuery version in use: 1.9

Below is my JavaScript and below that is the HTML

Script: 

$(function() {

    var tlHeader = 'Test';

    var f2 = $('#field_2').val();

    // This function controls inpput box toggling on/off radio buttons
    $( '#field_2' ).change(function() {
        if(f2.length != 0) {
            alert( "Disabled" )
            $("input[name=toggle]").prop('disabled', true)
        } else if(f2.length == 0) {
            alert( "Enabled" ) 
            $("input[name=toggle]").removeProp('disabled')
        };
    }); 

   window.invalidate_input = function() {
      // This function controls radio btn actions
        if ($('input[name=toggle]:checked').val() == "Yes") {
            $('#field_2').attr('disabled', 'disabled'),
            $('#thgtLdr').html( tlHeader );
            $('#thgtLdr').not("No").show();

        } else if ($('input[name=toggle]:checked').val() == "No") {
            $('#field_2').removeAttr('disabled'),
            $('#thgtLdr').not("Yes").hide();
        }
   };


    $("input[name=toggle]").change(invalidate_input);

    invalidate_input();
});
</script>

HTML:

      <body>

<div id=rdTest>
    <div class="inputField">
        <label>Focal Image:</label>
        <input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
    </div> <!-- End input field -->


  <div class="radioGroup">
    <label>Test Page:</label>
        <input type='radio' name='toggle' value='Yes' id="tglyes"/>Yes
        <input type='radio' name='toggle' value='No' id="tglno"/>No
  </div> 

<div id="thgtLdr">

</div>

</div>  



</body>

Upvotes: 0

Views: 2746

Answers (3)

Mikey
Mikey

Reputation: 6766

You can simplify your code in many ways.

The keyup event will be triggered every time the user releases a key on the text field. Inside the callback, you can get the value of the text field with this.value. From experience, it is best to use .prop() method when toggling certain input-related attributes like disabled and checked. You can enable/disable these attributes using booleans.

// cache the elements to avoid having retrieve the same elements many times
var $textbox = $('#field_2'), 
    $radios = $('input[name=toggle]'), 
    $div = $('#thgtLdr');

// everytime user presses a key...
$textbox.on('keyup', function() {
    // check if a value was entered or not
    // if so, disabled the radio buttons; otherwise enable the radio buttons
    $radios.prop('disabled', this.value);
});

// when radio buttons change...
$radios.on('change', function () {
    // check if value is Yes or No
    if (this.value === 'Yes') {
        $textbox.prop('disabled', true);
        $div.text(this.value);
    } else {
        $textbox.prop('disabled', false);
        $div.empty();             
    }
});
<div id=rdTest>
<div class="inputField">
    <label>Focal Image:</label>
    <input name="FocalImage" type="text" id="field_2" class="textbox" value="">
</div>
<div class="radioGroup">
    <label>Test Page:</label>
    <input type="radio" name="toggle" value="Yes" id="tglyes">Yes
    <input type="radio" name="toggle" value='No' id="tglno">No
</div>
<div id="thgtLdr"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> // place code here </script>

Also, get into the habit of caching your jQuery objects.

Upvotes: 0

Vijay Wilson
Vijay Wilson

Reputation: 516

Try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('click','.choice',function(){
    if($(this).val() == 'yes')
    {
       $('.textfield').prop('disabled',true);
       $('#string').html('Test Welcome');
    }
    else
    {
       $('.textfield').prop('disabled',false);
       $('#string').html('');
    }
});
$(document).on('keyup','.textfield',function(){
    if($(this).val().length > 0)
    {
       $('.choice').each(function()
       {
          if($(this).is(':checked'))
          {
             $(this).attr('checked',false);  
          }
          $(this).prop('disabled',true);
       });
    }
    else
    {
       $('.choice').prop('disabled',false);
    }
});
});
</script>
<body>
<form>
    <input type="text" class="textfield" placeholder="enter text"/>
    Yes<input type="radio" name="choice" class="choice" value="yes" />
    No<input type="radio" name="choice" class="choice" value="no" />
    <p id="string" ></p>
</form>
</body>

Upvotes: 0

Wesley Smith
Wesley Smith

Reputation: 19571

Your use case isnt entirely clear but I'll show you how to achieve the basic goal.

First, I would avoid the mouse events and use keyup with a timer so that my function is only called when the user stops typing and not after each typed letter. Then it's just a mater of checking the text and acting to enable or disable the elements. Here is an example:

    var keyupDelay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();
    
    $('#field_2').keyup(function() {
        var $this=$(this);
        keyupDelay(function(){
            var val=$this.val();
            console.log(val);
            if(val=='') $('#tglyes, #tglno').prop('disabled',true);
            else $('#tglyes, #tglno').prop('disabled',false);
        }, 400 ); // triggered after user stops typing for .4 seconds, adjust value as needed
    });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=rdTest>
    <div class="inputField">
      <label>Focal Image:</label>
      <input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
    </div>
    <!-- End input field -->
    <div class="radioGroup">
      <label>Test Page:</label>
      <input type='radio' name='toggle' value='Yes' id="tglyes" disabled="true"/>Yes
      <input type='radio' name='toggle' value='No' id="tglno"  disabled="true"/>No
    </div>

    <div id="thgtLdr">
    </div>
  </div>

Upvotes: 0

Related Questions