CODEWITHSUNDEEP
javascriptjquerydrop-down-menuhtml-selecthtml-input
user1152142
user1152142

Reputation: 909

Converting jQuery code into Javascript

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?

Upvotes: 0

Views: 203

Answers (2)

jfriend00
jfriend00

Reputation: 708056

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/

Upvotes: 2

RobG
RobG

Reputation: 147523

Taking it in bits:

$('#Severity-of-your-symptoms')

The $ function creates a "jQuery object" that is an array with additional methods. The members of the array are the elements selected by the selector. In this case, it is using an ID so only one element is selected. It can be replaced by:

var element = document.getElementById('severity-of-your-symptoms');

.change(function(){...})

This calls a method of the jQuery object to add an onchange listener to the element what will be called when the element receives a change event. If you only need one change listener, then you can attach it to the onchange property:

element.onchange = function(){...};

But element might be null, so better to do:

if (element) element.onchange = function(){...};

To remove the jQuery bits from the function, if you just want the element to appear and dissaear, then:

function() {
  var element = document.getElementById('li-10-14');

  if (this.value == "full01_severity_other") {
    element.style.display = element.style.display == 'none'? '' : 'none';
  }
}

If you want fade in/out or slide up/down effects, there are very simple libraries to implement those.

Finally there is:

.change();

You could write the whole thing as a single statement, but I think it's much more robust to keep it as seperate statements. Converting the other part is much the same.

Upvotes: 1

Related Questions