CODEWITHSUNDEEP
javascriptjqueryhtml
user3199385
user3199385

Reputation: 123

Toggle text input based on the Select Box Value

I am trying to do a small JavaScript/JQuery Function

Here is my Code,

HTML

<select id="mySelect">
   <option value="YES">YES</option>
   <option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<input type="submit" id="submit" />

JavaScript

var e = document.getElementById("mySelect");
var strValue = e.options[e.selectedIndex].value;

$(document).ready(function() {
  $("#text-input").prop('disabled', true);
  $('select').click(function() {
    if (strValue == "YES") {
      $("#text-input").prop("disabled", false);
      $("#submit").prop("disabled", false);
    } else if (strValue == "NO") {
      $("#text-input").prop("disabled", true);
      $("#submit").prop("disabled", true);
    }

  });
});

And this is What I need to do here,

  1. If User Select YES, then text box will be enabled and user must make an input and should be a number
  2. If user select NO then input should be disabled and user can submit.

I am trying to do this but the disabling is not working properly. Also Please try to help me to make this a numbered input. I can not use type="number" attribute.

Upvotes: 3

Views: 1757

Answers (5)

Nishant123
Nishant123

Reputation: 1966

HTML Code

<form action="#">
<select id="mySelect">
   <option value="YES">YES</option>
   <option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<span id="errmsg"></span>
<input type="submit" id="submit" />
</form>

If user select NO then input should be disabled and user can submit.

$('#mySelect').change(function(){
   $("#text-input").prop('disabled', this.value == "NO");
   $("#submit").prop('disabled', this.value == "YES");
  }).change()

If User Select YES, then text box will be enabled and user must make an input and should be a number

$("#text-input").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });

Here is the demo

Upvotes: 2

Milind Anantwar
Milind Anantwar

Reputation: 82251

You can get the value of select element in change function and set disabled property as true/false based on value:

$(function(){
  $('#mySelect').change(function(){
   $("#text-input").prop('disabled', this.value == "NO");
   $("#submit").prop('disabled', this.value == "YES");
  }).change();//trigger events once for behavior in beginning 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<input type="submit" id="submit" />

Upvotes: 2

BenG
BenG

Reputation: 15164

The reason your code is not working is because you get the select value on page load and not when its changed.

try adding it in the event and change it from click to change:-

$(document).ready(function() {

  $("#text-input").prop('disabled', true);

  $('select').change(function() {

    var e = document.getElementById("mySelect");
    var strValue = e.options[e.selectedIndex].value;
    
    // or use: var strValue = this.value;

    if (strValue == "YES") {
      $("#text-input").prop("disabled", false);
      $("#submit").prop("disabled", false);
    } else if (strValue == "NO") {
      $("#text-input").prop("disabled", true);
      $("#submit").prop("disabled", true);
    }

  });
});

There are better/cleaner ways of doing this like @MilindAnantwar 's answer, but this is why your code is not working.

Upvotes: 0

guradio
guradio

Reputation: 15565

$(document).ready(function() {
  $("#text-input").prop('disabled', true);
  $('#mySelect').change(function() {//use change event
    if ($('option:selected', this).val() == "YES") {//get value of selected option
      $("#text-input").prop("disabled", false);
      $("#submit").prop("disabled", false);
    } else {
      $("#text-input").prop("disabled", true);
      $("#submit").prop("disabled", true);
    }

  }).change();//change on load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="YES">YES</option>
  <option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<input type="submit" id="submit" />

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68685

Try this:

$(document).ready(function(){
    var select = $('select');
    var textInput = $('#text-input');
    var btnSubmit = $("#submit");

    textInput .prop('disabled', true);
    select.click(function(){
        if(select.val() == "YES"){

         textInput .prop("disabled", false);
         btnSubmit.prop("disabled", false);

      }else if(select.val() == "NO"){

        textInput.prop("disabled", true);
        btnSubmit.prop("disabled", true);

      }

    });
 });

Upvotes: 1

Related Questions