CODEWITHSUNDEEP
javascript
SeanFlynn
SeanFlynn

Reputation: 453

Change style of text field based on the selection of a combo box using Javascript

I would like to change the style of a text field based on the value selected in a combo box. Specifically, what I'd like to do is make the txtDepartment field gray and marked as "read only" if the option value selected in cboSource is 1. I've tried the code below, but I imagine my style code at least is wrong, if not other things. Any help appreciated. Thanks!

<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

<script>
function displayDepartment(obj)
{
    var selectedValue = obj.value;
    var txtDepartment = document.getElementById("txtDepartment");


    if (selectedValue == "1") 
    {
        txtDepartment.style.display = "Disabled style='background-color:#E8E8E8'";

    }
}
</script>

Upvotes: 0

Views: 3158

Answers (5)

Ifi
Ifi

Reputation: 540

In my opinion onclick is more suitable as on change has different meaning for different browser

Try this 

<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

    <script>
    function displayDepartment(obj)

    {
        var txtDepartment = document.getElementById("txtDepartment");  
        txtDepartment.disabled = false;  
        txtDepartment.style = "";
        if (obj.value == "1") 
        {
            txtDepartment.style = "background-color:#E8E8E8";
            txtDepartment.disabled = true;  
        }
    }

</script>

Upvotes: 0

jaltiere
jaltiere

Reputation: 1118

possible solution using jQuery:

<style>
  .disabled { 
    background-color:#E8E8E8;
  }
</style>

<script language="javascript">

    $(document).ready(function() {
        var txtDepartment = $("#txtDepartment");
        var cboSource = $("#cboSource");

        cboSource.change(function() {
            txtDepartment.removeClass().removeAttr("disabled"); 
            if (cboSource.val() == 1) {
                txtDepartment.addClass("disabled").attr("disabled", true); 
            }
        });
    });

</script>

<select name="cboSource" id="cboSource">
    <option value = 0>Choose</option>
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

Upvotes: 0

The Who
The Who

Reputation: 6622

Set the disabled attribute for your element

// on
txtDepartment.setAttribute("disabled","disabled")

// off
txtDepartment.removeAttribute("disabled")

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

txtDepartment.style.backgroundColor = "#E8E8E8";

txtDepartment.disabled = 'disabled';

with jQuery your whole function gets a lot smaller:

function displayDepartment(obj)
{
    if($(obj).value=="1") {
        $("#txtDepartment").css('background-color','#E8E8E8');
        $("#txtDepartment").disabled ='disabled'
     }
}

Upvotes: 1

wtaniguchi
wtaniguchi

Reputation: 1324

First, use onchange on cboSource.

Then:

if(selectedValue == "1")
    txtDepartment.disabled = 'disabled';

Upvotes: 0

Related Questions