Home/ Questions/Q 7571837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:46:09+00:00

I am very new to Javascript and jQuery. I am trying to implements a

  • 0

I am very new to Javascript and jQuery. I am trying to implements a dropdown select box, whereby, when certain items are selected an input text box is disabled. I was able to implement by hacking together some jQuery from various StackOverFlow questions:

<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" >
    <option value="full01_severity_notselected" selected="selected">Please select...</option>
    <option value="full01_severity_other">Mild</option>
    <option value="full01_severity_other">Moderate</option>
    <option value="Severe">Severe</option>
    <option value="full01_severity_other">Other</option>
</select>
<br />
<input type="text" id="li-10-14" />

<input type="text" name="firstname" title="First Name" style="color:#888;"
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>  

<script type="text/javascript">

$('#Severity-of-your-symptoms').change(function() {
  $("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast");
}).change();

$('#Severity-of-your-symptoms').change(function() {
    $("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true)
 : $('#color').attr("disabled", false)]
}).change();

</script>

I really wanted to implement this in Javascript but was only able to get it working with jQuery, can anyone help me convert this into pure Javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I understand the intent of your code, you can do it like this. The only thing this leaves out is animation for hiding/showing like you had with jQuery.

    // this code should be located after the rest of the HTML at the end of the <body> tag
function checkSeverity() {
    var displayVal, disabledVal;
    if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") {
        displayVal = "inline";
        disabledVal = true;
    } else {
        displayVal = "none";
        disabledVal = false;
    }
    document.getElementById("li-10-14").style.display = displayVal;
    document.getElementById("color").disabled = disabledVal;
}

// hook up the event handler
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity;
// call it initially to establish the initial state
checkSeverity();

    You can see it work here: http://jsfiddle.net/jfriend00/3xGxp/

    • 0