CODEWITHSUNDEEP
javascriptjqueryhtml
S4NDM4N
S4NDM4N

Reputation: 924

Enable set of radio buttons when text box is filled

In my small program I want to enable a set of radio buttons when my password filed's get matched. I'm using PHP to get data from a database and while loop the HTML code to create the radio buttons. below is my script code and HTML codes.

JavaScript:

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
        role.disabled = false;
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

HTML:

<label for="userRoles">User Role:</label><br>
<?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
  <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>" disabled><?php echo $row["userRole"]; }?>
</div>

Above HTML / PHP code will create something like this,

<div id="userRoles">
<label for="userRoles">User Role:</label><br>
<input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
<input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
<input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
<input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
</div>

Problem is my javascript doesn't remove the disable attribute from the radio buttons. Can some one point me down the right path or show me what I'm not doing right.

UPDATE: Solved the problem thank's to @JoYthi now my working JavaScript look like this.

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;

        for (var i = 0; i < role.length; i++){
            role[i].disabled = false;
        }

    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

Upvotes: 0

Views: 111

Answers (2)

JYoThI
JYoThI

Reputation: 12085

1) you need for loop for disable each radio button.

2) And also you need to enable the disabled property on else part if user password is match it's remove the disabled property . again if user changed in password field and it doesn't match means while radio button is enabled so in this case you need to disabled it in else part .

$('#pWord1,#pWord2').on('keyup', function () {

    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
       for (var i=0;  i < role.length; i++) {
        role[i].disabled = false;
        } 
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
         for (var i=0;  i < role.length; i++) {
          role[i].disabled = true;
          } 
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <input type='text' id='pWord1'>
		<input type='text' id='pWord2'>
      <div id="userRoles">
            <label for="userRoles">User Role:</label><br>
            <input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
            <input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
            <input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
            <input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
        </div>
        <span id="msg"color="red" ></span>
    </div>

Upvotes: 1

Richardson. M
Richardson. M

Reputation: 932

Here is an sample using JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
        $('#text').change(function(){
            $('.userRoles').removeAttr('disabled');
        });  
        });
    </script>

    <div>
        <input type='text' id='text'>
      <div id="userRoles">
            <label for="userRoles">User Role:</label><br>
            <input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
            <input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
            <input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
            <input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
        </div>
    </div>

Upvotes: 0

Related Questions